본문 바로가기
WEB/CSS

[CSS] CSS 레이아웃

by snow_white 2022. 1. 27.

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 패딩의 아래쪽 가장자리에 내용의 아랫부분을 맞춤

'WEB > CSS' 카테고리의 다른 글

[CSS] 반응형 웹  (0) 2022.02.11
[CSS] CSS 박스 모델  (0) 2022.01.27
[CSS] 색상과 배경을 위한 스타일  (0) 2022.01.27
[CSS] 텍스트 관련 스타일  (0) 2022.01.20
[CSS] font-family 속성 - 구글 웹 폰트 사용하기  (0) 2022.01.20

댓글