box-sizing
: 박스 너비 기준 정하기
box-sizing: content-box | border-box
박스 너비를 콘텐츠 영역 너비 값으로 할지, 박스 모델 전체 너비 값으로 사용할지 지정해주는 속성이다.
float
: 왼쪽이나 오른쪽으로 배치하기
float: left | right | none
float
속성을 사용하면 그 주변을 다른 요소가 감싼다.
clear
:float
속성 해제하기
clear: none | left | right | both
float
속성을 이용해서 웹 페이지 요소를 왼쪽이나 오른쪽에 배치하면 그 다음에 넣는 다른 요소들에도 똑같은 속성이 전달된다. 그래서 float
속성이 더 이상 유용하지 않다고 알려주는 속성이다.
Lorem Ipsum(로렘 입숨) : 임의로 본문 내용 채워 넣기 한글 로렘 입숨
position
: 배치 방법 지정하기
position: static | relative | absolute | fixed
속성 값 | 설명 |
---|---|
static | 요소를 문서의 흐름에 맞추어 배치 - 나열한 순서대로 float: left or right 이용해서 |
relative | 이전 요소에 자연스럽게 연결해 배치하되 위치를 지정할 수 있다. - 나열한 순서대로 배치 |
absolute | 문서의 흐름과 상관없이 원하는 위치를 지정해 배치 - 가장 가까운 부모 요소나 조상요소중 position이 relative인 요소를 기준으로! |
fixed | 문서의 흐름과 상관없이 지정한 위치에 고정해 배치(화면에서 요소가 잘릴 수 있다.) - 브라우저 창을 기준으로! |
visibility
: 요소를 보이게 하거나 보이지 않게 하기
visibility: visible | hidden | collapse
속성 값 | 설명 |
---|---|
visible | 화면에 요소를 표시 |
hidden | 화면에서 요소를 감춤. 하지만 크기는 그대로 유지하기 때문에 배치에 영향을 미침 |
collapse | 표의 행, 열, 행 그룹, 열 그룹등에서 지정하면 서로 겹치도록 조절. 그 외의 영역에서 사용하면 hidden 처럼 처리 |
z-index
: 요소 쌓는 순서 정하기
z-index: <숫자>
숫자 값이 작을수록 아래에 쌓인다. z-index
를 명시하지 않으면 맨 먼저 삽입하는요소가 z-index:1
값을 가진다.
column-width
: 단의 너비 고정하고 다단 구성하기
column-width: <크기> | auto
column-count
: 단의 개수 고정하고 다단 구성하기
column-count: <숫자> | auto
column-gap
: 단과 단 사이 여백 지정
column-gap: <숫자> | normal
column-rule
: 구분선의 색상, 스타일, 너비 지정
column-rule-color: <색상>
column-rule-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
column-rule-width: <크기> | thin | medium | thick
column-rule: <너비> | <스타일> | <색상>
break-after
: 다단 위치 지정하기
break-after: column(단나눔) | avoid-column(단 나누지 않음)
break-before: column | avoid-column
break-inside: column | avoid-column
column-span
: 여러 단을 하나로 합치기
column-span: 1 | all
caption-side
: 표 제목 위치 정하기
caption
태그를 이용해 표 제목을 표시할 때, caption-side
속성을 이용해 위치를 바꿀 수 있다.
caption-side: top | bottom
border
: 표 테두리 스타일 결정하기
<table border="1">
처럼 사용하면 표에 테두리를 그릴 수 있다. 이때 border
속성을 이용해 색상, 형태, 너비를 지정할 수 있다.
border-collapse
: 테두리 통합, 분리하기
border-collapse: collapse | seperate
border-spacing
: 인접한 셀 테두리 사이 거리 지정하기
border-spacing: <크기>
여기서 크기는 px이나 em등 크기와 단위를 직접 지정한다.
empty-cells
: 빈 셀의 표시 여부 지정하기
empty-cells: show | hide
-
width
,height
: 표 너비와 높이 지정하기 -
table-layout
: 콘텐츠에 맞게 셀 너비 지정하기
영문 내용은 width
의 속성이 무시되고 한줄로 쓰여진다. 그렇기 때문에 table-layout
을 이용해서 셀 안의 내용 양에 따라 너비를 변하게할지, 고정시킬지 결정한다.
table-layout: fixed | auto
하지만 너비를 고정시킬경우 너비보다 긴 내용은 셀 밖으로 밀려나가게된다. 셀 너비안에 내용을 표시하려면 word-break: break-all
속성을 함께 써줘야한다. 또한, 예상치 못한 줄 바꿈이 생기면 높이 값 예측이 쉽지않기 때문에 height: auto;
도 지정해준다.
.table1 {
border-collapse:collapse;
width:300px;
table-layout:fixed;
word-break:break-all;
height:auto;
}
text-align
: 셀 안에 텍스트 수평 정렬하기
text-align: left | right | center
vertical-aligin
: 셀 안에서 수직 정렬하기
verticla-align: top | bottom | middle