CSS 포지셔닝2

1. position - 배치 방법 정하기

웹 문서 안의 요소들을 자유자재로 배치해 주는 속성으로 텍스트나 이미지를 나란히 배치할 수 있꼬 여러개의 요소를 

가로나 세로로 원하는 위치에 배치할 수도 있다.

position: static | relative | absolute | fixed

static - 요소를 문서의 흐름에 맞추어 배치한다. (기본값)

relative - 이전 요소에 자연스럽게 배치하되 위치를 지정 가능

absolute - 원하는 위치를 지정한다. 

fixed - 지정한 위치에 고정해 배치한다. 화면에서 요소가 짤릴 수도 있다. 

위치를 조절 할때는 top, bottom, right, left로 사용한다. top:0; left:0; 으로 지정 했을 경우 위에서 0만큼 떨어지고 왼쪽으로 0만큼 떨어진 값이기에

왼쪽 위 모서리에 배치가 된다. 그리고 float 속성과 같이 연계해서 사용이 되어야한다.

absolute는 문서의 흐름과 상관없이 left 등의 속성값으로 위치를 배치할 수 있다. 이때 기준이 되는 위치는 가장 가까운 부모 요소나 조상 요소중 

position의 relative요소다. 그래서 이걸 사용 하려면 그 요소를 감싸는 div를 만들고 포지션을 relative로 지정해 놓고 사용해야한다.

fixed 속성값도 absolute 처럼 문서의 흐름과 상관없이 위치를 좌표로 결정하지만 부모 요소가 아닌 브라우저 창이 기준이 된다. 브라우저 창의

왼쪽 위 꼭지점을 원점으로 두고 좌표가 계산되며 한 번 배치되면 fixed라는 이름처럼 브라우저 창을 스크롤하더라도 계속 고정되어 표시된다.

2. visibility - 요소를 보이게 하거나 보이지 않게 하기

visibility: visible | hidden | collapse

hidden - 화면에서 요소를 감춘다. 하지만 크기는 그대로 유지하기 때문에 배치에 영향을 줌

collapse - 표의 행,열, 행 그룹, 열 그룹 등에서 지정하면 서로 겹치도록 조절 그 외 영역에선 히든처럼 처리한다.

3. z-index - 요소 쌓는 순서 정하기

CSS에서 각 요소는 수평이나 수직으로 이동할 뿐만 아니라 한 요소 위에 다른 요소를 쌓을 수도 있다. z-index 값이 작을 수록 아래에 쌓이고

높을 수록 위로 쌓인다. 명시 하지않을 경우에는 웹 문서에 맨 처음 삽입하는 요소가 1이라는 값을 가지고 점차 커지는 값을 갖게 된다.

다단으로 편집하기

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

column-width: <크기> | auto

크기 - 단 너비를 직접 지정

auto - 단의 개수 같은 다른 속성에 따라 단의 너비가 자동 계산됩니다.

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

다단 화면을 만들 때 단의 개수를 고정해 놓을 수도 있습니다. 이렇게 하면 브라우저 창의 너비와 상관없이 단의 개수를 항상 일정하게

유지해야 하기 때문에 창의 너비가 커지면 단의 너비도 커집니다.

column-count: <숫자> | auto

6. column-gap - 단과 단 사이 여백 지정하기

column-gap: <크기> | normal

크기 - 단과 단 사이의 여백을 숫자로 지정한다.

노말 - 여백을 자동으로 지정 권장 여백은 1em이다.

7. column-rule - 구분선의 색상, 스타일, 너비 정하기

column-rule: <너비> | <스타일> | <색상>

스타일의 종류: non, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset

너비: 크기, thin, medium, thick

8. break-after - 다단 위치 정하기

웹 문서의 경우, 문서 전체에서 내비게이션이나 사이드바, 푸터 등의 영역은 제외하고 대부분 실제 콘텐츠 부분만 다단으로 구성합니다.

따라서 다단을 어디서부터 시작할지 지정하는 속성도 필요하다. 페이지나 단을 나눌 때 위치를 지정하는 속성으로는 break-before, -after, -inside가

있다. 각 속성에서 사용할 수 있는 값은 column(단 나눔)과 avoid-column(단 나누지않음)이다.

즉 특정 요소의 앞부분에서 단을 나누려면 break-before:column을 사용한다는 것이다.

9. column-span - 여러 단을 하나로 합치기

여러 개로 나뉜 단의 흐름을 따라가다가 중간에 단을 합쳐 내용을 표시해야 할 경우가 있다. 이런 경우, column-span으로 단을 합칠 수 있다.

column-span: 1 | all

1 - 단을 하나만 합치는 것이므로 합치지 않는 것과 같다.

all - 전체 단을 하나로 합쳐 표현, 단의 일부만 합칠 수 없다.

*단을 나눌 경우 신문처럼 쪼개져서 나오다가 column-span을 사용할 경우 다시 원래대로 화면에 표시 가능하다는 점이다.

표 스타일

10. caption-side - 표 제목 위치 정하기

top,bottom

11. border - 표 테두리 스타일 결정하기

기본적으로 table border="1"를 사용하면 표에 테두리를 그릴 수 있따. 여기에 CSS의 border 속성을 이용하면 테두리의 색상이나 너비, 형태

등을 지정 할 수 있다. 

12. border-collapse - 테두리 통합, 분리하기

표의 바깥 테두리와 셀의 각 테두리가 떨어져 있는 것을 그대로 둘 것인지, 두 테두리를 하나로 합칠 것인지 결정할 수 있습니다.

border-collapse: collapse | separate

collapse - 합치기

separate - 분리하기

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

border-spacing 속성 값은 1~2개 지정할 수 있는데 값이 하나라면 수평거리와 수직거리를 한꺼번에 지정한 것이고 값이 2개라면 첫 번째

값은 수평 거리 값이고 두번째 값은 수직 거리 값이다.

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

border-collapse:separate를 사용해 셀들을 분리 했을 경우, 이 속성을 사용해 내용이 없는 빈 셀들의 표시 여부를 지정한다.

empty-cells: show | hide

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

table-layout: fixed | auto

fixed - 셀의 내용에 영향을 받지 않고 고정된다. 내용이 줄바꿈을 사용

auto - 셀의 내용에 따라 길이나 너비가 달라진다. 기본값이다.

16. vertical-align, text-align - 셀 안에서 수직정렬, 글 정렬하기

vertical-align: baseline, top, bottom, middle, sub, super, text-top, text-bottom

text-align: left, right, center