CSS Box Model

« Previous Next Chapter »

CSS Box Model

모든 HTML 요소는 상자로 간주 될 수 있다. CSS 에서 디자인 및 레이아웃에 대해 이야기 할 때 용어 "box model”이 사용된다.

CSS box model 은 본질적으로 HTML 요소를 감싸는 박스이며,  margin, border, padding, 과  실제 content 로 구성된다.

박스 모델은 요소 주위에 테두리와 다른 요소에 대하여 상대적으로 공간 요소를 배치 할 수 있게 해줍니다.

아래의 이미지는 box model 을 설명한다:


CSS box-model
  • Content - 텍스트와 이미지가 표시되는 상자의 내용(content)
  • Padding - content 주변의 영역을 비운다.  padding 은 투명(transparent)하다.
  • Border - padding 과 content 를 둘러싼 경계(border).
  • Margin - 경계 (border) 바깥 영역을 비운다. margin 은 투명(transparent)하다.

요소의 폭(Width) 과 높이(Height)

Note   Important: CSS로 요소의 폭과 높이 속성을 설정하면, 단지 콘 텐츠 영역의 폭과 높이를 설정한 것이다.  요소의 전체 크기를 계산하려면,  padding, border 와 margin 을 추가해야 합니다.
한 <div> 요소의 전체 폭이 350px을 갖도록 스타일 해보자.

Example

div {
    width: 320px;
    padding: 10px;
    border: 5px solid gray;
    margin: 0;
}
Try it yourself »

Let's do the math:
320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px

요소의 전체 폭은 다음과 같이 계산되어야 한다:

Total element width = width + left padding + right padding + left border + right border + left margin + right margin

요소의 총 높이는 다음과 같이 계산되어야 한다:

Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

Test Yourself with Exercises!

Exercise 1 »  Exercise 2 »  Exercise 3 »  Exercise 4 »

« Previous Next Chapter »