[두잇 HTML5+CSS3 웹표준의 정석] CSS Part9
CSS 포지셔닝과 주요 속성들
box-sizing 속성
: 박스 너비 기준 정하기
- 콘텐츠 영역의 너비에 패딩과 테두리 크기까지 합쳐서 width 속성으 지정할 수 있다
| content-box | width 속성 값을 콘텐츠 영역 너비 값으로 사용한다. 기본값이다. |
| border-box | width 속성 값을 콘텐츠 영역에 테두리까지 포함한 박스 모델 전체 너비 값으로 사용한다. |
float 속성
: 왼쪽이나 오른쪽으로 배치하기
- 예를 들어 이미지와 텍스트를 나란히 표시하려고 할 때는 이미지에 float 속성을 사용한다.
| left | 해당 요소를 문서의 왼쪽으로 배치한다. |
| right | 해당 요소를 문서의 오른쪽으로 배치한다. |
| none | 좌우 어느 쪽으로도 배치하지 않는다. |
clear 속성
: float 속성 해제하기
- float 속성을 이용해 배치하면 그 다음에 넣는 다른 요소들에도 똑같은 속성이 전달된다. 따라서 float 속성이 더 이상 유용하지 않다고 알려주는 속성이 필요한데 그것이 바로 float 속성이다.
* left인지 right인지와 상관없이 무조건 기본 상태로 되돌리고 싶다면 both라고 하면 된다 *
clear : none ㅣ left ㅣ right ㅣ both
로렘 입숨 (Lorem Ipsum) : 본문이나 내용을 어느정도 채워 레이아웃 테스트 해보려 할 때 의미없이 내용을 채워주는 것
position 속성
: 배치 방법 지정하기
- 웹 문서 안의 요소를 자유자재로 배치해 주는 속성이다.
strict 제외한 나무지 속성 값에서는 좌표를 이용해 위치를 조절하는데 양수와 음수 모두 사용할 수 있다.
1. strict 속성 값 - 문서의 흐름대로 배치하기
: 기본값이며 좌표값을 사용할 수 없다. 단지 float 속성을 이용해서 좌우로 배치할 수 있다.
2. relative 속성 값 - 문서 흐름 따라 위치 지정하기
: 좌푯값을 사용해서 위치를 지정할 수 있다. 예를 들어 top:50px; right:30px; 이라면 위쪽에서부터 50px, 오른쪽으로부터 30px이다.
3. absolute 속성 값 - 원하는 위치에 배치하기
: 문서의 흐름과 상관없으며 기준이 되는 위치는 가장 가까운 부모 요소나 조상 요소 중 position 속성이 relative인 요소이다. 만약 relative 요소가 없다면 브라우저 창이 기준이 된다.
4. fixed 속성 값 - 브라우저 창 기준으로 배치하기
: 부모 요소가 아닌 브라우저 창이 기준이 된다. 창을 스크롤하더라도 계속 고정되어 표시된다.
visibility 속성
: 요소를 보이게 하거나 보이지 않게 하기
- 특정 요소를 화면에 보이게 하거나 보이지 않게 할 수 있지만 실제로는 공간을 차지한다.
| visible | 화면에 요소를 표시한다. 기본값이다. |
| hidden | 화면에서 요소를 감춘다. 하지만 크기는 그대로 유지하기 때문에 배치에영향을 미친다. |
다단으로 편집하기
다단 만들기
1. 단의 너비 고정하기
2. 단의 개수 고정하기
column-width
: 단의 너비 고정하고 다단 구성하기
- 화면이 커지면 단의 개수가 많아지고 화면이 좁아지면 단의 개수가 적어진다.
| <크기> | 단 너비를 직접 지정한다. |
| auto | 단의 개수 같은 다른 속성에 따라 단의 너비가 자동 계산된다. |
column-count
: 단의 개수 고정하고 다단 구성하기
- 단의 개수를 항상 일정하게 유지해야 하기때문에 화면이 좁아지면 단의 너비가 커지고 화면이 좁아지면 단의 너비도 좁아진다.
| <숫자> | 단의 개수를 지정합니다. |
| auto | 단의 너비 같은 다른 속성에 따라 단의 개수가 자동 계산된다. |
column-gap
: 단과 단 사이 여백 지정하기
| <크기> | 단과 단 사이의 여백을 숫자로 지정한다. |
| normal | 여백을 자동으로 지정한다. W3C에서 권장하는 여백은 1em이다. |
column-rule
: 구분선의 색상, 스타일, 너비 지정하기
- 선의 스타일, 색상, 너비를 지정할 수 있다.
* column-rule 속성 하나로 묶어 지정할 수 있다 *
column-rule-color : <색상>
column-rule-style : none l none l hidden l dotted l dashed l ㅣsolidㅣdoubleㅣgrooveㅣridgeㅣinsetㅣoutset
column-rule-width : <크기> l thin l medium l thick
column-rule : <너비> <스타일> <색상>
column-span
: 여러 단을 하나로 합치기
| 1 | 단을 하나만 합치는 것이므로 합치지 않는 것과 같다. 기본값이다. |
| all | 전체 단을 하나로 합친다. 일부만 합칠 수 없다. |
표 스타일
caption-side 속성
: 표 제목 위치 정하기
- caption 태그는 표 위에 표시되지만 caption-side 속성을 이용해서 아래로 옮길 수 있다.
| top | 캡션을 표의 위에 표시하며 기본 값이다. |
| bottom | 캡션을 표 아랫부분에 표시한다. |
border 속성
: 표 테두리 스타일 결정하기
- <table> 태그에서 border 속성을 이용해 <table border="1"> 표시했을 경우, 표의 바깥 테두리뿐만 아니라 셀의 테두리까지 모두 표시되지만 CSS를 이용하면 표의 바깥 테두리와 셀의 테두리를 따로 지정해야한다.
예시)
<style>
.table1{
border: 1px solid black;
}
.table1 td{
border: 1px dotted black;
}
</style>
border-collapse 속성
: 테두리 통합, 분리하기
: 표의 바깥 테두리와 셀의 각 테두리가 떨어져 있는 것을 그대로 둘 것인지, 두 테두리를 하나로 합칠 것인지 결정할 수 있다.
| collapse seperate |
테두리를 하나로 합쳐 표시한다. 테두리를 따로 표기하며 기본 값이다. |
border-spacing 속성
: 인접한 셀 테두리 사이 거리 지정하기
- 이 속성은 border-collapse: collapse;을 사용했을 때, 인접한 셀테두리 사이의 거리를 지정한다.
값이 1개) 수평거리와 수직거리를 한꺼번에 지정
값이 2개) 첫번째값은 수평거리, 두번째값은 수직거리
empty-cells 속성
: 빈 셀의 표시 여부 지정하기
- 이 속성은 border-collapse: collapse;을 사용했을 때, 내용이 없는 빈 셀들의 표시여부를 지정한다.
| show hide |
빈 셀 주위의 테두리를 그려 빈 셀을 표시한다. 기본값이다. 빈 셀에 테두리를 그리지 않고 비워둔다. |
width, height 속성
: 표 너비와 높이 지정하기
- 너비나 높이를 지정하지 않는다면 셀 안의 내용이 표시될 만큼만 표시된다.
table-layout 속성
: 콘텐츠 맞게 셀 너비 지정하기
| fixed auto |
셀 너비를 고정한다. 즉 셀의 내용에 따라 너비가 달라지지 않는다. 셀 내용에 따라 셀의 너비가 달라진다. 기본값이다. |
- fixed 속성을 사용했을 경우 셀의 너비가 고정되기 때문에 셀 너비보다 긴 내용은 셀 밖으로 밀려나간다.
그렇기 때문에 word-break:break all; 속성을 사용해서 셀 너비보다 긴내용도 셀 안에 표시하게 하고, height:auto; 속성을 이용해서 너비는 고정하고 셀의 줄바꿈 따라서 높이 값을 자동으로 조정한다.
예시)
.table1{
border-collapse:collapse;
width:300;
table-layout:fixed;
word-break:break-all;
height: auto;
}
text-align 속성
: 셀 안에서 수평 정렬하기
vertical-align 속성
: 셀 안에서 수직 정렬하기
1 ) inline, inline-block 시에 사용가능
2 ) table 셀 안에서 사용가능
| baseline top middle bottom |
셀의 기준선에 내용의 기준선을 맞춘다. 패딩의 위쪽 가장자리에 내용의 윗부분을 맞춘다. 패딩 박스의 중앙에 내용을 맞춘다. 패딩 아래쪽 가장자리에 내용의 아랫부분을 맞춘다. |