CSS포지셔닝과 주요 속성들
box-sizing
콘텐츠 영역의 너비에 패딩과 테두리 크기까지 합쳐서 width 속성을 지정할 수 있습니다.
| 기본형 | 설명 |
| box-sizing: content-box | width속성 값을 콘텐츠 영역 너비 값으로 사용합니다.(기본값) |
| box-sizing: border-box | width 속성 값을 콘텐츠+테두리까지 포함한 박스 모델 전체 너비 값으로 사용합니다. |
float속성
웹 요소를 문서 위에 떠 있게 만듭니다.
| 기본형 | 설명 |
| float: left | 해당 요소를 문서의 왼쪽으로 배치합니다. |
| float: right | 해당 요소를 문서의 오른쪽으로 배치합니다. |
| float: none | 좌우 어느 쪽으로도 배치하지 않습니다. |
clear속성
float 속성 해제하기
float속성을 이용해 웹 페이지 요소를 왼쪽이나 오른쪽에 배치하면 그 다음에 넣는 다른요소들에도 똑같은 속성이 전달되는데, float속성을 해제하기 위해서는 따로 알려줘야한다.
| 기본형 | 설명 |
| clear: none | clear을 설정하지 않은 것과 같다. |
| clear: left | 왼쪽 float속성을 해제한다 |
| clear: right | 오른쪽 float속성을 해제한다 |
| clear: both | 왼쪽과 오른쪽 float속성을 해제한다. |
position속성
웹 문서 안의 요소를 자유자재로 배치해 주는 속성으로 HTML과 CSS를 이용해 웹 문서를 만들 때 중요하게 사용하는 속성 중 하나입니다.
| 기본형 | 설명 |
| position: static | 요소를 문서의 흐름에 맞추어 배치합니다. |
| position: relative | 이전 요소에 자연스럽게 연결해 배치하되 위치를 지정할 수 있습니다. |
| position: absolute | 원하는 위치를 지정해 배치합니다.(절대좌표) |
| position: fixed | 지정한 위치에 고정해 배치합니다. 화면에서 요소가 잘릴 수도 있습니다. |
position속성 중 static을 제외한 나머지 속성 값에서는 좌표를 이용해 각 요소의 위치를 조절할 수 있습니다. 이 때 위치는 top, bottom, left, right로 지정합니다.
top은 위쪽으로부터 떨어진거리 bottom은 아래로부터 떨어진거리 left는 왼쪽으로부터 떨어진 거리 right는 오른쪽으로부터 떨어진 거리이며 좌표값은 양수와 음수 모두 사용가능합니다.
visibility속성
요소를 보이게 하거나 보이지 않게 하기
| 기본형 | 설명 |
| visibility: visible | 화면에 요소를 표시합니다.(기본값) |
| visibility: hidden | 화면에서 요소를 감춥니다. |
| visibility: collapse | 표의 행, 열, 행 그룹, 열 그룹 등에서 지정하면 서로 겹치도록 조절합니다. 그 외의 영역에서는 hidden처리합니다. |
z-index속성
| 기본형 | 설명 |
| z-index: <숫자> | z-index값이 작을수록 아래 쌓이고 높을수록 위에 쌓입니다.(값이 높은게 앞에 표시됨) |
다단으로 편집하기
column-width
단의 너비 고정하고 다단 구성하기
| 기본형 | 설명 |
| column-width: <크기> | 단 너비를 직접 지정합니다. |
| column-width: auto | 단의 개수(column-count) 같은 다른 속성에 따라 단의 너비가 자동 계산됩니다. |
column-coun속성
단의 개수 고정하고 다단 구성하기
| 기본형 | 설명 |
| column-count: <숫자> | 콘텐츠가 들어갈 단의 개수를 지정합니다. 0보다 큰수를 사용합니다. |
| column-count: auto | 단의 너비(column-width) 같은 다른 속성에 따라 단의 개수가 자동 계산됩니다. |
column-gap속성
단과 단 사이 여백 지정하기
| 기본형 | 설명 |
| column-gap: <크기> | 단과 단 사이의 여백을 숫자로 지정합니다. |
| column-gap: normal | 여백을 자동으로 지정합니다. W3C에서 권장하는 여백은 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-before | 특정 요소 앞 | column | avoid-column |
| break-after | 특정 요소 뒤 | ||
| break-inside | 특정 요소 안 | ||
column-span 속성
여러 단을 하나로 합치기
| 기본값 | 설명 |
| column-span: 1 | 단을 하나만 합치는 것 합치지 않은것과 같다.(기본값) |
| column-span: all | 전체 단을 하나로 합쳐 표현합니다. 단의 일부만 합칠 수 없습니다. |
표 스타일
caption-side 속성
표 제목 위치 정하기
표 제목은 <caption>태그를 이용해 캡션으로 표시합니다. 기본적으로 표의 위쪽에 표시되지만 caption-side속성을 이용하면 캡션의 위치를 표 아래쪽으로 옮길 수 있습니다.
| 기본형 | 설명 |
| caption-side: top | 캡션을 표의 윗부분에 표시합니다. (기본값) |
| caption-side: bottom | 캡션을 표의 아랫부분에 표시합니다. |
border속성
표 테두리 스타일 결정하기
표를 삽입할 때 기본적으로 <table> 태그의 border 속성을 이용해<table border="1">처럼 사용하면 표에 테두리를 그릴 수 있습니다.(표를 완성하기 전까지 표를 표시할 수 있는 쉬운 방법입니다.)
여기에 CSS의 border 속성을 이용해 테두리의 색상이나 형태, 너비 등을 지정할 수 있습니다. 이때 <table>태그에서 border속성을 이용해 <table border="1">처럼 테두리를 표시했을 경우, 표의 바깥 테두리뿐만 아니라 셀의 테두리까지 모두 표시되지만, CSS를 이용해 테두리를 표시할 때는 표의 바깥 테두리와 셀의 테두리를 따로 지정해야 합니다.
border-collapse속성
테두리 통합, 분리하기
<table>태그와 <td>태그에서 border속성을 사용하면 두 줄로 표시되는데 이때 border-collapse속성을 이용하면 표의 바깥 테두리와 셀의 각 테두리가 떨어져 있는 것을 그대로 둘 것인지, 두 테두리를 하나로 합칠 것인지 결정할 수 있습니다.
| 기본형 | 설명 |
| border-collapse: collapse | 테두리를 하나로 합쳐 표시합니다. |
| border-collapse: separate | 테두리를 따로 표시합니다. 기본 값입니다. |
border-spacing속성
인접한 셀 테두리 사이 거리 지정하기
border-collapse:separate를 사용해 셀들을 분리했을 경우, 인접한 셀 테두리 사이의 거리를 지정합니다.
| 기본형 | 설명 |
| border-spacing: <크기> | px이나 em등 크기와 단위를 직접 지정합니다. |
empty-cells속성
빈 셀의 표시 여부 지정하기
| 기본형 | 설명 |
| empty-cells: show | 빈 셀 주위에 테두리를 그려 빈 셀을 표시합니다.(기본형) |
| empty-cells: hide | 빈 셀에 테두리를 그리지 않고 비워 둡니다. |
width, height속성
표의 너비와 높이 지정하기
표의 셀들은 <th>태그나 <td>태그를 사용해 구성되는데 이 태그들은 셀을 만들 뿐, 표와 셀의 형태를 꾸미려면 CSS를 이용해야합니다. 맨 먼저 살펴봐야 하는 것은 표와 셀의 너비입니다. 특별히 지정하지 않는다면 셀 안의 내용이 표시될 만큼만 표시됩니다. 특정한 크기로 표시하고 싶다면 다른 웹 요소들의 너비를 지정할 때처럼 width 속성을 이용해 표와 셀의 너비를 지정하면 됩니다. 마찬가지로 height 속성을 이용해 높이도 지정할 수 있습니다. 이때 사용할 수 있는 값은 실제 크기를 나타내는 px이나 부모 요소를 기준으로 한 %입니다.
표의 너비를 지정하고 셀의 너비를 지정하지 않는다면 내용이 없을 경우의 표의 너비를 셀의 개수로 나누어 셀의 너비를 일정하게 지정하고 내용이 잇다면 내용에 따라 동일한 비율로 지정합니다.
table-layout속성
콘텐츠에 맞게 셀 너비 지정하기
| 기본형 | 설명 |
| table-layout: fixed | 셀 너비를 고정합니다. 즉, 셀 내용에 따라 셀의 너비가 달라지지 않습니다. |
| table-layout: auto | 셀 내용에 따라 셀의 너비가 달라집니다. 기본 값입니다. |
vertical-align 속성 - 셀 안에서 수직 정렬하기
| 기본형 | 설명 |
| vertical-align: baseline | 인라인 요소의 기준선을 부모 요소의 기준선(baseline)에 맞춥니다. |
| vertical-align: sub | 인라인 요소의 기준선을 부모 요소의 아래 첨자 위치에 맞춥니다. |
| vertical-align: super | 인라인 요소의 기준선을 부모 요소의 위 첨자 위치에 맞춥니다. |
| vertical-align: top | 인라인 요소의 윗부분을 부모 요소의 윗부분에 맞춥니다. |
| vertical-align: middle | 인라인 요소의 중앙 부분을 부모 요소의 기준선에서 x-높이(소문자 x의 높이 값)의 반만큼 올려서 맞춥니다. |
| vertical-align: bottom | 인라인 요소의 아랫부분을 부모 요소의 아랫부분에 맞춥니다. |
| vertical-align: text-top | 인라인 요소의 윗부분을 부모 요소의 윗부분에 맞춥니다. |
| vertical-align: text-bottom | 인라인 요소의 아랫부분을 부모 요소의 아랫부분에 맞춥니다. |
| vertical-align: <길이 값> | 기준선을 0px로 생각하고 길이 값이 양수면 기준선 위로, 음수면 기준선 아래로 지정한 크기만큼 옮깁니다. |
| vertical-align: <백분율 값> | 기준선을 0%로 생각하고 line-height의 몇%인지에 따라 양수면 위로, 음수면 아래로 옮깁니다. |
표의 셀에서 사용할 경우 기준선이나 위, 아래, 가운데 등으로 정렬할 수 있습니다.
| 속성 값 | 설명 |
| baseline | 셀의 기준선에 내용의 기준선을 맞춥니다. |
| top | 패딩의 위쪽 가장자리에 내용의 윗부분을 맞춥니다. |
| middle | 패딩 박스의 중앙에 내용을 맞춥니다. |
| bottom | 패딩의 아래쪽 가장자리에 내용의 아랫부분을 맞춥니다. |
'HTML > CSS 레이아웃' 카테고리의 다른 글
| CSS레이아웃 예제 (0) | 2021.08.15 |
|---|