CSS 5번째 - CSS 포지셔닝

포지셔닝 : 박스 모델을 배치하는 것

 

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

 .box-sizing : content-box (기본 값) | border-box

 .width 속성 값을 콘텐츠 영역 너비 값으로 사용할 지, 테두리 포함시켜 사용할 지 결정

 

float 속성 - 왼쪽이나 오른쪽으로 배치하기

 .float : left | right | none

 .이미지와 텍스트 나란히 표시하려고 할 때 사용 

 

clear 속성 - float 속성 해제

 .clear : none | left | right | both

 .float 속성을 이용하여 배치하면 다음의 다른 요소도 똑같은 속성이 전달됨, 이를 해제하는 것이 clear 속성 

 

로렘 입숨(Lorem Ipsum) - 의미없는 텍스트 문단 생성

 .http://hangul.thefron.me/

 

position 속성 - 배치 방법 지정

 .position : static | relative | absolute | fixed

 .static : 요소를 문서 흐름에 맞춰 배치

 .relative : 이전 요소에 자연스럽게 연결하여 배치 후 좌표로 지정 가능

 .absolute : 원하는 위치 지정, 부모요소가 relative 지정되어야 함

 .fixed : 지정한 위치에 고정, 화면 짤림 가능, 브라우저 창의 왼쪽 위 꼭지점을 원점으로 배치

 .static 외 나머지는 top, bottom, left, right 로 위치 지정

 

visibility 속성 - 요소를 보이게 하거나 보이지 않게 하기

 .visibility : visible | hidden | collapse

 .hidden : 요소를 감추고 크기는 유지하여 배치에 영향

 .collapse : 표의 행, 열, 그룹 지정하면 서로 겹치도록 조절, 그 외의 영역에서 사용 시 hidden 과 동일 

 

z-index 속성 - 요소 쌓는 순서 정하기

 .z-index : <숫자> 

 .숫자가 작을수록 아래에 쌓이고 클수록 위에 쌓임

 .명시하지 않을 경우 먼저 삽입한 요소가 1, 그후 값이 커짐

 

다단스타일

 

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

 .너비를 고정해 구성하면 화면에 따라 보이는 단의 개수 차이 발생

 .column-width : <크기> | auto

 .브라우저별 접두사 붙여 사용

 

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

 .cloumn-count : <숫자> | auto

 .창의 너비에 맞게 단의 너비가 변경되면서 개수 고정

 

column-gap 속성 - 단과 단 사이 여백 지정

 .column-gap : <크기> | normal 

 .normal : 1em 자동 지정

 

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

 .column-rule-color, column-rule-style, column-rule-width 속성을 한번에 지정 가능

 .column-rule-color : <색상>

 .column-rule-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

 .column-rule-width : <크기> | thin | medium | thick

 

break-after 속성 - 다단 위치 지정

 .break-after, break-before, break-inside : column | avoid-column

 

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

 .column-span : 1 | all(모두 합쳐 표현)

 

표 스타일

 

caption-side 속성 - 표 제목 위치 지정

 .caption-side : top(기본값) | bottom

 

border 속성 - 표 테두리 스타일 결정

 .<table border="1"> 처럼 쓰면 바깥 테두리와 셀의 테두리 모두 표시

 .CSS에서 border 속성 사용하는 경우 바깥과 셀 별도 지정 필요

 

border-collapse - 테두리 통합, 분리

 .border-collapse : collapse | separate

 

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

 .샐들을 분리했을 경우, 사이 거리 지정 

 .border-spacing : <크기> (값이 하나면 수평 수직 지정, 두개 면 수평, 수직)

 

empty-cells 속성 - 빈 셀의 표시 여부 지정

 .border-collapse : separate 에서 empty-cells:  show | hide

 

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

 

table-layout 속성- 콘텐츠에 맞게 셀 버니 지정

 .셀 안의 내용 양에 따라 셀 너비 변경시키거나 고정

 .table-layout : fixed | auto

 .fixed 설정 시 긴 내용은 셀 밖으로 나감, 안에 표시하려면 word-break:break-all, height : auto

 

text-align 속성 - 셀 안에서 수평 정렬

 .text-align : left | right | center

 

vertical-align 속성 - 수직 정렬

 .vertical-align : baseline | top | bottom | middle | sub | super | text-top | text-bottom | <길이 값>  | <백분율> 

 .inline 이나 inline-block 배치한 요소의 세로 정렬 방법으로 지정+