[CSS3] CSS Box Model - Introduction (1)

브라우저는 HTML 요소들을 화면에 렌더링 할 때 디폴트 포지션 값에 위치시킨다. 이러한 기능은 때로는 우리가 원하지 않거나 예상치 못하는 결과를 낳기도 하는데, 이번 포스팅에서는 CSS가 어떻게 HTML요소를 화면에 위치시키고 보여주는지를 이해하는데 중요한 개념인 박스 모델(Box model)에 대해서 알아보도록 하자

 

저번 포스팅에서 한 HTML 요소의 background-color 속성의 값을 변화시켜 주면 해당 요소를 감싸는 사각형 형태로 배경색이 지정되었다. 또, text-align 속성으로 텍스트를 정렬하면 정렬이 상대적인 위치에서 이루어졌다. 이것들이 바로 CSS의 박스 모델이 적용되었다는 증거이다. 웹 페이지 상에 모든 HTML 요소들은 박스로 표현되고, 크기, 위치, 속성(색, 배경, 테두리 등)들이 결정지어진다. 예를 들면 당신이 한 요소의 background-color를 변경하면, 그것에 해당하는 박스 전체의 배경색이 바뀌게 되는 것이다

 

이번 포스팅에서는 다음과 같이 요소들이 가지는 박스의 양상에 대해서 알아보도록 하자

 

1. 박스의 차원(dimensions of element's box)
2. 박스의 테두리(borders of element's box)
3. 박스의 패딩(paddings of element's box)
4. 박스의 마진(margins of element's box)

 

 

 

The Box Model

 

박스 모델은 HTML 요소가 웹 페이지 상에서 공간을 취하는걸 정의하는 속성들로 이루어진다. 박스 모델은 콘텐츠 영역의 사이즈(가로와 세로)와 각 요소의 패딩(padding), 마진(margin), 테두리(border)에 대한 정보를 포함한다. 이 속성들의 내용은 다음과 같다

 

• 가로(width)와 세로(height) - 콘텐츠 영역의 가로와 세로 길이를 결정한다
• 패딩(padding) - 콘텐츠 영역과 테두리 사이의 공간의 양을 결정한다
• 테두리(border) - 콘텐츠 영역을 둘러싸는 테두리의 굵기와 스타일을 결정한다
• 마진(margin) - 테두리와 외부 요소들 사이의 공간의 양을 결정한다

 

아래 그림은 박스 모델을 나타낸 것이다

 

<그림 1> CSS Box Model(출처: codecademy.com)

 

 

 

Width and Height

 

요소의 콘텐츠 영역은 width 와 height 두 가지 차원을 가진다. HTML 요소에서 두 차원은 디폴트로 원시 요소만을 포함하도록 설정된다. CSS에서 width와 height 속성은 이러한 디폴트 차원을 수정하기 위해 사용된다. 예를 들어, 다음 코드는 title 태그의 width를 240px, height를 80px로 설정한다

title {
  width: 240px;
  height: 80px;
}

여기서 px란 Pixel의 약자로, 요소의 박스 크기를 절대적인 크기로 설정해준다. 위 예제처럼 사이즈가 px로 설정된다면, 그 요소는 모든 디바이스에서(모든 화면 크기에서) 동일한 사이즈로 보인다. 즉, 데스크톱 화면 크기만큼 큰 것들은 모바일에서는 오버플로우(overflow)된다

 

 

 

Borders

 

border 속성은 액자의 테두리와 같이 요소를 둘러싸는 테두리이다. border는 다음과 같은 세 가지 속성으로 이루어진다

 

1. width - 테두리의 굵기를 나타낸다. 테두리의 굵기는 픽셀로 주어지거나 얇은(thin), 중간(medium), 굵은(thick)과 같은 키워드로 주어진다
2. style - 테두리의 디자인을 나타낸다. 웹 브라우저는 10가지 스타일을 렌더링 할 수 있다. 없음(none), 점선(dotted), 실선(solid) 등이 존재한다
3. color - 테두리의 색을 나타낸다. 웹 브라우저는 140개의 빌트인된 색을 포함하는 몇 가지 포맷으로 색을 렌더링 한다

 

다음 코드는 모든 p 요소의 테두리를 3px 굵기, 실선, coral 색으로 설정한다

p {
  border: 3px solid coral;
}

테두리는 디폴트로 medium none color로 설정된다. color는 현재 요소의 색이다. 만약 이 속성들의 값이 주어지지 않으면, 각 속성은 디폴트 값으로 설정된다

 

 

 

Border Radius

 

박스 모델이라 해서 요소의 테두리가 항상 사각형일 필요는 없다. CSS는 테두리의 모서리를 변경할 수 있는 border-radius 속성을 지원한다

div.container {
  border: 3px solid rgb(22, 77, 100);
  border-radius: 5px;
}

위 코드는 테두리의 네 모서리를 5px 만큼, 즉, 반지름이 5px 인 원이 갖는 동일한 곡률만큼 테두리의 모서리를 원만하게 설정한다. 다음과 같이 테두리에 완전한 곡률을 부여하여 원처럼 보이게 할 수 있다

div.container {
  height: 60px;
  width: 60px;
  border: 3px solid rbb(22, 77, 100);
  border-raduis: 100%;
}

위 코드는 클래스가 container 인 div 요소의 테두리를 원과 같이 둥글게 설정한다

 

 

 

Padding I

 

요소 박스의 콘텐츠와 테두리 사이의 간격이 패딩이라고 앞서 제시하였다. 패딩은 액자의 그림과 테두리 사이의 공간과 유사하다. CSS에서는 이 공간을 설정하는 padding 속성을 지원한다

p.content-header {
  border: 3px solid coral;
  padding: 10px;
}

위 코드는 클래스가 content-header 인 p 요소들의 콘텐츠 영역(텍스트)과 테두리 사이의 사방면의 공간을 10px로 설정한다. padding 요소는 주로 배경을 확장하거나 콘텐츠가 덜 압축되어 보이게 하려고 주어진다. 만약 요소의 각 사이드의 padding을 구체적으로 정의하고 싶다면, 다음과 같은 속성을 사용할 수 있다

 

1. padding-top
2. padding-right
3. padding-bottom
4. padding-left

각 속성은 박스의 오직 한 방향의 padding을 설정한다

p.content-header {
  border: 3px solid fuschia;
  padding-bottom: 10px;
}

위 코드는 p 태그의 아래 부분에 10px만큼의 공간을 설정한다

 

 

 

Padding II

 

padding을 설정해주는 또 다른 방법은 각 방향 순서대로 속성 값을 정의해주는 것이다

p.content-header {
  border: 3px solid grey;
  padding: 6px 11px 4px 9px;
}

위의 코드는 위 방향에서부터 시계방향으로 위쪽 6px, 오른쪽 11px, 아래쪽 4px, 왼쪽 9px 만큼의 패딩을 설정한다. 이런 방법을 활용할 때는 반드시 모든 방향의 패딩 값을 설정해주어야 한다. 그러나, 만약 위쪽과 아래쪽의 패딩의 크기가 같고 왼쪽과 오른쪽의 패딩도 그러하다면, 다음과 같은 shortcut을 사용할 수 있다

p.content-header {
  padding: 5px 10px;
}

위 코드에서는 padding의 첫 번째 값으로 5px이 주어졌으므로 위와 아래 방향의 패딩이 5px로 설정되고, 두 번째 값으로 10px이 주어졌으므로 왼쪽과 오른쪽 방향의 패딩이 10px로 설정된다

 

 

 

지금까지 CSS의 박스 모델이 무엇인지, 어떠한 속성들을 보유하고 이를 어떻게 활용하는지 간단하게 살펴보았다. 다음 포스팅에서는 요소의 테두리와 외부 요소 사이의 공간을 정의하는 margin과 최소 사이즈, 디폴트 값 등에 대해서 살펴보고 generalize 하도록 하자