[수업-CSS] 04. 레이아웃 스타일

기본 스타일

종류	설명	기타
height	길이	상대 크기 설정 시 창 크기에 따라 크기가 변화하지만 고정 크기 설정 시에는 창 크기에 관계없이 크기가 고정적이다.
width	높이
block	한 줄 전체를 차지하는 요소로 박스 모델이라고도 한다.	div, p, hn, ul, ol, blockquote, form, hr, table, fieldset, address 등
inline	작성한 내용만큼만의 영역을 차지하는 요소	img, object, br, sub, sup, span, input, textarea, label, button 등
display	화면 배치 방법 변경 속성	none : 화면에 표현되지 않고 공간 차지 x block : block 요소로 변경 inline : inline 요소로 변경 inline-block : inline이면서 content에는 block 속성

 

테두리 스타일

종류	설명	기타
border-style	테두리 스타일 지정	none : 테두리 없음 hidden : 테두리 없음 dashed : 짧은 선으로 표시 (dotted보다 길은 점선) dotted : 점선으로 표시 double : 이중 선으로 표시 groove : 홈이 파인 것처럼 테두리 표시 inset : border-collapse설정에 따라 groove와 같거나(collapse) 테두리가 창에 박혀 있는 표시(separate) outset : border-collapse설정에 따라 ridge와 같거나(collapse) 전체 박스 테두리가 창에서 튀어 나온 것처럼 표시(separate) ridge : 테두리가 튀어나 온 것처럼 표시 solid : 테두리를 실선으로 표시
border-width	테두리 두께 정하는 속성	thin : 얇게 medium : 중간 thick : 두껍게 숫자 : 두께 정도 위치 : top , right, left, bottom
border-color	테두리 색상 표시
border	테두리 두께, 스타일, 색상을 한 번에 지정할 수 있는 속성	* 각 테두리 별 설정하려면 위치(top, right, bottom, left) 이용
border-radius	박스의 모서리를 둥글게 하는 속성	위치 : top-left, top-right, bottom-left, bottom-right
box-shadow	박스 영역에 그림자 효과를 주는 속성	* 설정 값은 숫자(단위)표시 수평 거리 : 오른쪽(+) , 왼쪽(-) 수직거리 : 아래(+), 위(-) 흐림 정도 : 값이 커지면 부드러운 느낌을 주며 음수 사용 불가 번짐 정도 : 양수로 하면 모든 방향으로 번져 커지고 음수로 하면 축소 inset : 안쪽 그림자로 그리는 옵션, 필요 시 사용

 

여백 스타일

padding	테두리와 콘텐츠 영역 사이의 거리
margin	box레벨이나 inline 요소들 간의 간격 조절

 

포지셔닝

- box 모델 , inline 모델을 페이지 상에서 배치하는 스타일 / 페이지 안 요소들을 원하는 위치에 배치 할 수 있다.

종류	설명	기타
position	페이지 요소를 자유롭게 배치	static : 문서의 흐름에 맞춰 요소 배치 relative : 이전 요소와 연결해 배치 absolute : 원하는 위치를 지정해 배치 fixed : 지정한 위치에 고정 배치
visivility	특정 속성을 보이거나 보이지 않게하기	visible : 요소가 화면에 보이는 상태 hidden : 화면에 안보이지만 공간은 차지하고 있는 상태 collapse : 표의 행,열 / 행 그룹 / 열그룹 등에서 겹치도록 지정
z-index	페이지의 요소들을 순서대로 위로 쌓는 속성	속성 값이 클수록 위에 있는 요소 * 맨 위에 위치하는 요소면 999 등 큰 값으로 설정
float	페이지 내 요소를 왼쪽/오른쪽 배치	right : 오른쪽 left : 왼쪽 none
clear	페이지에 float 설정이 되어있으면 이를 초기화	right : 오른쪽 배치 취소 left : 왼쪽 배치 취소 both : 둘 다 취소

 

다단 스타일

종류	설명	기타
column-width	단의 너비 고정하고 다단 구성	너비를 기준으로 다단 개수를 나눔
column-count	단의 개수를 지정하여 다단 나누기
column-gap	다단 사이 여백 설정
column-rule	다단 사이의 효과	column-rule-color : 색상 column-rule-style : 다단 사이 선 효과 column-rule-width : 너비 지정 column-rule : 한번에 설정
column-span	단을 합치는 속성	1 : 합치지 않은 것 all : 전체 합치기

 

표 스타일

종류	설명	기타
caption-side	테이블에 대한 위치 지정
width/height	너비/높이 지정	테이블에 지정 시 테이블 전체 크기 컬럼에 지정 시 컬럼의 너비/높이
border	표 테두리 스타일
border-collapse	표 테두리 스타일 한 개 / 두 개 표시	separate : 테두리 두 개(따로) 표시 collapse : 테두리 한 개 표시
border-spacing	테두리를 separate로 했을 경우 가까운 쪽의 테두리 사이 거리 지정
empty-cells	테두리를 separate로 했을 때 빈 셀에 대해 표시할 지 지정	show : 표시 hide : 표시 안함
table-layout	셀의 내용이 길어졌을 시 내용에 따라 셀의 크기를 변화시킬지 / 아닐지	fixed : 고정 auto : 내용의 크기에 따라 셀 크기 변화
text-align	<td>안의 텍스트 수평 정렬
vertical-align	<td>안의 텍스트를 수직 정렬