본문 바로가기
개발/웹 개발

Day 8: CSS 박스 모델과 레이아웃 기초

$ecu_Log 2024. 8. 5.

1. 오늘의 학습 목표

학습 목표: 웹 페이지의 모든 요소가 어떻게 공간을 차지하고 배치되는지를 결정하는 CSS 박스 모델(Box Model)을 이해합니다. display와 position 속성을 사용하여 요소의 기본적인 레이아웃을 제어하는 방법을 배웁니다.

핵심 요약: 박스 모델은 모든 CSS 레이아웃의 근간이며, display와 position은 요소를 원하는 위치에 배치하기 위한 가장 기본적인 도구입니다.

2. 핵심 개념 파헤치기

2.1. CSS 박스 모델(Box Model)이란 무엇인가?

웹 브라우저에서 모든 HTML 요소는 사각형의 박스로 표현됩니다. CSS 박스 모델은 이 박스의 크기와 다른 요소와의 간격을 어떻게 계산할지를 정의하는 규칙입니다. 박스는 네 가지 영역으로 구성됩니다

  1. Content (콘텐츠): 텍스트나 이미지가 표시되는 실제 내용 영역입니다. width와 height 속성으로 크기를 조절합니다.
  2. Padding (패딩): 콘텐츠 영역과 테두리 사이의 내부 여백입니다
  3. Border (테두리): 패딩을 감싸는 선입니다. 두께, 스타일, 색상을 지정할 수 있습니다
  4. Margin (마진): 테두리 바깥의 외부 여백으로, 다른 요소와의 간격을 만듭니다

※ box-sizing 속성

  • content-box (기본값): width와 height가 콘텐츠 영역의 크기만을 의미합니다. 패딩이나 테두리가 추가되면 박스의 전체 크기는 더 커집니다
  • border-box: width와 height가 테두리까지 포함한 박스의 전체 크기를 의미합니다. 패딩이나 테두리를 추가해도 박스의 전체 크기는 변하지 않고, 내부의 콘텐츠 영역이 작아집니다. 대부분의 현대 CSS에서는 border-box를 기본으로 설정하여 레이아웃을 더 직관적으로 만듭니다

2.2. Display 속성: 요소의 성격 결정하기

display 속성은 요소가 화면에 어떻게 보여지고, 다른 요소와 어떻게 상호작용할지를 결정합니다

  • block: 항상 새로운 줄에서 시작하고, 사용 가능한 전체 너비를 차지합니다. width, height, margin, padding 속성을 모두 사용할 수 있습니다. (예: <div>, <h1>, <p>)
  • inline: 새로운 줄에서 시작하지 않고, 콘텐츠의 너비만큼만 공간을 차지합니다. width, height 속성을 적용할 수 없으며, margin과 padding은 좌우에만 적용됩니다. (예: <span>, <a>, <img>)
  • inline-block: inline처럼 다른 요소와 같은 줄에 배치되지만, block처럼 width, height, margin, padding을 모두 적용할 수 있습니다.
  • none: 요소를 화면에서 완전히 사라지게 만듭니다. 공간조차 차지하지 않습니다

2.3. Position 속성: 요소의 위치 지정하기

position 속성은 문서의 흐름을 기준으로 요소를 어떻게 배치할지를 결정합니다. top, right, bottom, left 속성과 함께 사용됩니다.

  • static (기본값): 특별한 위치 지정 없이 문서의 일반적인 흐름에 따라 배치됩니다.
  • relative: 원래 자신의 위치(static일 때의 위치)를 기준으로 상대적으로 이동합니다. 이 요소는 다른 요소의 레이아웃에 영향을 주지 않습니다.
  • absolute: 가장 가까운 position이 static이 아닌 부모 요소를 기준으로 위치가 결정됩니다. 만약 그런 부모가 없다면, 문서의 최상단(body)을 기준으로 배치됩니다.
  • fixed: 뷰포트(브라우저 창)를 기준으로 위치가 고정됩니다. 스크롤을 해도 항상 같은 자리에 보입니다. (예: 상단 고정 헤더)

3. 코드로 배우기

3.1. 구현 목표

박스 모델의 각 영역을 시각적으로 확인하고, display와 position 속성을 이용해 간단한 레이아웃을 만들어 봅니다.

 

3.2. [1단계: 박스 모델과 box-sizing 확인하기]

두 개의 박스를 만들고 하나는 content-box, 다른 하나는 border-box로 설정하여 크기 계산 방식의 차이를 비교합니다

<style>
  .box {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 10px solid blue;
    margin: 20px;
    background-color: lightblue;
  }
  .content-box { box-sizing: content-box; }     /*전체 너비 = 200 + 40 + 20 = 260px */
  .border-box { box-sizing: border-box; }  /*전체 너비 = 200px */
</style>

<div class="box content-box">Content Box</div>
<div class="box border-box">Border Box</div>

 

3.3. [2단계: position 속성으로 요소 배치하기]

relative 속성을 가진 부모 요소 안에 absolute 속성을 가진 자식 요소를 배치하여 위치 지정의 기준점을 확인합니다.

<style>
  .parent {
    position: relative;
    width: 300px;
    height: 200px;
    background-color: lightgray;
  }
  .child {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 100px;
    height: 50px;
    background-color: tomato;
  }
</style>

<div class="parent">
  <div class="child">Absolute Child</div>
</div>

4. 전체 코드

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Box Model & Layout</title>
  <style>
    * {
      box-sizing: border-box;
    }
    body { font-family: sans-serif; }
    .box-container, .position-container {
      margin-bottom: 40px;
      border: 1px solid #ccc;
      padding: 10px;
    }

    /* Box Model Example */
    .box {
      width: 200px; height: 100px;
      padding: 20px;
      border: 10px solid blue;
      margin: 20px;
      background-color: lightblue;
    }
    .content-box { box-sizing: content-box; }
    
    /* Position Example */
    .parent {
      position: relative;
      width: 300px; height: 200px;
      background-color: lightgray;
    }
    .child {
      position: absolute;
      top: 20px; right: 20px;
      width: 100px; height: 50px;
      background-color: tomato;
      color: white; text-align: center; line-height: 50px;
    }
  </style>
</head>
<body>
  <div class="box-container">
    <h2>Box Sizing Test</h2>
    <div class="box content-box">Content Box (Total Width: 260px)</div>
    <div class="box">Border Box (Total Width: 200px)</div>
  </div>

  <div class="position-container">
    <h2>Position Test</h2>
    <div class="parent">
      I am the relative parent.
      <div class="child">Absolute</div>
    </div>
  </div>
</body>
</html>

'개발 > 웹 개발' 카테고리의 다른 글

Day 10: CSS Grid  (0) 2024.08.07
Day 9: CSS Flexbox  (1) 2024.08.07
Day 7: CSS 선택자와 명시도  (0) 2024.08.02
Day 6: HTML과 시맨틱 웹  (1) 2024.08.02
Day 5: CORS (Cross-Origin Resource Sharing)  (1) 2024.08.01

'개발/웹 개발' 관련글

티스토리툴바