09 CSS 포지셔닝

09-1 CSS 포지셔닝과 주요 속성

box-sizing - 박스 너비 기준 정하기

박스 모델의 패딩이나 테두리를 따로 계산할지, 포함해서 계산할지 결정
속성
- content-box - (기본) width 속성 값을 콘텐츠 영역 너비 값으로 사용.
- bordor-box - width 속성 값을 콘텐츠 영역에 테두리까지 포함한 값을 사용.

즉 content-box 속성으로 설정하면 콘텐츠 박스 크기가 width 기준이 되며, bordor-box 속성으로 설정하면 콘텐츠+패딩+테두리를 포함하는 박스 크기가 width 기준이 된다.

float - 왼쪽/오른쪽에 배치하기

요소를 문서의 왼쪽 혹은 오른쪽에 배치한다.
콘텐츠를 표시한 후 남은 영역에 다른 요소가 옆에 올 수 있다.
속성
- left
- right
- none
다른 요소와의 간격을 유지하기 위해 margin 등으로 여백을 준다.

clear - float 속성 해제하기

float 속성을 이용하면 그 다음에 넣는 요소에도 똑같은 속성이 전달된다. 이 float 속성이 필요하지 않을 때 사용하는 것이 clear 속성이다.
속성
- none
- left
- right
- both

좌/우 배치가 둘 다 필요 없기 때문에 주로 clear: both; 를 자주 쓰는 듯하다.

position - 배치 방법 지정하기

텍스트나 이미지를 나란히 배치하거나, 여러 요소를 가로/세로로 원하는 대로 배치할 수 있다.
속성
- static - (기본) 요소를 문서의 흐름에 맞추어 배치
- relative - 이전 요소에 자연스럽게 연결해 배치하되 위치를 지정
- absolute - 원하는 위치를 지정해 배치
- fixed - 지정한 위치에 고정해 배치, 화면에서 잘릴 수 있음
relative, absolute, fixed에서는 좌표를 이용해 요소의 위치를 조절할 수 있다.
- top, bottom, left, right로 지정.

static - 문서의 흐름대로 배치하기

요소를 나열한 순서대로 배치. 위치를 임의로 지정할 수 없으며, float를 통한 좌우 배치만 가능.
relative - 문서 흐름 따라 위치 지정하기

요소를 나열한 순서대로 배치. 속성이나 좌표를 이용해 위치를 지정할 수 있다.
```
 .box {
     position: relative;
     left: -50px;
     top: +50px;
     width: 300px;
     float: left;
 }   
```

absolute - 원하는 위치에 배치하기

문서의 흐름과 상관 없이 원하는 위치에 배치한다. 기준이 되는 위치는 가장 가까운 부모 요소나 조상 요소 중 position 속성이 relative인 요소이다. 따라서 absolute를 사용하려면 <div>로 부모요소를 만들고, 포지션을 relative로 놓는다. 그리고 그 div 안에서 위치를 지정한다.

 #parent {
     position: absolute;
     width: 300px;
     height: 300px;
     bordor: 1px solid black;
 }
 .box {
     position: absolute;
     width: 50px;
     height: 50px;
     background: blue;
 }
 #box1 {
     top: 0;
     left: 0;
 }
 #box2 {
     bottom: 0;
     right: 0;
 }
 #box3 {
     top: 100px;
     left: 100px;
 }

 <div id="parent">
     <div class="box" id="box1"></div>
     <div class="box" id="box2"></div>
     <div class="box" id="box3"></div>        
 </div>

fixed - 브라우저 창 기준으로 배치하기

브라우저 창 왼쪽 위를 기준점으로 좌표가 계산된다. 브라우저 창을 스크롤 하더라도 계속 그 자리에 고정되어 표시된다.

visibility - 요소 보이기 / 보이지 않게하기

속성
- visible - (기본) 화면에 요소를 표시
- hidden - 화면에서 요소를 감추지만 자리는 그대로 차지
- collapse - 표의 행, 열, 행그룹, 열그룹이 서로 겹치도록 조절

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

숫자로 속성을 주며, 값이 작을수록 아래에 쌓인다.

09-2 다단

단을 나누는 방식에는 너비 고정 그리고 단 개수 고정 방법이 있다.

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

단의 너비를 px로 지정할 수 있다.
auto 속성을 주면 단의 개수 등 다른 속성에 따라 자동 계산된다.
단 너비 고정이므로, 화면의 너비가 달라지면 단의 개수도 달라진다.

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

단의 개수를 지정할 수 있다.
auto 속성을 주면 단의 너비 등 다른 속성에 따라 자동 계산된다.
화면의 너비가 달라지면 단의 너비가 달라진다.

column-gap - 단 사이 여백 지정

단과 단 사이의 여백 크기를 지정한다.
구분선을 넣는다면 구분선도 이 여백 안에 들어간다.
normal 속성 값을 가지면 자동으로 지정된다.
W3C에서는 1em 여백을 권장한다.

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

단 사이의 구분선을 꾸밀 수 있다.

.column {
    column-rule-color: <색상>;
    column-rule-style: none | hidden | dotted | dashed | solid | double |
                       groove | ridge | inset | outset;
    column-rule-width: <크기> | thin | medium | thick;
}

column-rule 속성만 사용하면 색상, 스타일, 너비를 한번에 지정할 수 있다.

.column {
    column-rule: 2px dotted #000;
}

break-after - 다단 위치 지정

특정 요소를 기준으로 단을 나눌지 않을지 지정

column - 단 나눔
avoid-column - 단 나누지 않음

.column {
    break-before: column | avoid-column;
    break-after: column | avoid-column;
    break-inside: column | avoid-column;
}

column-span - 여러 단 합치기

여러 개의 단을 중간에 합쳐 표시할 때 사용

1 - (기본) 단을 합치지 않는 것
all - 전체 단을 하나로 합쳐 표현.

09-3 표 스타일

caption-side - 표 제목 위치

표 제목을 표시하는 <caption> 대그의 위치를 설정한다. 표 위에 표시되는 것이 기본이지만, bottom 속성을 주면 표 아래에 위치하게 된다.

border - 표 테두리 스타일

표를 삽입할 때, <table> 태그에 border 속성을 주어 <table border="1"> 처럼 테두리를 그릴 수 있다. 이 경우 표의 바깥 테두리뿐만 아니라 셀의 테두리까지 모두 표시되는데, CSS를 이용해 각각 지정할 수 있다.

border-collapse - 테두리 통합/분리하기

<table> 태그와 <td> 태그에서 border 속성을 사용하면 두 줄로 표시되는데, border-collapse를 통해 테두리를 따로 표시할 것인지, 하나로 합쳐 표시할 것인지 지정한다.

separate - (기본) 테두리를 따로 표시
collapse - 테두리를 합쳐 하나로 표시

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

인접한 셀 테두리 사이의 거리를 지정한다. 이 때 값을 하나만 표시하면 수평 거리와 수직 거리를 한번에 지정한 것이고, 값이 두개면 수평/수직 거리를 나타낸다.

empty-cells - 빈 셀 표시여 여부 지정하기

show - (기본) 빈 셀 주위에 테두리를 그려 표시
hide - 빈 셀은 비워둠

width, height - 표 너비와 높이 지정

너비나 높이를 지정하지 않으면 셀 안의 내용이 표시될 만큼만 표시
width 값만 지정할 경우, padding을 통해 여백을 넣어 보기 좋게 꾸밀 수 있다.

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

width 속성을 이용해 너비를 지정하면 그 크기에 맞게 화면에 표시된다. 하지만 여백 없이 작성하면 내용이 모두 한 줄로 표시되고, 셀의 너비가 줄어들 수 있다. 이 때 table-layout 속성으로 셀 안의 내용에 따라 셀 너비를 변하게 할 지, 고정시킬지 지정한다.

auto - (기본) 셀의 내용에 따라 셀 너비가 달라진다.
fixed - 셀 너비를 고정. 셀 내용에 따라 셀의 너비가 달라지지 않는다.

주의할 점은, fixed 속성을 적용할 시 셀 너비보다 긴 내용은 셀 밖으로 밀려나갈 수 있기 때문에 word-break:break-all 속성을 추가해야 한다. 또 셀의 줄바꿈이 생기면 셀의 높이가 바뀔 수 있으므로 height 속성도 auto로 지정하는 것이 권장된다.

text-align - 셀 안에서 수평 정렬하기

셀 안에서 왼쪽, 오른쪽, 가운데 수평 정렬 방법을 지정한다.
left right center

vertical-align - 셀 안에서 수직 정렬하기

셀 안에서 수직 정렬 방법을 지정한다.
baseline - 부모 요소의 기준선에 맞춤
sub - 부모 요소의 아래 첨자 위치에 맞춤
super - 부모 요소의 위 첨자 위치에 맞춤
top - 부모 요소의 위에 맞춤
middle - 부모 요소의 기준선에서 소문자 x의 높이의 반 만큼 올려서 맞춤
bottom - 부모 요소의 아랫부분에 맞춤
text-top - 부모 요소 글꼴 윗부분에 맞춤
text-bottom - 부모 요소 글꼴 아랫부분에 맞춤
<길이값> - 기준선을 0px로 생각하고, 양수면 위로 음수면 아래로 옮김
<백분율값> - 기준선을 0%로 생각하고, 양수면 위로 음수면 아래로 옮김

References

Do it! HTML5+CSS3

[CSS3] CSS 포지셔닝 Position

Study Note