HTML5&CSS3 정리[4]
CHAPTER 4
# 박스 모델 만들기
content | 순수한 내용 영역을 의미하며, width/height 속성으로 영역의 크기를 지정 | ||||||||
padding | 안쪽 여백 영역을 지정 - padding-top, padding-right, padding-bottom, padding-left, padding(네 가지 속성을 한 번에 지정할 때, 순서는 top-right-bottom-left) | ||||||||
border | 테두리 영역을 지정
| ||||||||
margin | 바깥쪽 여백 영역을 지정 - margin-top, margin-right, margin-bottom, margin-left, margin(네 가지 속성을 한 번에 지정할 때, 순서는 top-right-bottom-left) |
# 표 합치기 : 셀을 합치는 것이기 때문에 <td>태그에만 적용 가능
colspan | 여러 개의 연속된 행을 합친다 |
rowspan | 여러 개의 연속된 열을 합친다 |
# 표 레이아웃 작성하기
1) 표의 제목 텍스트 삽입하기 (<caption>) : <table>태그와 첫 번째 <tr> 태그 사이에 삽입
2) 표 내부 구조 지정하기 : 표의 머리말은 <thead>태그, 꼬리말은 <tfoot>태그, 본문은 <tbody>태그를 사용, 이 태그들은 <table>태그와 <tr>태그 사이에 추가, 일반적으로 본문내용이 길어질 것을 우려해 머리말 혹은 꼬리말 영역을 먼저 선언하고 내용을 나중에 선언한다
# 여백과 테두리 지정하기 : 표 전체 스타일은 <table>태그에 각각의 셀 스타일은 <td>태그에 정의
margin | 문서와 표 사이의 바깥 여백을 의미하며, <table>태그에 사용된다. 박스 모델에서와 같이 top/right/bottom/left의 네 가지 방향에 대해 지정 가능 |
padding | 표 안에 하나의 셀에서 내용 영역과의 안쪽 여백을 의미하며, <td>태그에 사용된다. 박스 모델에서와 같이 top/right/bottom/left의 네 가지 방향에 대해 지정 가능 |
border | 표와 셀의 테두리를 지정, 표의 바깥쪽 사각 영역 테두리는 <table>태그에 지정하고, 표의 안쪽인 셀의 사각 영역 테두리는 <td>태그에 지정한다. 박스 모델에서와 같이 top/right/bottom/left의 네 가지 방향에 대해 지정 가능 |
width | 표의 전체적인 너비는 <table>태그에, 셀 각각의 너비는 <td>태그에 지정한다. %, px, pt 등 각종 길이 값을 사용할 수 있다. 만약 하나의 셀에 너비값이 지정된 경우 같은 열에 있는 모든 셀에 동일한 너비가 지정된다. |
height | 표의 전체적인 높이는 <table>태그에, 셀 각각의 높이는 <td>태그에 지정한다. %, px, pt 등 각종 길이 값을 사용할 수 있다. 만약 하나의 셀에 높이가 지정된 경우 같은 열에 있는 모든 셀에 동일한 높이가 지정된다. |
# 크기 지정하기
2) 대표 크기 지정하기 (<colgroup>, <col>)
<colgroup> | 표의 모든 열을 그룹으로 묶는 태그 |
<col> | 여러 개의 열을 그룹으로 묶는 태그 |
3) 동일한 크기 지정하기 (table-layout)
auto | 브라우저에서 지정하는 기본 너비값으로 지정, 셀의 내용이 길어지는 경우 그에 맞춰 셀의 너비가 길어진다. |
fixed | 표의 전체 너비에 열의 개수를 나누어 모든 열에 동일한 너비값을 지정 - 동시에 자동 줄 바꿈을 적용하는 것이 좋다 (style='word-break:break-all') |
# 확장된 표 속성 다루기
- border속성으로 표의 테두리를 생성해보면 단선이 아니라 약간의 여백이 존재한다. 이러한 경우 설정하는 속성들 'border-collapse', 'border-spacing', 두 속성 모두 <table>태그에 지정하는 스타일이다.
border-collapse | 셀 간격을 바짝 붙이므로 테두리가 단선으로 표시 - 속성으로 사용 가능한 값 : collapse (이웃하는 셀의 테두리를 겹쳐서 단선으로 표시), separate (이웃하는 셀의 테두리를 분리하여 각각 표시, 기본값) |
border-spacing | 셀 간격에 여백을 지정하는 속성, 'border-collapse'속성이 'seperate'로 지정되어 있어야함. 지정되는 값은 1-2개인데, 첫 번째 값이 좌/우 여백이고 두 번째 값이 상/하 여백을 의미 |
# 둥근 테두리 만들기
border-radius | - border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-radius(네 가지 속성을 한 번에 지정, 기본 순서는 top-left, top-right, bottom-right, bottom-left) |
- px, pt 등 길이값을 사용한 경우는 둥글어지는 영역의 반지름 값이고 %를 사용한 영우는 전체 길이 대비 둥굴어지는 영역을 지정한 것
# 테두리에 이미지 적용하기 (border-image)
border-image-source | 이미지의 경로를 지정 |
border-image-slice | 테두리의 안쪽 여백을 지정하고, 지정한 크기를 넘어가는 이미지는 잘라낸다 |
border-image-width | 테두리의 너비값을 지정 |
border-image-outset | 이미지의 위치를 지정한 거리만큼 바깥쪽으로 위치시키기 위한 속성 |
border-image-repeat | 이미지 반복 여부를 지정 - 지정 가능한 값 : repeat(반복), round(반복, 끝부분에서 약간 잘린다면 스스로 이미지 크기를 변경하게 맞게함), space(반복, 끝부분에서 약간 잘린다면 이미지들의 간격을 조절하여 정확하게 맞게함), stretch(이미지를 반복하지 않고 강제로 이미지를 늘려서 보여줌) |
border-image | 위 다섯 가지 속성을 한 번에 지정, 공백으로 구분되어 연결되며 기본 순서는 -source, -slice, -width, -outset, -repeat |
# 그림자 적용하기 (box-shadow)
h-shadow | 가로 그림자를 px, pt, cm 등 크기 단위로 지정, 음수값도 가능 |
v-shadow | 세로 그림자를 px, pt, cm 등 크기 단위로 지정, 음수값도 가능 |
blur | 그림자의 퍼짐 정도를 px, pt, cm 등 크기 단위로 지정, 음수값도 가능 |
spread | 그림자의 퍼짐 정도를 지정, 숫자가 커질수록 그림자 방향의 반대쪽에도 그림자가 퍼져 나타남 |
color | 그림자의 색상 |
inset | 바깥으로 지정된 그림자를 안쪽으로 변경, 예를 들어 오른쪽 하단 그림자를 안쪽으로 지정하면 왼쪽 상단에 생성 |