본문 바로가기

css style

16. float _ 요소를 띄워 정렬 float란 단어 뜻 그대로 띄우는 태그입니다. 태그들이 직관적이라 참 좋네요. 레이아웃을 잡을때 가장 많이 쓰이는 태그 중 하나입니다. 한 영역에 float를 주면 그 뒤에 따라오는 영역들이 넓이가 허용하는 안에서 옆으로 올라 옵니다. 마치 물에 물체들이 둥둥 뜨는 것처럼요. 줄바꿈이 일어나는 block태그를 옆으로 배치시킬때 사용합니다. 기본형은 아래와 같습니다. float float CSS float float left 왼쪽을 기준으로 차례대로 둥둥 띄워 정렬합니다. 가장 위의 영역부터 왼쪽부터 차례대로 늘어섭니다. box 1 box 2 box 3 CSS box 1 box 2 box 3 right left와는 반대로 오른쪽부터 차례대로 정렬합니다. 가장 첫번째 float영역이 가장 오른쪽에 오게 됩.. 더보기
15. position _ 위치지정 position은 위치를 지정하는 요소로 레이아웃을 잡을때 뻔질나게 쓰입니다. relative와 absolute, fixed가 있는데 기준점, 고정성 등의 차이가 있습니다. 기본적으로 어떤 position을 사용할지 입력한 후, top, bottom, left, right의 값을 주면 됩니다. 기준점은 따로 지정이 되지 않으면 나의 부모, 내 윗대에 position이 지정되어 있다면 그 윗대가 기준이 됩니다. 기본형은 아래와 같습니다. position CSS position relative relative는 내가 현재 위치한 자리를 기준으로 움직입니다. 나의 현재 위치에서도 상단 왼쪽 끝이 기준점이 됩니다. relative는 자신의 자리를 기억하고 공간을 차지합니다. 앞에 property는 기준으로 할 .. 더보기
14. display _ inline과 block 속성을 변경 display는 얠 어떻게 보여줄래? 정도로 해석할 수 있습니다. 앞서 15번째 html 강좌에서 inline태그와 block태그에 대해 나왔었는데 display는 inline태그와 block태그에 관한 속성을 정의해 줍니다. 속성값이 생각보다 엄청 많은데 자주 쓰는 네가지만 알아보도록 합시다. inline / block / inline-block / none 이렇게 네가지가 자주 쓰입니다. (나머지도 알고 싶다면 http://www.w3schools.com/cssref/pr_class_display.asp에서 확인해 봅시다. inline 속성값을 inline으로 만들어 줍니다. 기본값이 block태그라도 display:inline으로 지정해 주면 inline이 됩니다. block 태그인 p에 inlin.. 더보기
13. box model _ contents의 크기 계산 box model이란 간단히 말하면 box의 크기를 계산하는 방법입니다. 사람에 비유하자면 내 키와 뚠띠정도에 옷 두께, 깔창 등등 모든걸 다 합한 후 내 부피가 얼만한가에 관한 것입니다. 크기에 영향을 주는 요소로는 width, height, padding, margin, border가 있습니다. 이 모든 요소를 다 더하면 이 컨텐츠의 크기가 나옵니다. 위에 컨텐츠의 box model을 계산해 봅시다. 먼저 가로를 계산합니다. width 값이 300px, padding이 왼쪽 오른쪽 각각 30px씩이니 +60px 입니다. 거기에 border가 왼쪽 오른쪽 3px씩 해서 +6px, margin이 30px씩 +60px입니다. width = 300px + (30px+30px) + (3px+3px) + (30.. 더보기
12. margin, padding _ 여백 주는 요소 margin과 padding 둘다 여백을 주는 요소입니다. 구조도 똑같지만 출력 방법이 큰 차이가 있습니다. 가장 큰 차이는 여백이 border의 안쪽에 존재하느냐 바깥쪽에 존재하느냐 입니다. 일단 공통적인 표기 방법을 봅시다. 하나의 세가지 방법이 있습니다. 첫번째는 여백이 같은 치수 일때, 하나로 요약해서 사용합니다. 두번째는 아래위 여백이 같고 좌우 여백이 같을때 사용합니다. 세번째 네번째는 각각 여백이 제멋대로 일때 사용하는데요, 세번째는 한번에 써줄때 사용하며 순서는 위 / 오른쪽 / 아래 / 왼쪽 순으로 써줍니다. 네번째는 그냥 하나하나 margin-top, margin-right.... 이래 적어주심 됩니다. CSS margin margin은 다른 태그와 나랑 사이에 여백을 주는 것입니다. .. 더보기
11. border _ 선 요소 border는 선, 테두리에 관련된 요소를 지정해줍니다. 전체에 적용하거나 한 방향에, 혹은 박스에 둥글기도 줄 수 있습니다. 기본 표기법부터 보겠습니다. 표기 순서는 선 굵기 / 선 타입 / 선 색깔 순으로 적어줍니다. 전체 위 오른쪽 아래 왼쪽 CSS 전체 위 오른쪽 아래 왼쪽 line type 선 타입으로는 자주 쓰이는 것은 solid와 none, dotted 값이 있구요, 그 외에도 여러 타입들이 있는데 사실 저 세가지 이외엔 한번도 써본적이 없네요. 하지만 세상일은 모르는 것이니 하나씩 다 쳐보고 확인해 봅시다. dotted / dashed / solid / double / groove / ridge / inset / outset / none 참고로 각 타입을 mix해서 각 선마다 다르게 쓸 수.. 더보기
09. opacity _ 투명도 조절 너비와 높이를 지정해주는 요소입니다. 말그대로 width값은 너비, height값은 높이를 지정하구요, px로 나타내거나 %로 지정할 수 있습니다. CSS max-width / max-height / min-width / min-height 이름에서 어차피 다 드러나지만 설명하자면 너비 최대값, 높이 최대값, 너비 최소값, 높이 최소값 입니다. 어떨때 쓰일까요? 우리들의 모니터는 쥐콩만한 것부터 엄청 넓은 것까지 다양합니다. 브라우저가 항상 풀사이즈가 아닐 수도 있구요. 모바일환경 같이 쬐깐한 기기도 있습니다. 이런 경우 어떠한 크기가 되건 난 요 싸이즈까진 맞춰줄꺼다, 확고하다 하고 지정해 주는 겁니다. 아래의 예제를 작성후 ctrl + F11을 눌러 결과를 확인할때 브라우저 창을 점점 더 작게 줄여 .. 더보기
08. list-style _ 리스트 말머리 변경 ul, ol 등의 리스트에 이쁨을 담당합니다. 말머리로 ul은 꽉찬 동그라미, ol은 숫자가 기본값으로 출력되는데요 이걸 바꿔주는 거라 볼 수 있겠네요. list-style-type 말그대로 입니다. 리스트 스타일의 타입을 골라줍니다. 값으로는 circle, square, upper-roman, lower-alpha, disc, none이 있습니다. 여기서 disc가 기본값 꽉찬 동그라미 입니다. 기본값을 지우고 싶다면 none을 값으로 주면 됩니다.확인해 봅시다. 뚫린 동그라미 뚫린 동그라미 네모네모 네모네모 기본 속성을 버려봅시다 똥글뱅이 안나오죠? 로마숫자 5이상 못외웁니다 소문자 abc 잘 안씁니다 전 CSS 뚫린 동그라미 뚫린 동그라미 네모네모 네모네모 기본 속성을 버려봅시다 똥글뱅이 안나오죠?.. 더보기
07. font요소 _ 텍스트 꾸밈 요소 앞에 이어서 텍스트의 여러가지 요소를 변경합니다. font-family 텍스트 폰트를 선택해 줍니다. 일단 원하는 폰트를 설정한 후, 만약 그 폰트가 구현이 안될경우 기본으로 사용할 폰트를 골라야 합니다. serif와 sans-serif가 있는데 자신이 적용한 폰트가 삐침이 있으면 serif, 삐침이 없이 고딕같은 폰트라면 sans-serif를 선택합니다. 두가지 폰트 선택시의 차이를 볼까요 sans-serif 삐침이 없어요 serif 삐침이 있어요 CSS sans-serif 삐침이 없어요 serif 삐침이 있어요 sans-serif와 serif의 차이를 아시겠나요? http://www.google.com/fonts/에 가면 다양한 폰트들이 있습니다. 여기서 폰트를 골라서 font-family에 적용하면.. 더보기
06. text요소 _ 텍스트 꾸밈 요소 텍스트의 여러가지 요소를 변경합니다. text-로 시작하는 요소와 font-로 시작하는 요소, line-으로 시작하는 요소 등이 있습니다. color 텍스트의 색상을 변경해 줍니다. 색상을 변경합니다 CSS 색상을 변경합니다 text-align 텍스트의 정렬방식을 변경합니다. value값으로는 left, right, center, justify가 있습니다. left, right, center는 말그대로 왼쪽 정렬, 오른쪽 정렬, 가운데 정렬이고 justify를 입력하면 양쪽정렬이 됩니다. 양쪽정렬이란 양옆을 꽉 채워서 정렬되는 것을 말합니다. 띄어쓰기가 조금씩 조정되서 네모 반듯하게 정렬됩니다. 왼쪽 정렬 가운데 정렬 오른쪽 정렬 "Lorem ipsum dolor sit amet, consectetur .. 더보기
05. color 표기법 _ 16진수, 컬러네임, rgb color 표기법은 크게 세가지로 나눌 수 있습니다. 16진수, 색상 이름으로, rgb의 비율로 명시할 수 있습니다. 편하신대로 사용하시면 됩니다. 대표적인 색상을 사용할때는 이름으로, 좀 더 디테일한 색상은 16진수나 rgb로, 투명도를 추가할때는 rgba를 사용하면 됩니다. 16진수 #뒤에 각 색상에 맞는 6자리 숫자,알파벳을 나열해 색상을 표시하는 방법입니다. 자세한 설명과 컬러표는 http://html-color-codes.info/Korean/를 참고하세요. 같은 숫자나 알파벳이 반복되는 경우에는 줄여서 사용할 수 있습니다. 예를 들면 #000000이나 #ffffff의 경우 #000, #fff로 줄여 쓸 수 있습니다. 16진수로 색상을 명시합니다 CSS 16진수로 색상을 명시합니다 color n.. 더보기
04. background _ 배경 효과 background는 배경효과를 정의해주는 요소입니다. 배경의 색깔, 배경그림, 반복여부, 위치 등을 결정해 줍니다. 코드만 봐도 느낌이 오니 바로 예제를 봅시다. background-color 배경의 색깔을 변경해 줍니다. 배경색을 입혀주세요 CSS 배경색을 입혀주세요 background-image 배경에 이미지를 삽입해 줍니다. 배경이미지를 깝시다 CSS 배경이미지를 깝시다 배경이미지의 크기가 영역과 딱 맞는다면 좋겠지만 그렇지 않은 경우도 더러 있습니다. 그럴때 background-size를 사용합니다. value값을 contain으로 주면, 가로세로 중 작은 값에 배경 크기를 맞춥니다. 어떤 크기에도 딱 맞게 담기지요. 가로나 세로 중 크기가 남을 경우에는 이미지를 반복하여 처리합니다. 반면 vl.. 더보기
03. css문법 _ 표기법 및 선택자 css는 선택자, 속성, 값으로 구성됩니다. 선택자는 어떤 태그에 css를 입혀줄건지 선언하는 겁니다. 속성은 선택한 태그에서 어떠한 부분을 바꿀것인지, 값은 그 속성에 대해 어떻게 바꿔줄 건지 정해줍니다. 값을 적은 후에는 꼭 뒤에 ;를 붙여 각 속성을 분리해 줍니다. 선택자 selector 선택자에는 태그, id, class가 있습니다. 태그는 말그대로 태그명을 써주면 됩니다. id선택자의 경우, #을 붙이고 id를 써주면 됩니다. #idSelector 이렇게 됩니다. class는 . 뒤에 class명을 써주므로 .classSelector가 됩니다. 예시로 확인합시다. 나는 태그선택자에요 나는 id선택자에요 나는 class 선택자에요 CSS 나는 태그선택자에요 나는 id선택자에요 나는 class 선택.. 더보기
02. css 속성 상속 _ 부모, 자식, 자손 자식, 자손요소들은 부모의 속성값을 그대로 상속받습니다. 먼저 부모, 자식, 자손 요소에 대해 알아볼까요? 우리가 생각하는 가계도와 똑같습니다. 일단 제일 위에 값을 부모라고 합니다. 그 바로 밑에 위치하는 애들이 자식요소입니다. 이 자식 요소안에 위치하는 애들은 자손입니다. 모든 부모에게 부모가 있는 것처럼 부모요소 또한 상위개념 요소에게는 자식요소가 됩니다. 상속 자식, 자손요소는 부모요소의 속성값을 상속받습니다. 하지만 상속은 절대적인 것은 아닙니다. 상속이 안되는 속성값도 있고, 특정속성을 상속받지 않는 태그도 있습니다. 그건 차차 알아보도록 합시다. 일단 상속 예시를 봅시다. 부모요소인 #parent에 color값을 주면 자식, 자손들이 상속받습니다. 나는 자식입니다. 나도 자식입니다. 나는 자.. 더보기
01. css style _ 스타일 적용방법 css는 앞서 말했듯 html로 잡은 구조를 꾸며주는 기능을 합니다. css 사용시 3가지 방법이 있습니다. 대충 방법만 숙지하고 넘어갑니다. inline style 태그에 직접 코딩하는 것을 말합니다. 제 1순위로 적용이 되므로 급할때 쓰면 좋습니다. 하지만 나중에 유지보수나 수정이 힘들기 때문에 가급적 쓰지 않도록 합시다. 빨간 네모 안 처럼 태그의 여는 부분 뒤에 style=""를 넣어주고 그 사이에 작성하면 됩니다. 내부 스타일 시트 html 문서 안 head 사이에 을 입력 후 style태그 안쪽에 css를 입력합니다. style이 들어간 html 문서 안 모든 태그에 영향을 줍니다. 벗, 다른 페이지에서 똑같은 css를 사용하고 싶다면 똑같이 복사해서 또 넣어야 하므로 낭비낭비입니다. 그래서 .. 더보기

티스토리툴바