CSS 박스 모델

1. 박스의 구성

​

css는 HTML태그를 콘텐츠, 패딩, 테두리, 여백으로 이어루진 하나의 박스로 본다.

​

​

2. 박스를 제어하는 css3 프로퍼티

​

1) 박스의 크기

: width, height, margin, padding

padding은 콘텐츠를 직접 둘러싸고 있는 내부 여백

margin은 박스의 맨바깥 영역으로 테두리 밖의 다른 태그들과 인접한 공간이다.

​

박스를 제어하는 css3 프로퍼티

	콘텐츠	패딩	테두리	여백
크기 관련 프로퍼티	width height	padding-top padding-right padding-bottom	border-top-width border-right-width border-bottom-width border-left-width	margin-top margin-right margin-bottom margin-left
크기 관련 단축 프로퍼티		padding	boder-width	margin
스타일 관련 프로퍼티			border-top-style border-right-style border-bottom-style border-left-style
색 관련 프로퍼티			border-style
색 관련 프로퍼티		패딩은 색이따로 없음. 태그의 배경색으로 채워진다.	border-top-color border-right-color border-bottom-color border-left-color	여백은 투명, 부모태그의 색이 비춰보인다.
전체 단축 프로퍼티			border

​

※border-radius

: 모서리 테두리를 만들 수 있다.

※border-image

:테두리에 이미지를 입힐 수 있다.

border-image : url("border.png") 30 round;

이렇게 작성하면 이미지픽셀에서 30픽셀 조각을 떼어내어 이미지를 입히고 round 로 엣지 이미지를 반복배치한다.

​

css 박스 관련은 간단하지만 실제 html문서에 적용하려고하면 고려해야 할점이 많아서 어렵다.

실제로 많이 써보기~!