CSS 레이아웃

CSS 포지셔닝과 주요 속성들

box-sizing 속성 - 박스 너비 기준 정하기 content-box(너비 값, 기본 값) | border-box(테두리까지포함, 마진은 포함x)

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

clear 속성 - float 속성 해제하기 none | left | right | both

left는 left 해제, right는 right 해제, both는 둘다 해제

 

로렘 임숨(Lorem Ipsum) : 의미없이 내용을 채워주는 것

http://guny.kr/stuff/klorem/

한글 Lorem Ipsum (간세네)

position 속성 -배치 방법 지정하기 

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

 relative : 이전 요소에 자연스럽게 연결해 배치하되 위치를 지정할 수 있다.(left,top~~)

 absolute : 원하는 위치를 지정해 배치한다.(반드시 부모요소가 relative)

 fixed : 지정한 위치에 고정해 배치합니다. 화면에서 요소가 잘릴 수도 있다.(브라우저 창 기준)

 

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

visible(기본값) | hidden(감춤, 배치에는 영향) | collapse(표에서 겹치게, 그 외에는 hidden)

 

z-index 속성 - 요소 쌓는 순서 정하기 <숫자>

명시하지 않을 경우 처음이 1, 그다음 2, 3 ~~~

 

다단으로 편집하기

* 다단 관련 속성은 브라우저별 접두사를 붙여야 한다.(-webkit-, -moz-, -o-, -ms-)

 

column-width - 단의 너비 고정하고 다단 구성하기 <크기> | auto

column-count 속성 - 단의 개수 고정하고 다단 구성하기 <숫자> | auto

column-gap 속성 - 단과 단 사이 여백 지정하기 <크기> | normal(W3C에서는 1em 권장)

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

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

column-span 속성 - 여러 단을 하나로 합치기 1(합치지 않는 것 , 기본 값) | all(전체 단을 하나로 합쳐)

 

표 스타일

caption-side 속성 - 표 제목 위치 정하기 top | bottom

border 속성 - 표 테두리 스타일 결정하기(table에 border는 테두리만, td는 요소마다 => 둘다하면 테두리는 중복돼)

border-collapse 속성 -테두리 통합, 분리하기 collapse(테두리를 하나로 합쳐) | separate(테두리를 따로. 기본 값)

border-spacing 속성 - 인접한 셀 테두리 사이 거리 지정하기 <크기>(수평, 수직)(수평수직)

empty-cells 속성 - 빈 셀의 표시 여부 지정하기 show(기본 값) | hide

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

table-layout 속성 -콘텐츠에 맞게 셀너비 지정하기 fixed(셀 너비를 고정) | auto(달라져. 기본 값)

(((((word-break 왜 안나와))))))))))))

text-align 속성 - 셀 안에서 수평 정렬하기 left | right | center

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