[CSS] POSITIONING

 

box-sizing : 박스 너비 기준 설정

- 박스 모델 안에 있는 콘텐트 부분의 너비와 높이 지정

- content-box 속성 : width 속성 값을 콘텐츠 영역 너비 값으로 사용 (기본 값)

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

 

float : 왼쪽이나 오른쪽으로 배치

- left 속성 : 해당 요소를 문서의 왼쪽으로 배치

- right 속성 : 해당 요소를 문서의 오른쪽으로 배치

- none 속성 : 좌우 어느 쪽으로도 배치하지 않음

 

clear : float 속성 해제

- left 속성 : float:left 무효화

- right 속성 : float:right 무효화

- both 속성 : left인지 right인지 상관없이 무조건 기본 상태로 되돌림

 

position : 배치 방법 지정

- static 속성 : 요소를 문서의 흐름에 맞춰 배치

- relative 속성 : 이전 요소에 자연스럽게 연결해 배치하되, 위치를 지정할 수 있음

- absolute 속성 : 원하는 위치를 지정해 배치

- fixed 속성 : 지정한 위치에 고정해 배치

                 화면에서 요소가 잘릴 수 있음

 

visibility : 요소를 보이게 하거나 보이지 않게 하기

- visible 속성 : 화면에 요소를 표시 (기본 값)

- hidden 속성 : 화면에서 요소를 감춤

                    크기는 그대로 유지하게 때문에 배치에 영향을 미침

- collapse 속성 : 표의 행, 열, 행 그룹, 열 그룹 등에서 지정하면 서로 겹치도록 지정

                      그 외의 영역에서 사용하면 'hidden'처럼 처리

 

z-index : 요소 쌓는 순서 지정

 

 

---

 

 

단(column) 관련

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

- 크기 속성 : 단 너비를 직접 지정

- auto 속성 : 단의 개수(column-count)같은 다른 속성에 따라 단의 너비가 자동 계산됨

 

column-count : 단의 개수 고정하고 다단 구성

- 숫자 속성 : 콘텐츠가 들어갈 단의 개수를 지정 (0보다 큰 수 사용)

- auto 속성 : 단의 너비(column-width)같은 다른 속성에 따라 단의 개수가 자동 계산됨

 

column-gap : 단과 단 사이 여백 지정

- 크기 속성 : 단과 단 사이의 여백을 숫자로 지정

- normal : 여백을 자동으로 지정 (권장하는 여백은 1em)

 

column-rule : 구분선의 색상, 스타일, 너비 지정

속성 값	설명	속성
column-rule-color	색생 지정	<색상>
column-rule-style	스타일 지정	none / hidden / dotted / dashed / solid / double / groove / ridge / inset / thick
column-rule-width	크기 지정	<크기> / thin / medium / thick
column-rule	전체 속성 지정	<너비> / <스타일> / <색상>

 

break-after : 다단 위치 지정

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

 

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

- 1 속성 : 단을 하나만 합치는 것이므로 합치지 않은것과 같음 (기본 값)

- all 속성 : 전체 단을 하나로 합쳐 표현 (일부만 합칠 수는 없음)

 

 

---

 

 

표 관련

caption-side : 표 제목 위치 지정

- top 속성 : 캡션을 표의 윗부분에 표시 (기본 값)

- bottom 속성 : 캡션을 표의 아랫부분에 표시

 

border : 표 테두리 스타일 결정

 

border-collapse : 테두리 통합 및 분리

- collapse 속성 : 테두리를 하나로 합쳐 표시

- separate 속성 : 테두리를 따로 표시 (기본 값)

 

border-spacing : 인접한 셀 테두리 사이 거리 지정

- 크기 속성 : px나 em 등 크기와 단위를 직접 지정

 

empty-cells : 빈 셀의 표시 여부 지정

- show 속성 : 빈 셀 주위에 테두리를 그려 빈 셀을 표시 (기본 값)

- hide 속성 : 빈 셀에 테두리를 그리지 않고 비워 둠

 

width, height : 표 너비와 속성 지정

 

table-layout : 콘텐츠에 맞게 셀 너비 지정

- fixed 속성 : 셀 너비 고정 (셀 내용에 따라 셀의 너비가 달라지지 않음)

- auto 속성 : 셀 내용에 따라 셀의 너비가 달라짐 (기본 값)

 

text-align : 셀 안에서 수평 정렬

 

vertical-align : 셀 안에서 수직 정렬

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

 

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