box model의 이해

css의 box model이란

css에서 모든 요소(=엘리먼트, element)들은 박스들로 간주됩니다. 그래서 css에서 디자인과 레이아웃에 대해 이야기할 때에 주로 "박스모델(box model)"이란 용어를 자주 사용하죠.

이 박스모델은 모든 각각의 html 요소들을 감싸는 하나의 박스를 지칭합니다. 이 박스는 여백(margin), 테두리(border), 패딩(padding)과 실제 내용(content)로 구성이 되고요.

box model의 각 요소

• content - 텍스트 및 이미지가 나타나는 내용 영역입니다.
• padding - content 주위의 영역을 투명하게 분리합니다. 패딩을 조절해서 내용이 너무 답답해 보이지 않도록 할때도 사용하죠.
• border - 패딩과 content 주위를 둘러싸는 테두리입니다. 선을 표시하거나 하죠. 제 블로그의 스킨에 점 선들도 이 border를 이용했습니다.
• margin - border 외부의 영역을 투명하게 분리합니다. 다른 요소들과 분리하기 위해 사용합니다.

이렇듯 박스 모델을 사용하면 요소 주위에 위에 언급한 것들 즉 테두리를 추가하거나 공백을 정의 할 수 있습니다.

h2 {

    padding: 20px;

    border: 10px;

    margin: 10px;

    width: 200px;

}

element의 width, height 계산

모든 브라우저에서 요소의 너비와 높이를 올바르게 설정하려면 박스 모델의 작동 방식을 알아야합니다. 왜냐하면 CSS로 width나 height의 속성을 설정하면 오직 content 영역의 너비와 높이만 설정됩니다. 요소의 전체 크기를 계산하려면 content 폭과 높이에 패딩, 테두리 및 여백도 추가해야합니다. 각각의 왼쪽, 오른쪽 너비를 더해주어야 합니다.

가령 400px의 폭을 가진 element를 디자인 할 경우 다음과 같이 할 수 있습니다. 여기까지 css의 박스모델에 대해 알아보았습니다.

h2 {

    padding: 20px;

    border: 10px;

    margin: 10px;

    width: 320px;

}