CSS (Cascading Style Sheets) 는 컨텐츠의 글꼴, 색상, 크기 및 간격을 변경하거나 여러 열로 분할하거나 애니메이션 및 기타 장식 기능을 추가하는 등의 웹 페이지 스타일 및 레이아웃에 사용됩니다. 이 때 적절한 property 값을 주어 페이지 구성을 하게 되는데 어떤 것들이 있는지 보겠습니다.
1. Display
Display는 아래와 같은 값을 설정하여 요소를 어떻게 처리 할 지 설정하는 property 입니다.
-
Block : 해당 요소를 block 특성을 가지는 요소(block 레벨 요소)로 지정하며, 다음과 같은 특징이 있습니다.
1) Width, Height, padding, margin 프로퍼티를 지정 할 수 있습니다.
2) Width 값을 미 설정시, 부모 요소의 content-box 크기를 전체 가로값으로 가집니다. 이로 인해 자신과 같은 행에 다른 요소의 배치를 막습니다.
3) Width 값을 설정시 남은 공간을 margin 으로 채웁니다.
4) Height 값을 미 설정시, 자식 요소들의 전체 세로값의 합을 content-box height 값으로 가집니다.
5) block 레벨 요소 내에 inline 요소 레벨을 포함 할 수 있습니다.
-
inline : 해당 요소를 inline 특성을 가지는 요소(inline 레벨 요소)로 지정하며, 다음과 같은 특징이 있습니다.
1) Width, Height, padding, margin 프로퍼티를 지정 할 수 없습니다.
2) 문장의 중간에 들어 갈 수 있습니다. 즉, 다른 요소와 같은 행에 위치 할 수 있습니다.
3) 자신의 content 너비 만큼 가로값을 가집니다.
4) inline 레벨 요소 내에 block 요소 레벨을 포함 할 수 없습니다.
-
inline-block : inline-block 특성을 가지는 요소(inline-block 레벨 요소)로 지정하며, block과 inline 레벨 요소의 특징을 모두 가집니다.
1) Width, Height, padding, margin 프로퍼티를 지정 할 수 있습니다.
2) 문장의 중간에 들어 갈 수 있습니다. 즉, 다른 요소와 같은 행에 위치 할 수 있습니다.
3) 자신의 content 너비 만큼 가로값을 가집니다.
2. position
Position은 아래와 같은 값을 설정하여 요소를 원하는 위치로 이동시키는 property 입니다.
- Static : 기본값 입니다. 이 값이 설정된 요소는 특별한 방식으로 위치가 지정 된 것이 아닙니다.
-
relative : 다음과 같은 특징을 가집니다.
1) 요소의 본래 위치를 기준점으로 가집니다.
2) 자신의 본래 위치를 기억합니다. 본래 위치를 이탈하였을 때 다른 요소가 영역을 침범하여 레이아웃이 망가지거나 하지 않습니다.
3) top, bottom, right, left 프로퍼티를 지정하여 위치를 이동 시킵니다.
-
absolute : 다음과 같은 특징을 가집니다.
1) 자신과 가장 가까운 부모요소 중 position 값이 'static'이 아닌 요소를 기준점으로 가집니다. (만약 부모, 조부모 요소가 모두 position: relative 인 경우, 부모 요소를 기준점으로 가집니다.)
2) display 프로퍼티 값이 'block'으로 변경됩니다.
3) 공간을 차지 하지 않음. (다른 요소가 침범하여 레이아웃이 망가질 수 있음.)
4) 해당 요소의 width 미지정시, 컨텐츠 만큼을 width 값으로 가집니다.
5) 부모요소가 자식요소로 인식 하지 않게 됩니다. (부모요소의 height값이 감소합니다.)
-
fixed : 다음과 같은 특징을 가집니다.
1) viewport를 기준점으로 가집니다. (그래서 페이지 스크롤시 요소 또한 이동합니다.)
2) 기준점을 제외하고 position: absolute 인 경우와 동일한 특징을 가집니다.
3. Float
Float 는 아래와 같은 특징을 가지며, 다른 요소와 상관없이 요소를 왼쪽이나 오른쪽으로 배치 할 때 사용하는 property 입니다.
1) display 프로퍼티 값이 'block'으로 변경됩니다.
2) 부모요소가 자식요소로 인식 하지 않게 됩니다. (부모요소의 height값이 감소합니다.)
3) 공간을 차지 하지 않습니다. (다른 요소가 침범하여 레이아웃이 망가질 수 있습니다. 단, 'display: inline' 인 요소는 float 된 요소를 인식하여 영역을 침범하지 않습니다.)
3-1)
4) 해당 요소의 width 미지정시, 컨텐츠 만큼을 width 값으로 가집니다.
5) 해당 요소의 width 지정시, '기존 부모요소의 content-box의 가로값 - float시킨 요소의 width' 값을 margin 으로 자동 지정 하지 않습니다.
Float 를 사용하여 레이아웃이 망가졌을 경우 이를 수정 하는 방법은 크게 2가지가 있습니다.
-
overflow
float 된 자식요소의 부모요소에 'overflow: hidden' 프로퍼티를 적용 할 경우 자식요소들의 전체 세로값의 합을 부모요소의 content-box height 값으로 가져옵니다.
단, 만약 부모요소와 자식요소의 height 값이 지정 되어있고, 부모요소의 height 값 < 자식요소의 height 값 인 상황일 경우 해당 자식요소는 잘려서 출력 됩니다. -
clearfix
float 된 요소의 다음요소의 프로퍼티에 'clear: left or right or both' 를 적용 할 경우 float가 해제 됩니다. 적용 방법은 2가지가 있습니다.
1) 요소를 하나 추가하여 해당 요소의 프로퍼티에 추가 하기
2) 가상요소(pseudo-element)를 추가하여 해당 요소의 프로퍼티에 추가하기
가상요소는 다음과 같은 방식으로 추가합니다.
.'부모요소class명'::before or ::after {
content: "";
display: block;
clear: left or right or block;
}::before : 부모소요의 하위요소들의 맨 앞에 가상요소 추가
::after : 부모소요의 하위요소들의 맨 뒤에 가상요소 추가
'content: "" ' : 가상요소 추가시 필수 property 입니다.
'display: block' : clear 프로퍼티는 diplay 프로퍼티 값이 block일 때만 사용 가능합니다.
