박스 모델

박스 모델은 좁은 범위로 보면 HTML로 구조화된 콘텐츠를 다른 콘텐츠와 구분하고 조화롭게 배치하기 위한 개념이며, 큰 범위로 보면 모든 HTML 요소가 갖는 블럭 개념입니다.

 

블럭 레벨 요소 뿐만 아니라, 인라인 레벨 요소 또한 박스 모델을 갖습니다. 다만, 지정할 수 있는 속성이 제한되어 있습니다.

 

박스 모델의 구성 요소

넓이 : 컨텐츠의 가로 크기

높이 : 컨텐츠의 세로 크기

패딩 : 컨텐츠와 테두리 사이의 간격, 테두리를 경계로 안쪽 여백이라고도 함. 배경이 표시됨

테두리 : 패딩과 마진의 경계

마진 : 인접한 박스와 간격, 테두리를 경계로 바깥 여백이라고도 함.

 

박스 모델의 크기

가로 크기 : "왼쪽 마진 + 왼쪽 테두리 + 왼쪽 패딩 + 컨텐츠 넓이 + 오른쪽 패딩 + 오른쪽 테두리 + 오른쪽 마진"의 크기를 모두 더한 값이다.

세로 크기 : "위쪽 마진 + 위쪽 테두리 + 위쪽 패딩 + 컨텐츠 높이 + 아래쪽 패딩 + 아래쪽 테두리 + 아래쪽 마진"의 크기를 모두 더한 값이다.

 

박스모델의 속성

  • margin : border를 기준으로 박스의 여백을 지정, 시각적인 요소는 없음
  • border : 박스의 테두리
  • padding : 테두리와 content간의 간격
  • content : 엘리먼트 안에 포함되는 컨텐츠

 

content(컨텐츠)

  • 엘리먼트안에 포함되는 컨텐츠로 예를들어 <div>test</div>라고 태그를 기술했을 때 div앨리먼트의 content는 test임
  • content는 폭(width)과 높이(height)를 지정할 수 있다.

border(보더), 테두리

  • 엘리먼트의 테두리
  • 테두리는 margin과 padding의 경계가 된다.
  • 테두리의 굵기와 색상과 스타일을 지정할 수 있다.

padding(패딩)

  • 테두리와 컨텐츠 간의 여백

margin(마진)

  • 엘리먼트와 엘리먼트 간의 여백
  • 위 아래에 인접한 엘리먼트 간에는 margin의 값이 더 큰 쪽의 margin이 적용됨(좌우는 아님)

 

- M I N -


'학습정리 > by Min' 카테고리의 다른 글

안드로이드 nfc 사이트  (0) 2013.07.18
AOP(Aspect-oriented programming)  (0) 2013.07.12
nodejs  (0) 2013.07.11
css & selector & 상속  (0) 2013.06.26
폰트와 색으로 장식하기  (0) 2013.06.25
by 알 수 없는 사용자 2013. 6. 25. 20:31
| 1 |