[CSS] CSS 레이아웃

1. CSS 포지셔닝과 주요 속성들

box-sizing 속성 - 박스 너비 기준 정하기

box-sizing : content-box | border-box

속성 값	설명
content-box	width 속성 값을 콘텐츠 영역 너비 값으로 사용, 기본 값
border-box	width 속성 값을 콘텐츠 영역에 테두리까지 포함한 박스 모델 전체 너비 값으로 사용

float 속성 - 왼쪽이나 오른쪽으로 배치하기

웹 요소를 문서 위에 떠 있게 만든다.

float : left | right | none

속성 값	설명
left	해당 요소를 문서의 왼쪽으로 배치
right	해당 요소를 문서의 오른쪽으로 배치
none	좌우 어느 쪽으로도 배치하지 않음

clear 속성 - float 속성 해제하기

float 속성을 이용해 웹 페이지 요소를 왼쪽이나 오른쪽에 배치하면 그 다음에 넣는 다른 요소들에도 똑같은 속성이 전달된다. 따라서 float 속성이 더 이상 유용하지 않다고 알려 주는 속성이 clear 속성이다.

clear : none | left | right | both

 

position 속성 - 배치 방법 지정하기

position : static | relative | absolute | fixed

속성 값	설명
static	요소를 문서의 흐름에 맞추어 배치
relative	이전 요소에 자연스럽게 연결해 배치하되 위치를 지정할 수 있음
absolute	원하는 위치를 지정해 배치
fixed	지정한 위치에 고정해 배치, 화면에서 요소가 잘릴 수도 있음

visibility 속성 - 요소를 보이게 하거나 보이지 않게 하기

visibility : visible | hidden | collapse

속성 값	설명
visible	화면에 요소를 표시, 기본 값
hidden	화면에서 요소를 감춤, 하지만 크기는 그대로 유지하기 때문에 배치에 영향을 미침
collapse	표의 행, 열, 행 그룹, 열 그룹 등에서 지정하면 서로 겹치도록 조절 그 외의 영역에서 사용하면 'hidden'처럼 처리

z-index 속성 - 요소 쌓는 순서 정하기

z-index 값이 작을수록 아래에 쌓이고, 클수록 z-index 값이 작은 요소보다 위에 쌓임

 

 

2. 다단으로 편집하기

column-width 속성 - 단의 너비 고정하고 다단 구성하기

column-width : <크기> | auto

속성 값	설명
<크기>	단 너비를 직접 지정
auto	단의 개수(column-count) 같은 다른 속성에 따라 단의 너비가 자동 계산

column-gap 속성 - 단의 단 사이 여백 지정하기

column-gap : <크기> | auto

속성 값	설명
<크기>	단과 단 사이의 여백을 숫자로 지정
auto	여백을 자동으로 지정, W3W에서 권장하는 여백은 1em

column-rule 속성 - 구분선의 색상, 스타일, 너비 지정하기

column-rule-color : <색상>

column-rule-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

column-rule-width : <크기> | thin | medium | thick

column-rule : <너비> | <스타일> | <색상>

 

break-after 속성 - 다단 위치 지정하기

break-after : column | avoid-column

break-before : column | avoid-column

break-inside : column | avoid-column

속성	단 나눌 위치	동작
		단 나눔	단 나누지 않음
break-before	특정 요소 앞
break-after	특정 요소 뒤	column	avoid-column
break-inside	특정 요소 안

column-span 속성 - 여러 단을 하나로 합치기

column-span : 1 | all

속성 값	설명
1	단을 하나만 합치는 것이므로 합치지 않는 것과 같음, 기본 값
all	전체 단을 하나로 합쳐 표현, 단의 일부만 합칠 수 없음

 

3. 표 스타일

caption-side 속성 - 표 제목 위치 정하기

caption-side : top | bottom

속성 값	설명
top	캡션을 표의 윗부분에 표시, 기본 값
bottom	캡션을 표의 아랫부분에 표시

border-collapse 속성 - 테두리 통합, 분리하기

border-collapse : collapse | separate

속성 값	설명
collapse	테두리를 하나로 합쳐 표시
separate	테두리를 따로 표시, 기본 값

border-spacing 속성 - 인접한 셀 테두리 사이 거리 지정하기

border-spacing : <크기>

속성 값	설명
<크기>	px이나 em 등 크기와 단위를 직접 지정

empty-cells 속성 - 빈 셀의 표시 여부 지정하기

empty-cells : show | hide

속성 값	설명
show	빈 셀 주위에 테두리를 그려 빈 셀 표시, 기본 값
hide	빈 셀에 테두리를 그리지 않고 비워 둠

width, height 속성 - 표 너비와 높이 지정하기

 

table-layout 속성 - 콘텐츠에 맞게 셀 너비 지정하기

속성 값	설명
fixed	셀 너비를 고정 셀 내용에 따라 셀의 너비가 달라지지 않음
auto	셀 내용에 따라 셀의 너비가 달라짐, 기본 값

text-align 속성 - 셀 안에서 수평 정렬하기

text-align : left | right | center

 

vertical-align 속성 - 셀 안에서 수직 정렬하기

vertical-align : baseline | top | bottom | middle | sub | super | text-top | text-bottom | <길이 값> | <백분율 값>

속성 값	설명
baseline	인라인 요소의 기준선을 부모 요소의 기준선(baseline)에 맞춤
sub	인라인 요소의 기준선을 부모 요소의 아래 첨자 위치에 맞춤
super	인라인 요소의 기준선을 부모 요소의 위 첨자 위치에 맞춤
top	인라인 요소의 윗부분을 부모 요소의 윗부분에 맞춤
middle	인라인 요소의 중앙 부분을 부모 요소의 기준선에서 x-높이(소문자 x의 높이 값)의 반만큼 올려서 맞춤
bottom	인라인 요소의 아랫부분을 부모 요소의 아랫부분에 맞춤
text-top	인라인 요소의 윗부분을 부모 요소 글꼴의 윗부분에 맞춤
text-bottom	인라인 요소의 아랫부분을 부모 요소 글꼴의 아랫부분에 맞춤
<길이 값>	기준선을 0px로 생각하고 길이 값이 양수면 기준선 위로, 음수면 기준선 아래로 지정한 크기만큼 옮김
<백분율 값>	기준선을 0%로 생각하고 line-height의 몇 %인지에 따라 양수면 위로, 음수면 아래로 옮김

속성 값	설명
baseline	셀의 기준선에 내용의 기준선을 맞춤
top	패딩의 위쪽 가장자리에 내용의 윗부분을 맞춤
middle	패딩 박스의 중앙에 내용을 맞춤
bottom	패딩의 아래쪽 가장자리에 내용의 아랫부분을 맞춤