css포지셔닝과 주요속성들
포지셔닝 = css를 웹 문서 요소를 적절히 배치시키는 것
box-sizing = 박스 너비 기준 정하기
-css를 이용해 여러 박스 모델을 화면상에 배치하려면 박스 모델 너비 값을 정확히 계산해야 함
-width 값을 계산하기 어렵다면 box-sizing-border-box;로 지정해 박스모델 너비를 알기 쉽게 바꾸어 놓는 것도 좋은 방법
<--기본형-->
box-sizing : content-box | border-box
content-box = width 속성 값을 콘텐츠 영역 너비 값으로 사용한다(기본 값)
border-box = width 속성 값을 콘텐츠 영역에 테두리까지 포함한 박스 모델 전체 너비 값으로 사용float = 왼쪽이나 오른쪽으로 배치하기
<--가본형-->
float : left | right | none
left = 해당 요소를 문서의 왼쪽으로 배치
right = 해당 요소를 문서의 오른쪽으로 배치
none = 좌우 어느 쪽으로도 배치하지 않는다clear = float 속성 해제하기
<--가본형-->
clear : left | right | bothposition = 배치 방법 지정하기
<--가본형-->
position : static | relative | absolute | fixed
static = 요소를 문서의 흐름에 맞추어 배치함(기본 값)
left 속성이나 top 속성을 지정할 수 없다(단지 float 속성을 사용)
relative = 이전 요소에 자연스럽게 연결해 배치하되 위치를 지정할 수 있다
상대적인 위치를 사용하기 때문에 다른 요소와 조화를 이룬다
left 속성이나 top 속성을 이용해 요소의 위치를 옮길 수도 있다
absolute = 원하는 위치를 지정해 배치한다
요소의 위치는 가장 가까운 부모 요소나 조상 요소 중 position:relative인 요소
left,top,right,bottom 속성을 사용해 네 모서리에서 얼마나 떨어져 있는지 지정
fixed = 지정한 위치에 고정해 배치함 화면에서 요소가 잘릴 수도 있다
부모요소가 아닌 브라우저 창 기준(브라우저 창 왼쪽 위 꼭지점(0,0) 기준)
브라우저 창 화면을 스크롤하더라도 계속 같은 위치에 고정visibiliy = 요소를 보이게 하거나 보이지 않게 하기
<--가본형-->
visibiliy : visibility | hidden | collapse
visbility = 화면에 요소를 그대로 표시(기본 값)
hidden = 화면에서 요소를 감춤 크기는 그대로 유지하기 때문에 배치에 영향을 미침
collapse = 표의 행,열,행 그룹,열 그룹 등에서 지정하면 서로 겹치도록 조절, 그 외에 영역ㅇ서 사용하면 hidden 처럼 처리함z-index = 요소 쌓는 순서 정하기
-z-index 값이 크면 값이 작은 요소보다 위에 쌓인다
-s-index 값을 명시하지 않으면 1부터 시작해서 1씩 커진다
<--가본형-->
z-index : <숫자>다단으로 편집하기
column-width = 단의 너비 고정하고 다단 구성하기
-단의 너비를 고정해 놓고 화면 분할
-화면이 커지면 단의 개수가 많아진다
<--가본형-->
column-width : <크기> | auto
<크기> = 단 너비를 직접 지정
auto = 단의 개수 같은 다른 속성에 따라 단의 너비가 자동 계산된다column-count = 단의 개수 고정하고 다단 구성하기
-단의 개수를 먼저 정해 놓고 화면 분할
-화면이 커질수록 단의 너비가 넓어진다
<--가본형-->
column-count : <숫자> | auto
<숫자> = 콘텐츠가 들어갈 단의개수를 지정, 0보다 큰 수를 사용
auto = 단의 너비 같은 다른 속성에 따라 단의 개수가 자동 계산된다column-gap = 단과 단 사이 여백 지정하기
<--가본형-->
column-gap : <크기> | nornal
<크기> = 단과 단 사이의 여백을 숫자로 지정
normal = 여백을 자동으로 지정column-rule = 구분선의 색상,스타일,너비 지정하기
<--가본형-->
column-rule-color : <색상>
column-rule-style : <속성>
column-rule-width : <크기>
column-rule : <너비> <스타일> <색상>
= 모든 속성마다 웹 접두사를 붙여 사용해야 하기 때문에 column-rule 속성 하나로 묶어 지정하는 것이 편리하다break-after = 다단 위치 지정하기
-특정 요소의 앞이나 뒤에 다단 위치 지정(주로 인쇄 목적)
<--기본형-->
break-after : column(단 나움) | avoid-column(단 나누지 않음)
break-before : column | avoid-column
break-after = 특정 요소 뒤
break-before = 특정 요소 앞column-span = 여러 단을 하나로 합치기
<--기본형-->
column-span : 1 | all
1 = 단을 하나만 합치는 것이므로 합치지 않는 것과 같다(기본 값)
all = 전체 단을 나하로 합침 단의 일부만 합칠 수는 없다표 스타일
caption-sode = 표 제목 위치 정하기
-캡션(설명글)은 기본으로 표 위쪽에 표시됨
-이 속성을 이용해 아래쪽에 표시가능
<--기본형-->
caption-sode : top | bottomborder = 표 테두리 스타일 결정하기
-표의 바깥 테두리와 셀 테두리 모두 지정해야 함
border-collapse = 태두리 통합,분리하기
-표 테두리와 셀 테두리를 합칠 것인지 설정
<--기본형-->
border-collapse : border-collapse : collapse | separate
collapse = 테두리를 하나로 합쳐 표시
separate = 테두리를 따로 표시(기본 값)border-spacing = 인접한 셀 테두리 사이 거리 지정하기
-border-collapse:separate를 사용해 셀들을 분리했을 경우,인접한 셀 테두리 사이의 거리를 지정
-값이 1개 = 수평 거리 & 수직 거리를 같게
-값이 2개 = 첫번째 값은 수평거리, 두번째 값은 수직거리
<--기본형-->
bordet-spacing : <크기>empty-cells = 빈 셀의 표시 여부 지정하기
-border-collapse:separate를 사용해 셀들을 분리했을 경우,내용이 없는 빈 셀들의 표시 여부를 지정
<--기본형-->
empty-cells : show | hide
<show> = 빈 셀 주위에 테두리를 그려 빈 셀을 표시한다(기본 값)
<hide> = 빈 셀에 테두리를 그리지 않고 비워 둠width, height = 표 너비와 높이 지정하기
-너비나 높이를 지정하지 않으면 셀 안의 내용이 표시될 만큼만 표시된다
-width 값을 지정할 경우 padding 속성을 이용해 여백을 넣어주면 보기 좋게 꾸밀 수 있다
table-iayout = 콘텐츠에 맞게 셀 너비 지정하기
-셀 안의 내용 양에 따라 셀 너비를 변하게 할지, 고정시킬지 결정
<--기본형-->
table-iayout : fixed | auto
<fixed> = 셀 너비를 고정 즉 셀 내용에 따라 셀의 너비가 달라지지 않는다
<auto> = 셀 내용에 따라 셀의 너비가 달라진다(기본 값)text-align = 셀 안에서 수평 졍렬하기
<--기본형-->
text=align : left | right | centervertical-align = 셀 안에서 수직 정렬하기
<--기본형-->
vertical-align : top | bottom | middle
<top> = 패딩의 위쪽 가장자리에 내용의 윗부분을 맞춘다
<bottom> = 패딩의 아래쪽 가장자리에 내용의 아래부분을 맞춘다
<middle> = 패딩 박스의 중앙에 내용을 맞춘다