STS 122::CSS 기초

3. 박스 모델


본 강좌에서는 스타일 속성을 적용하려면 먼저 스타일 값으로 입력할 수 있는 CSS 단위부터 알아야 합니다. 스타일 값으로 입력할 수 있는 단위를 절대 단위와 상대 단위로 나누어 살펴봅니다. 박스 모델은 웹 페이지의 레이아웃을 구성할 때 매우 중요한 개념입니다. 박스 모델의 개념을 이해하고 width, height, border, padding, margin으로 나뉜 각 속성의 사용법과 차이점을 알아봅니다.

이 강의를 통해 자바언어의 특징을 이해하고 자바언어를 왜 배워야 하는지 알 수 있게 됩니다.


01: CSS 단위

CSS에는 길이 표현을 위한 여러 단위가 있습니다. 많은 CSS 속성은 width, margin, padding과 같은 길이 값을 사용합니다. 길이는 10px, 2em과 같은 길이 단위가 뒤에 오는 숫자입니다. 길이 단위에는 절대 단위와 상대 단위의 두 가지 유형이 있습니다.

1) 절대 단위

Unit Description
cm centimeters
mm millimeters
in inches (1in = 96px = 2.54cm)
px * pixels (1px = 1/96th of 1in)
pt points (1pt = 1/72 of 1in)
pc picas (1pc = 12pt)

2) 상대 단위

Unit Description
em Relative to the font-size of the element (2em means 2times the size of the current font)
ex Relative to the x-height of the current font (rarely used)
ch Relative to width of the “0” (zero)
rem Relative to font-size of the root element
vw Relative to 1% of the width of the viewport*
vh Relative to 1% of the height of the viewport*
vmin Relative to 1% of viewport’s* smaller dimension
vmax Relative to 1% of viewport’s* larger dimension
%  

동영상 강좌

참고 자료

퀴즈

1) 절대크기와 상대크기 단위 각각 2가지씩 쓰시오.

해답보기

  • 절대크기: cm, mm, in, px, pt
  • 상대크기: em, ex, ch, rem, %

2) 절대단위와 상대단위의 차이점이 무엇입니까?

해답보기

절대 단위는 크기가 고정되어 있으나, 상대단위는 부모요소에 따라 크기가 변경된다.



02: 박스 모델

대부분의 HTML 태그는 박스 모델로 표현됩니다. 단락을 생성하는 <p>, <div> 태그, 이미지를 삽입하는 <img>태그 모두 박스 모델의 형태로 문서에 포함됩니다. 이들이 박스 모델인 이유는 문서에 삽입되는 영역이 하나의 박스처럼 보이기 때문입니다. 박스 모델은 테두리(border)와 내용(content) 그리고 안쪽 여백(padding)과 바깥쪽 여백(margin)의 네 가지 요소로 구성됩니다. 각 영역은 상, 하, 좌, 우 네 가지 영역으로 구분됩니다.

css_3-2

동영상 강좌

참고 자료

퀴즈

1) Margin과 Padding 의 영역이 어느 곳인지 쓰시오.

해답보기

Margin은 border 바깥쪽을 둘러싼 영역이고, Padding은 content를 둘러싼 영역입니다.

2) 다음 그림에서 오른쪽과 같이 배치하려면 어떤 속성의 값을 변경해야 합니까?

css_3-2-1

해답보기

  • Margin

03: 실습 예제

기본 실습은 통합실습페이지에서 한꺼번에 다루고 있습니다. 아래의 링크를 클릭하면 새창(탭)이 열리고 해당 예제로 이동하게 됩니다.


04: 참고 자료