HTML5 - [7]기본 레이아웃 [박스 모델 , 레이아웃 , 배경 및 테두리]

HTML5 - [7]기본 레이아웃 [박스 모델 , 레이아웃 , 배경 및 테두리]

(1) 박스 모델

박스 모델

속성	설명
display	HTML 요소의 표현 방식(박스 종류) 지정 inline | block | inline-block | list-item | none 등
margin	박스의 외부 여백(박스의 테두리 선 밖의 여백) 지정 <length> | <%> | auto
padding	내용 영역과 테두리 사이의 여백 지정 <length> | <%>
width, height	박스의 폭과 높이 지정 <length> | <%> | auto
min-width, min-height, max-width, max-height	특정 요소에 대한 콘텐츠의 최소 또는 최대 폭과 높이를 지정 <length> | <%>
float	부모 요소 영역을 기준으로 왼쪽 또는 오른쪽에 배치하도록 지정 none | left | right
clear	float 속성에 의해 영향을 받은 요소의 흐름을 해제하도록 지정하여 바로 아래쪽에 배치시킴 none | left | right | both
overflow	요소의 내용이 해당 요소의 영역을 벗어나는 것을 지정 visible | hidden | scroll | auto 등
overflow-style	요소의 영역을 벗어난 영역의 스크롤 방법을 지정 auto | scrollbar | panner | move | marquee
visibility	요소에 의해 만들어진 박스를 화면에 표시할 지를 지정 visible | hidden | collapse
rotation, rotation-point	지정된 점(rotation-point)을 중심으로 반 시계 방향으로 주어진 각도(rotation) 만큼 회전

(2) 레이아웃 위치 지정

레이아웃 위치 지정

속성	설명
position	요소 박스의 배치 방식을 지정 static | relative | absolute | fixed 등
top, left, bottom, right	박스의 포함 블록의 각 모서리를 기준으로 해당 요소가 떨어져 있는 거리를 지정 auto | <length> | <%>
z-index	요소가 겹쳐지는 순서를 지정 정수값

(3) 배경 관련 속성

배경 관련 속성

속성	설명
background-color	배경 색상 지정 transparent | <color>
background-image	배경 이미지 지정 url(이미지경로)
background-repeat	배경 이미지의 반복 여부 지정 no-repeat | repeat-x | repeat-y | repeat | space | round
background-position	배경 이미지 위치 지정 <length> | <%> | left/center/right/top/bottom
background-attachment	배경 이미지의 고정 여부를 지정 scroll | fixed | local
background	background-* 속성의 일괄 지정
background-clip	배경 속성이 적용되는 영역 지정 border-box | padding-box | content-box
background-origin	배경 이미지가 시작되는 기준 위치를 지정 border-box | padding-box | content-box
background-size	배경 이미지의 크기 지정 auto | <length> | <%> | cover | contain

(4) 테두리 관련 속성

테두리 관련 속성

속성		설명
테두리 지정	border-color	박스 테두리의 색상 지정
	border-style	박스 테두리의 스타일 지정 none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
	border-width	박스 테두리의 굵기 지정 <length> | thin | medium | thick
	border	테두리 관련 속성의 일괄 지정
text-emphasis-style		박스의 각 모서리를 둥글게 지정 <length> | <%>
테두리 이미지	border-image	테두리 이미지 관련 속성의 일괄 지정
	border-image-source	테두리에 표시될 이미지 지정 url(이미지경로)
	border-image-slice	테두리 영역에 보여질 이미지의 크기 지정 <픽셀수> | <%>
	border-image-width	이미지 표시 영역의 길이 지정 <픽셀수> | <%> | <number> | auto
	border-image-outset	이미지가 테두리 영역을 벗어나 박스 외부에 표시되는 확장된 영역 지정 <픽셀수> | <number>
	border-image-repeat	테두리 이미지가 반복되는 스타일 지정 stretch | repeat | round | space
box-shadow		박스의 그림자 스타일 지정 inset? && h-pos v-pos [흐림반경] [퍼진거리] && <color>?