프론트엔드 CSS 프로그래밍 기초

3. 박스 모델

이번 강좌에서는 css 에서 화면 구성요소를 다루기 위한 기본적인 방법인 박스 모델에 대해 살펴 봅니다. 또한 박스 모델들의 화면 배치를 위한 position 속성과 float, display 속성들을 활용하는 레이아웃 기법을 배웁니다. 박스 모델은 구성요소를 배치해 웹 페이지 레이아웃을 구성할 때 매우 중요한 개념입니다.

이 강의를 통해 박스모델을 정의하고 웹페이지 레이아웃을 설계할 수 있으며 원하는 위치에 구성요소를 자유롭게 배치할 수 있게 됩니다.

Youtube 에서 동영상 강좌 보기 - Part1 Youtube 에서 동영상 강좌 보기 - Part2

01: CSS 단위

단위는 크기를 결정하는 중요한 요소 입니다. 일반적인 cm, px 등과 같은 단위 이외에도 CSS에는 여러 단위가 있습니다. 정확한 레이아웃 구성을 위해서는 어떤 단위가 있는지 명확하게 알고 있어야 하며 특히 여러 화면 크기에 대응하는 반응형 웹 디자인을 위해서는 단위에 대한 이해가 필수적입니다.

1) 절대 단위

절대적인 크기가 정해져 있는 단위 입니다. 절대 단위는 화면 크기나 해상도에 따라 지나치게 크거나 작게 보일 수 있습니다. 예를들어 1024x768 해상도에서 500px 의 크기는 화면의 50% 이상에 해당하지만 동일한 콘텐츠를 요즘 많이 사용하고 있는 Full HD 해상도인 1920x1080 에서 보게 될 경우 전체 화면의 26% 밖에 되지않아 글씨 크기가 작게 보이거나 많은 공간이 남게 되어 주의가 필요 합니다.

단 위 설 명
cm centimeter
mm millimeter
in inch (1in = 2.54cm)
px 픽셀, pixel
pt 포인트, point (1pt = 1/72 inch)
pc 파이카, pica (1pc = 12pt)

pc 는 파이카(pica)라고 하며 예전에 활자의 크기를 나타내던 단위로 인쇄및 출판시스템에 많이 사용되던 단위 입니다. 1인치에 가로 열 자, 세로 여섯 자가 찍히던 크기로, 현재의 12포인트 활자 크기와 같습니다.

2) 상대 단위

부모요소의 크기를 기준으로 상대적인 크기를 지정하는 단위 입니다. 적절한 설계를 통해 상대 단위를 잘 활용하면 반응형 웹 등 다양한 화면크기에 대응할 수 있는 웹페이지 레이아웃 구현이 가능합니다. 가장 많이 사용되는 단위는 %, em, rem 입니다.

단 위 설 명
em 부모 요소의 글꼴에 비례. (2em은 현재 글꼴 크기의 2배를 의미.)
ex 현재 글꼴의 x 높이에 비례. (거의 사용되지 않음)
rem 루트 요소(<html>)의 글꼴 크기에 비례.
vw 뷰포트 너비의 1%에 비례.
vh 뷰포트 높이의 1%에 비례.
vmin 뷰포트의 너비와 높이 중 더 작은 치수 1%에 비례.
vmax 뷰포트의 너비와 높이 중 더 큰 치수 1%에 비례.
% 퍼센트, 100% 를 기준으로 하는 상대 크기

앞에 v가 붙은 단위들은 뷰포트(viewport)와 관련된 것으로 뷰포트는 웹페이지가 사용자에게 보여지는 영역을 말하는 것으로 PC의 경우 브라우저 크기를 줄이게 되면 스크롤바를 통해 한화면에 보이지 않는 콘텐츠를 볼 수 있습니다. 이때도 보여지는 영역이 뷰포트가 됩니다. 반면 모바일 기기들의 경우 브라우저의 크기를 조정할 수 없으므로 콘텐츠가 브라우저 크기를 벗어나는 경우 한화면에 담기 위해 크기를 줄이게 됩니다. 따라서 글자들이 너무 작게 되어 보기 어렵게 됩니다. html 의 meta 태그중에 viewport 설정은 모바일 화면의 콘텐츠를 뷰포트 크기로 맞춰주는 설정 입니다.

관련해서는 반응형 웹 디자인에서 좀 더 자세히 살펴보게 됩니다.

02: 박스 모델

html 문서의 구성요소들은 기본적으로 박스형태로 정의 됩니다. 쉽게 생각하면 웹페이지 레이아웃은 이러한 박스들을 위/아래, 좌/우로 적절하게 배치하는 것을 말합니다.

1) 박스 개요

박스 모델은 테두리(border)와 내용(content) 그리고 안쪽 여백(padding)과 바깥쪽 여백(margin)의 네 가지 요소로 구성됩니다. 각 요소는 상, 하, 좌, 우 네 영역을 개별적으로 설정할 수 있습니다.

CSS박스모델
[그림 : CSS박스모델]
div {
  width: 320px;
  padding: 10px;
  border: 5px solid gray;
  margin: 0;
}

2) 박스 크기

박스요소에 크기를 지정하면 기본적으로 콘텐츠 영역에 적용 됩니다. 그러나 실제 박스의 크기는 border, margin, padding을 모두 더해야 하기 때문에 각각의 박스를 적절하게 배치 하려면 이들 크기가 함께 고려 되어야 합니다.

3) border 속성

border 영역을 지정하기 위한 여러 속성이 있습니다. width 와 같이 크기를 지정하는 것 이외에 테두리 선을 지정하기 위한 border-style과 border-color 속성등이 있습니다.

border-width

테두리 두께를 지정하는 속성으로 상하좌우 네 영역을 개별적으로 설정하거나 상하, 좌우를 묶어서 설정할 수 있습니다.

border-style

테두리의 모양을 지정하는 속성으로 실선, 점선, 이중선 등을 사용할 수 있습니다. 4곳의 테두리를 각각 다르게 지정할수도 있습니다. border-top-style 처럼 사용합니다.

border-color

테두리의 색상을 지정하는 속성으로 일반적인 컬러 속성을 이용해 색상을 지정 합니다.

border-radius

테두리의 모서리를 둥글게 만들기 위한 속성 입니다. 반지름의 크기를 px 이나 % 등의 단위를 이용해 지정할 수 있습니다.

div {
  border-width: 2px 10px 4px 20px;  /* top, right, bottom, left */
  border-width: 2px 10px;  /* top bottom, right left */
}

단축형(Shorthand)

css 의 많은 속성들이 여러 속성들을 묶어 단축형으로 사용할 수 있도록 지원하고 있습니다. border 의 경우에도 width, style, color 순으로 나열하면 됩니다. 또한 4곳의 테두리를 다르게 설정해 다양한 용도로 활용가능한 박스를 만들 수 있습니다.

div {
  border: 5px solid red;
  border-left: 5px solid red;
}

4) margin 속성

margin 은 박스와 인접 요소간의 여백을 말합니다. 박스간의 적적할 배치를 위해 사용할 수 있으며 경우에 따라서는 박스를 가운데 정렬하기 위해 사용할 수도 있습니다.

다음은 margin 속성의 다양한 사용예 입니다.

p {margin: 10px 5px 15px 20px;} /* top-10px, right-5px, bottom-15px, right-20px */ 
p {margin: 10px 5px 15px;} /* top-10px, right & left-5px, bottom-15px */ 
p {margin: 10px 5px;} /* top & bottom-10px, right & left-5px */ 
p {margin: 10px;} /* All 10px */

03: 레이아웃

레이아웃은 화면의 배치를 말하는 것으로 css 는 웹 화면의 디자인적인 요소와 함께 구성요소들을 적절한 위치에 배치하기 위한 방법을 제공하고 있습니다. 기본적으로는 박스들의 배치 방법을 결정하는 position 속성이 있으며 나란히 배치되는 박스 콘텐츠들을 지정하기 위해 float 이나 display 속성등이 사용 됩니다.

1) 그리드 시스템(Grid System)

그리드 시스템은 화면을 테이블과 유사하게 가로, 세로의 격자로 나누는 것을 말하며 널리 사용하는 css 라이브러리인 bootstrap의 경우 한줄을 최대 12개의 컬럼으로 분할할 수 있도록 되어 있습니다. 다음은 일반적인 웹페이지에서 볼 수 있는 1~3 컬럼 구조를 보여주고 있습니다.

css_3-2-1
[그림 : CSS Grid layout]

2) 컨테이너(Container)

컨테이너는 다른 물건을 담을 수 있는 그릇의 의미를 가지고 있습니다. css 에서는 다른 구성요소를 포함 할 수 있는 박스영역으로 이해할 수 있습니다.

예를 들어 앞의 1컬럼 예시에서 중앙의 메인 콘텐츠 영역이 상품정보를 보여주기 위해 동일한 크기의 박스 10개로 구성되어야 한다고 할 때 콘텐츠 영역을 10개 박스로 배치하는것 보다는 하나의 박스를 만들고 그안에 10개를 넣어 구성하는 것이 좋습니다. 이처럼 다른 박스를 담을 수 있는 박스를 컨테이너 라고 합니다.

실제 구현상에는 <div> 속에 다른 <div> 가 들어가는 형태로 이해할 수 있습니다.

<div class="container">
  <div class="header">
  </div>
    <div class="contents">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div>
  </div>
  <div class="footer">
  </div>
</div>

04: position

position 속성은 박스 구성요소들을 배치하기 위한 속성입니다. 어떤 position 속성을 사용 하느냐에 따라 위치가 달라질 수 있으므로 전체적인 내용을 잘 이해하고 익숙하게 사용할 수 있도록 해야 합니다.

CSS position
[그림 : CSS Position]

1) Static

2) Relative

3) Absolute

4) Fixed

5) z-index

05: float/display

1) float 속성

float 속성은 속성의 명칭과 같이 요소를 화면위에 떠있는 형식으로 배치 합니다. float 속성을 이용하며 좌측 혹은 우측부터 정렬되는 박스 콘텐츠를 배열할 수 있습니다.

float

clear

2) display 속성

display 속성은 요소를 보여주는 방식을 지정하는 속성 입니다. 콘텐츠를 보이지 않게 할수도 있고 float 을 대체해 콘텐츠를 나란히 배치하는데 사용되기도 합니다.

block과 inline

html 을 배우면서 block 태그와 inline 태그의 차이점에 대해 배웠습니다. block 태그는 width=100% 인 태그들로 요소를 나란히 배치할 수 없습니다. inline 은 콘텐츠의 크기만큼만 자리를 차지하기 때문에 다른 콘텐츠와 나란히 배치될 수 있습니다. 다만 width와 height 를 사용할 수 없어 주변 콘텐츠와 균형을 맞추기가 어려운 문제가 있습니다.

inline-block

display 속성을 사용하면 block 태그에 inline 속성을 가지도록 변경할수도 있고 그 반대도 가능합니다. 또한 inline 속성을 가지면서 즉, 다른 콘텐츠와 나란히 배치 되면서 block 요소의 width, height 등의 속성이 적용되도록 하는 inline-block 속성도 있습니다.

06: 박스요소 정렬

기본적으로 문서내 영역을 정렬하기 위해서는 박스 요소들로 배치가 되어야 합니다. 앞에서는 박스요소들을 차례로 혹은 임의로 원하는 위치에 배치하기 위한 방법들을 살펴 보았습니다. 여기서는 일반적으로 필요한 좌-우, 중앙 정렬 방법을 배우게 됩니다.

1) 블럭 요소 가운데 정렬

margin:auto는 블럭 속성 요소를 가운데 정렬하기 위한 일반적인 방법입니다. <div>등으로 블럭 박스를 만들었을 경우 margin:auto 속성을 사용하면 가운데 정렬이 됩니다.

.box-center {
  margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 10px;
}

2) 블럭 요소 좌우 정렬

블럭 요소의 position 속성을 absolute 로 두고 right, left 속성을 이용해 원하는 위치에 정렬 시킵니다.

.box-right {
  position: absolute;
  right: 0px;
  width: 300px;
  border: 3px solid green;
  padding: 10px;
}

3) 블럭 요소 수직 정렬

블럭 요소를 수직 정렬하는 방법은 여러개가 있으며 가장 기본적인 방법은 padding 속성으로 박스의 안쪽 위/아래 여백을 동일하게 지정하는 방법 입니다.

.box-vcenter {
  padding: 50px 0;  /* 위/아래 50px, 좌/우 0 */
  border: 3px solid green;
}

4) 이미지 가운데 정렬

이미지를 가운데 정렬하는 방법은 크게 두가지 입니다.

// 방법1
div {
  text-align:center;
}

// 방법2
img {
  display: block;
  margin: auto;
}

...
<div>
   <img src="a.jpg">
</div>

참고 자료