[CSS-웹표준 교과서]4. 박스 모델

 @@ 박스 모델

- CSS에서는 각각의 요소에 생성된 사각형 영역을 '박스'라고 표현한다. 박스는 네 영역으로 구성된다.

• 요소에 포함된 '내용'(content)
• 내용과 보더 사이의 여백인 '패딩'(padding)
• 테두리선을 표시하는 '보더'(border)
• 보더와 다른 요소 사이의 여백인 '마진'(margin)

- 박스의 폭과 높이는 다음과 같이 계산 된다.

• 박스의 폭 = 좌우의 마진 + 좌우의 테두리 + 좌우의 패딩 + 내부영역의 폭
• 박스의 높이 = 상하의 마진 + 상하의 테두리 + 상하의 패딩 + 내부 영역의 높이

# 박스 모델과 배경

- 요소에 배경을 지정하는 경우 패딩과 보더 영역까지 적용되지만 마진 영역에는 적용되지 않는다.

- 이같이 마진 영역에서 배경은 항상 투명하게 되어 부모 요소에 설정된 배경을 보여준다.

1. 마진 관련 속성

속성	margin-top, margin-right, margin-bottom, margin-left
값	<길이>|퍼센테이지|auto|inherit
기본값	0
적용대상	모든 요소(표 내부요소 제외)
상속	상속하지 않는다
퍼센테이지	포함 블록의 폭을 참조한다.
미디어	Visual
미대응 브라우저	없음
일부 미대응 브라우저	Win IE 4/5/5.5, Netscape 4, Mac IE 4

- 길이 : 마진의 폭 또는 높이의 고정값이다. 마이너스 값도 지정 가능하다.
- 퍼센테이지 : 마진의 폭 또는 높이를 포함 블록의 폭에 대한 퍼센테이지로 설정한다. 마이너스 값도 지정 가능하다.
- auto : 상황에 따라 마진이 자동적으로 설정된다. 인라인 요소의 상하좌우, 블록레벨 요소의 상하의 마진은 '0'으로 설정된다.

 p {  
   margin-top : 15px;  
   margin-left : 10px;  
   margin-bottom : 15px;  
   margin-right : 10px;  
 }  

속성	margin
값	<길이>|퍼센테이지|auto|inherit
기본값	0
적용대상	모든 요소(표 내부요소 제외)
상속	상속하지 않는다
퍼센테이지	포함 블록의 폭을 참조한다.
미디어	Visual
미대응 브라우저	없음
일부 미대응 브라우저	Win IE 4/5/5.5, Netscape 4, Mac IE 4

- 공백문자로 구분하여 복수 지정

• 값이 한 개 -> '상하좌우'
• 값이 두 개 -> '상하'와 '좌우'
• 값이 세 개 -> '상'과 '좌우'와 '하'
• 값이 네 개 -> '상'과 '우'와 '하'와 '좌'

 p { margin : 15px 10px }  
 p { margin : 15px 10px 15px }  
 p { margin : 15px 10px 15px 10px}  

#요소 사이의 겹침

- CSS에서 요소 사이의 좌우 마진은 겹치지 않고 각각의 마진이 확보된다.  하지만 요소 사이의 상하마진은 겹쳐져 해석되어 어느쪽이든 큰 쪽의 값이 마진으로 설정되는 것이 기본이다.

 li {   
   margin-top : 10px;  
   margin-bottom : 5px;  
 }  

• 양쪽 모두 정수이면 큰 쪽의 값을 마진으로 설정
• 한쪽이 정수, 다른 한쪽이 마이너스이면 정수에서 마이너스 값을 뺀 값을 마진으로 설정
• 양쪽 모두 마이너스이면 작은 쪽의 값을 마진으로 설정

- float 속성으로 요소를 정렬하든지, position 속성으로 절대 배치한 경우에는 상하마진도 상쇄되지 않는다.

# 마진과 블록 레벨 요소의 중앙 정렬

- 블록 레벨 요소의 좌우마진 값에 'auto'를 지정하면 그 요소 전체를 중앙정렬할 수 있다. 좌우 마진에 자동으로 같은 값이 설정되기 때문에 결과적으로 요소가 중앙정렬된다.

 div#container {  
  width : 760px ;  
  margin-right : auto;  
  margin-left : auto;  
 }  

 div#container {  
  width : 760px ;  
  margin : 0 auto;  
 }  

2.  패딩(패딩관련 속성)

- 패딩은 그 요소의 내용과 보더 사이의 여백이다.

속성	padding-top, padding-right, padding-bottom, padding,left
값	<길이>|퍼센테이지|auto|inherit
기본값	0
적용대상	모든 요소(테이블 관련 요소 중 셀 요소 이외 제외)
상속	상속하지 않는다
퍼센테이지	포함 블록의 폭을 참조한다.
미디어	Visual
미대응 브라우저	없음
일부 미대응 브라우저	없음

- 길이 : 패딩의 폭 또는 높이의 고정값이다. 마이너스 값은 지정 불가이다.
- 퍼센테이지 : 패딩의 폭 또는 높이를 포함블록의 폭에 대한 퍼센테이지로 지정한다. 마이너스 값은 지정 불가이다.

 p {  
   padding-top : 3px;  
   padding-left : 6px;  
   padding-bottom: 3px;  
   padding-right : 6px;  
 }  

속성	padding
값	<길이>|퍼센테이지|auto|inherit
기본값	0
적용대상	모든 요소(테이블 관련 요소 중 셀 요소 이외 제외)
상속	상속하지 않는다
퍼센테이지	포함 블록의 폭을 참조한다.
미디어	Visual
미대응 브라우저	없음
일부 미대응 브라우저	없음

• 값이 한 개 -> '상하좌우'
• 값이 두 개 -> '상하'와 '좌우'
• 값이 세 개 -> '상'과 '좌우'와 '하'
• 값이 네 개 -> '상'과 '우'와 '하' 와 '좌'

 p { padding : 3px, 6px}  

 p { padding : 3px, 6px, 3px}  

 p { padding : 3px, 6px, 3px, 6px}  

3. 보더 (보더관련 속성)

- 보더는 그 요소의 테두리선이다. 보더는 '두께', '스타일' '색'의 세가지로 구성된다.

# 보더의 두께

속성	border-top-width,border-right-width ,border-bottom-width,border-left-width
값	thin|medium|thick|<길이>|inherit
기본값	medium
적용대상	모든 요소
상속	상속하지 않는다
퍼센테이지	지정불가
미디어	Visual
미대응 브라우저	없음
일부 미대응 브라우저	Netscape4

- <길이> : 보더 두께의 고정값. 마이너스 값은 지정 불가이다.

 blockquote {  
   border-top-width : medium;  
   border-left-width : 2px;  
   border-bottom-width : medium;  
   border-right-width : 2px;  
 }  

속성	border-width
값	thin|medium|thick|<길이>|inherit
기본값	각 속성 참조
적용대상	모든 요소
상속	상속하지 않는다
퍼센테이지	지정불가
미디어	Visual
미대응 브라우저	없음
일부 미대응 브라우저	Netscape4

값이 한 개 -> '상하좌우'

값이 두 개 -> '상하'와 '좌우'

값이 세 개 -> '상'과 '좌우'와 '하'

값이 네 개 -> '상'과 '우'와 '하' 와 '좌'

 blockquote { border-width : medium 2px;}  

 blockquote { border-width : medium 2px medium;}  

 blockquote { border-width : medium 2px medium 2px;}  

# 보더의 스타일

속성	border-top-style,border-right-style, border-bottom-style,border-left-style
값	none|hidden|dotted|dashed|solid|double |groove|ridge|inset|outset|inherit
기본값	none
적용대상	모든 요소
상속	상속하지 않는다
퍼센테이지	지정불가
미디어	Visual
미대응 브라우저	Netscape4
일부 미대응 브라우저	Win IE4/5, Mac IE 4

- None : 없음. 보더의 두께도 자동적으로 0이 된다.
- hidden : 없음.  다만 table 요소에 대해서는 boder-collapse 속성에 적용하는 값에 따라 해석이 달라진다.
- dotted : 점선
- dashed: 파선
- solid : 단선
- double : 복선

 blockquote {   
  border-top-style : dotted ;  
  border-left-style : solid;  
  border-bottom-style : dotted;  
  border-right-style : solid;  
 }  

속성	border-style
값	none|hidden|dotted|dashed|solid|double |groove|ridge|inset|outset|inherit
기본값	none
적용대상	모든 요소
상속	상속하지 않는다
퍼센테이지	지정불가
미디어	Visual
미대응 브라우저	Netscape4
일부 미대응 브라우저	Win IE4/5, Mac IE 4

값이 한 개 -> '상하좌우'

값이 두 개 -> '상하'와 '좌우'

값이 세 개 -> '상'과 '좌우'와 '하'

값이 네 개 -> '상'과 '우'와 '하' 와 '좌'

 blockquote { border-style : dotted solid;}  

 blockquote { border-style : dotted solid dotted;}  

 blockquote { border-style : dotted solid dotted solid;}  

# 보더의 색

속성	border-top-color,border-right-color, border-bottom-color,border-left-color
값	<색>|transparent| inherit
기본값	색상 속성의 값
적용대상	모든 요소
상속	상속하지 않는다
퍼센테이지	지정불가
미디어	Visual
미대응 브라우저	Netscape4
일부 미대응 브라우저	없음

- <색> : 보더의 색을 'RGB값' 또는 '키워드'로 지정
- transparent : 보더가 투명하게 된다.

 blockquote {   
  border-top-color : green ;  
  border-left-color : lime;  
  border-bottom-color : green;  
  border-right-color : lime;  
 }  

속성	border-color
값	<색>|transparent| inherit
기본값	색상 속성의 값
적용대상	모든 요소
상속	상속하지 않는다
퍼센테이지	지정불가
미디어	Visual
미대응 브라우저	없음
일부 미대응 브라우저	Netscape4

값이 한 개 -> '상하좌우'

값이 두 개 -> '상하'와 '좌우'

값이 세 개 -> '상'과 '좌우'와 '하'

값이 네 개 -> '상'과 '우'와 '하' 와 '좌'

  blockquote { border-color : green, lime;}   

  blockquote { border-color : green, lime green;}   

  blockquote { border-color : green, lime green lime;}   

# 보더의 일괄 지정

속성	border-top,border-right, border-bottom,border-left
값	[<보더의 두께>||<보더의 스타일>||<보더의 색>|| inherit]
기본값	각 속성 참조
적용대상	모든 요소
상속	상속하지 않는다
퍼센테이지	지정불가
미디어	Visual
미대응 브라우저	없음
일부 미대응 브라우저	Netscape4

 blockquote {   
  border-top : medium dotted green;
  border-right : 2px solid lime;
  border-bottom: medium dotted green;
  border-left : 2px solid lime;
 }  

- 보더 관련 속성은 값을 상속하지 않으므로 값을 생략한 때에는 기본값을 지정한 것으로 인식한다.

 h1 { border-bottom : thick solid; }  

속성	border
값	[<보더의 두께>||<보더의 스타일>||<보더의 색>|| inherit]
기본값	각 속성 참조
적용대상	모든 요소
상속	상속하지 않는다
퍼센테이지	지정불가
미디어	Visual
미대응 브라우저	없음
일부 미대응 브라우저	Netscape4

- 각 값은 공백문자로 구분하여 복수지정이 가능하고 순서를 따지지 않으며 생략 가능하다.

blockquote { border : medium dotted green; } 

# 보더의 중첩

- 다음과 같이 사방에 모든 보더를 지정한 뒤 좌우의 보더를 개별적으로 설정 가능하다.

 blockquote {   
   border : medium dotted green ;  
   border-right : 2px solid lime;  
   border-left : 2px solid lime;  
 }  

- 오른쪽 보더와 왼쪽 보더의 스타일이 덮어쓰여진다.

 blockquote {  
  border-right : 2px solid lime;  
  border-left : 2px solid lime;  
  border : medium dotted green;  
 }