본문으로 건너뛰기

CSS3 박스 모델

1. CSS3 개요 및 박스 모델​

CSS3는 웹 페이지의 스타일과 레이아웃을 정의하는 최신 스타일 시트 언어입니다. W3C에서 개발 중이며, 대부분의 새로운 기능은 이미 여러 브라우저에 구현되어 있습니다.

  • 주요 모듈: 선택자(selector), 박스 모델(box model), 배경 및 경계선(background and border), 텍스트 효과(text effect), 2D/3D 변환, 애니메이션, 다중 컬럼 레이아웃, 사용자 인터페이스 등

박스 모델(Box Model) 개념​

HTML의 모든 요소는 브라우저 화면에 출력될 때 **박스(Box)**의 개념을 가집니다. 박스 모델은 HTML 요소를 감싸는 가상적인 박스로, 웹 브라우저는 각 요소를 이 박스로 간주하고 화면에 배치합니다. CSS는 각 박스의 배치, 색상, 경계 등 특징을 지정합니다.

박스 모델 구성 요소​

  • 콘텐츠(content): 박스의 내용물(텍스트, 이미지 등)
  • 패딩(padding): 콘텐츠 주위의 영역(투명, 요소의 배경색 영향 받음)
  • 경계(border): 패딩과 내용물을 감싸는 경계(두께, 색상 지정 가능)
  • 마진(margin): 경계 바깥의 투명 영역

박스 크기 계산: 전체 크기 = 콘텐츠 크기 + 패딩 + 경계선 두께 + 마진

2. 경계선 (Border) 스타일링​

  • border-style: 경계선 스타일 지정 (none, dotted, dashed, solid, double, groove, ridge, inset, outset 등, groove/ridge/inset/outset은 3D 효과)
  • border-width: 경계선 폭(px, thin, medium, thick)
  • border-color: 경계선 색상(green, rgb(0,255,0), #00ff00 등)
  • border(축약): 한 줄에 border-width, border-style, border-color 순서로 작성 (예: border: 5px solid green;)
  • border-radius: 둥근 경계선
  • box-shadow: 경계선에 그림자 추가(가로 오프셋, 세로 오프셋, 번짐, 색상)

예시:

div {
  border: 2px solid #333;
  border-radius: 8px;
  box-shadow: 2px 2px 8px #aaa;
}

3. 마진(Margin)과 패딩(Padding)​

요소의 크기 및 변경​

  • width, height: 모든 요소의 크기 지정
  • resize: 사용자가 요소의 높이/너비를 변경할 수 있도록 함 (both, horizontal, vertical, none)

마진(Margin)​

박스 경계와 외부 박스 경계 간의 간격

  • 속성값: auto(브라우저 계산), length(px, pt, cm 등), %(요소 폭의 %), inherit(부모 상속)
  • 양수/음수 모두 지정 가능
  • 설정 방법:
    • 각 변 별도 지정: margin-top, margin-right 등
    • 한 줄에 네 변 지정: margin: 10px 20px 40px 80px; (top, right, bottom, left)
    • margin: 10px;는 네 변 모두 10px

패딩(Padding)​

콘텐츠와 경계 사이의 간격

  • 속성값: length(px, pt, cm 등), %(요소 폭의 %)
  • 설정 방법: margin과 동일

요소 수평 정렬​

  • 인라인 요소(텍스트, <em>, <span>, <img> 등): text-align으로 컨테이너 내 정렬
  • 블록 요소(<p>, <div> 등): margin: auto로 컨테이너 내 정렬 (HTML5에서는 <p align="center"> 등 align 속성 삭제)

4. 배경 (Background) 스타일링​

  • background(축약): 한 줄에 모든 배경 속성 지정 (예: background: #fff url('back.gif') no-repeat right top;)
  • background-color: 배경색 지정
  • background-image: 배경 이미지 지정
  • background-repeat: 배경 이미지 반복 여부(repeat-x, no-repeat 등)
  • background-attachment: 배경 이미지 부착 방법(scroll, fixed, local)
  • background-position: 배경 이미지 시작 위치(px, %, left top, center center 등)
  • background-size: 배경 이미지 크기(px, %, cover, contain 등, CSS3에서 추가)

링크 스타일​

사용자가 클릭하면 웹 페이지로 이동하는 링크의 스타일을 4가지 상태에 따라 지정할 수 있습니다.

  • a:link: 방문되지 않은 링크
  • a:visited: 방문된 링크
  • a:hover: 마우스가 위에 있을 때 (반드시 a:link, a:visited 다음에 위치)
  • a:active: 마우스로 클릭될 때 (반드시 a:hover 다음에 위치)

리스트 스타일​

  • list-style(축약): 리스트 관련 속성 한 줄로 설정
  • list-style-image: 리스트 항목 마커를 이미지로 지정
  • list-style-position: 리스트 마커 위치(inside, outside)
  • list-style-type: 리스트 마커 타입(circle, disc, square, upper-roman, lower-alpha 등)

6. 테이블 (Table) 스타일링​

  • border: 테이블 경계선 설정
  • border-collapse: 이웃 셀 경계선 합침 여부(collapse: 단일선, separate: 분리)
  • width, height: 테이블/셀의 가로, 세로 길이
  • background-color: 테이블 배경색/텍스트 색상
  • text-align: 테이블 내 텍스트 가로 정렬(left, right, center)
  • vertical-align: 테이블 내 텍스트 세로 정렬(top, middle, bottom)
  • caption-side: 테이블 캡션 위치(top, bottom)
  • empty-cells: 공백 셀 출력 여부(show, hide)
  • border-spacing: 셀 사이 거리

이 자료는 CSS3의 핵심 요소인 박스 모델의 이해를 돕고, 웹 페이지의 시각적 요소를 효과적으로 제어하기 위한 경계선, 마진, 패딩, 배경, 링크, 리스트, 테이블 스타일링 기법들을 상세히 설명합니다. 이러한 개념과 속성들을 활용하여 웹 개발자는 유연하고 반응적인 웹 디자인을 구현할 수 있습니다.