LabEx
로그인무료 가입

CSS 에서 Margin 스타일 적용하기

CSSBeginner
지금 연습하기

소개

이 랩에서는 참가자들이 CSS 에서 margin 스타일을 적용하는 기본 사항을 실습을 통해 탐구합니다. 이 랩은 학습자들이 HTML 문서를 생성하고, margin 속성 구문을 이해하며, 다양한 margin 기법을 실험하도록 안내합니다. 단계별로 작업함으로써, 학생들은 인라인 스타일과 CSS margin 속성을 사용하여 HTML 요소 주변의 간격을 조작하는 방법을 배우게 됩니다.

이 랩은 기본적인 HTML5 문서 구조를 설정하는 것으로 시작하며, margin 스타일 데모를 위한 캔버스 역할을 할 세 개의 <div> 요소를 소개합니다. 참가자들은 점진적으로 인라인 스타일을 추가하고, 다양한 margin 값 구문을 탐구하며, 개별 margin 속성을 적용하여 요소 간격 및 레이아웃 디자인을 제어하는 실질적인 경험을 얻게 됩니다.

기본 구조를 갖춘 HTML 문서 생성

이 단계에서는 CSS margin 스타일을 탐구하기 위한 기반이 될 기본적인 HTML 문서를 생성하는 방법을 배웁니다. HTML 은 웹 페이지의 구조를 제공하며, 잘 구성된 문서를 만드는 것은 웹 개발의 첫 번째 단계입니다.

WebIDE 를 열고 ~/project 디렉토리로 이동합니다. 파일 탐색기에서 마우스 오른쪽 버튼을 클릭하고 "New File"을 선택하여 index.html이라는 새 파일을 생성합니다.

다음은 이 랩에서 사용할 기본적인 HTML5 문서 구조입니다.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Margin Styles Lab</title>
  </head>
  <body>
    <div>First Paragraph</div>
    <div>Second Paragraph</div>
    <div>Third Paragraph</div>
  </body>
</html>

이 HTML 구조의 주요 구성 요소를 살펴보겠습니다.

  • <!DOCTYPE html>은 이것이 HTML5 문서임을 선언합니다.
  • <html>은 HTML 페이지의 루트 요소입니다.
  • <head>는 문서에 대한 메타 정보를 포함합니다.
  • <meta charset="UTF-8">는 문자 인코딩을 지정합니다.
  • <meta name="viewport">는 다양한 장치에서 적절한 렌더링을 보장합니다.
  • <body>는 페이지의 보이는 내용을 포함합니다.

다음 단계에서 margin 스타일을 시연하는 데 사용할 세 개의 <div> 요소를 추가했습니다.

Ctrl+S를 누르거나 WebIDE 의 저장 아이콘을 사용하여 파일을 저장합니다.

HTML 요소에 인라인 스타일 추가

이 단계에서는 style 속성을 사용하여 HTML 요소에 인라인 스타일을 추가하는 방법을 배웁니다. 인라인 스타일을 사용하면 CSS 를 개별 HTML 요소에 직접 적용할 수 있으며, 이는 웹 페이지에 스타일을 빠르게 추가하는 방법입니다.

WebIDE 를 사용하여 이전 단계에서 생성한 index.html 파일을 엽니다. margin 속성을 시연하는 인라인 스타일을 포함하도록 <div> 요소를 수정합니다.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Margin Styles Lab</title>
  </head>
  <body>
    <div style="margin: 20px; background-color: lightblue;">
      First Paragraph
    </div>
    <div style="margin: 30px; background-color: lightgreen;">
      Second Paragraph
    </div>
    <div style="margin: 40px; background-color: lightsalmon;">
      Third Paragraph
    </div>
  </body>
</html>

인라인 스타일에 대한 주요 사항:

  • style 속성은 HTML 요소에 직접 추가됩니다.
  • CSS 속성은 따옴표 안에 작성됩니다.
  • 여러 속성은 세미콜론으로 구분됩니다.
  • 이 예제에서는 margin 을 더 잘 보이게 하기 위해 margin 속성과 background-color를 추가했습니다.

이제 각 <div>가 서로 다른 margin 크기와 배경색을 갖는 것을 확인하세요. margin 속성은 요소 주변에 공간을 생성하여 다른 요소를 밀어냅니다.

Ctrl+S를 누르거나 WebIDE 의 저장 아이콘을 사용하여 파일을 저장합니다.

Margin 속성 구문 탐색

이 단계에서는 CSS margin 속성 구문에 대해 더 자세히 알아보고 margin 을 지정하는 다양한 방법에 대해 배웁니다. WebIDE 에서 index.html 파일을 열고 다양한 margin 구문 옵션을 시연하도록 업데이트합니다.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Margin Styles Lab</title>
    <style>
      .single-value {
        margin: 20px; /* All sides 20px */
        background-color: lightblue;
      }

      .two-values {
        margin: 10px 30px; /* Top/Bottom 10px, Left/Right 30px */
        background-color: lightgreen;
      }

      .four-values {
        margin: 5px 10px 15px 20px; /* Top, Right, Bottom, Left */
        background-color: lightsalmon;
      }
    </style>
  </head>
  <body>
    <div class="single-value">Single Value Margin</div>
    <div class="two-values">Two Value Margin</div>
    <div class="four-values">Four Value Margin</div>
  </body>
</html>

Margin 구문 설명:

  1. 단일 값: margin: 20px;

    • 네 면 (위, 오른쪽, 아래, 왼쪽) 모두에 20px margin 을 적용합니다.

  2. 두 값: margin: 10px 30px;

    • 첫 번째 값 (10px) 은 위쪽 및 아래쪽 margin 을 설정합니다.
    • 두 번째 값 (30px) 은 왼쪽 및 오른쪽 margin 을 설정합니다.

  3. 네 값: margin: 5px 10px 15px 20px;

    • 첫 번째 값 (5px): 위쪽 margin
    • 두 번째 값 (10px): 오른쪽 margin
    • 세 번째 값 (15px): 아래쪽 margin
    • 네 번째 값 (20px): 왼쪽 margin

참고: 인라인 스타일보다 유연한 다양한 margin 구문을 시연하기 위해 내부 <style> 태그를 사용하는 것으로 전환했습니다.

Ctrl+S를 누르거나 WebIDE 의 저장 아이콘을 사용하여 파일을 저장합니다.

다양한 Margin 값 적용

이 단계에서는 웹 디자인에서 다양한 margin 값이 어떻게 다양한 간격 효과를 만들 수 있는지 살펴봅니다. WebIDE 에서 index.html 파일을 열고 픽셀, 백분율 및 기타 단위를 사용하여 margin 값을 시연하도록 스타일을 업데이트합니다.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Margin Styles Lab</title>
    <style>
      .pixel-margin {
        margin: 20px; /* Fixed pixel margin */
        background-color: lightblue;
        border: 1px solid blue;
      }

      .percentage-margin {
        margin: 5%; /* Percentage-based margin */
        background-color: lightgreen;
        border: 1px solid green;
      }

      .mixed-margin {
        margin: 10px 5%; /* Mixing pixel and percentage */
        background-color: lightsalmon;
        border: 1px solid red;
      }

      .container {
        width: 80%;
        margin: 0 auto; /* Center the container */
        background-color: #f0f0f0;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="pixel-margin">Pixel Margin (20px)</div>
      <div class="percentage-margin">Percentage Margin (5%)</div>
      <div class="mixed-margin">
        Mixed Margin (10px top/bottom, 5% left/right)
      </div>
    </div>
  </body>
</html>

Margin 값 유형 설명:

  1. 픽셀 Margin (20px):

    • 고정된 정확한 간격
    • 서로 다른 화면 크기에서 일관됨
    • 정밀한 레이아웃 제어에 적합

  2. 백분율 Margin (5%):

    • 상위 컨테이너의 너비를 기준으로 함
    • 다양한 화면 크기에 반응하고 적응 가능
    • 컨테이너 너비에 따라 변경됨

  3. 혼합 Margin (10px 5%):

    • 고정 단위와 상대 단위를 결합
    • 위/아래 margin 은 픽셀 단위
    • 왼쪽/오른쪽 margin 은 백분율 단위

  4. Margin 을 사용한 가운데 정렬 (margin: 0 auto):

    • 위/아래 margin 은 0
    • 왼쪽/오른쪽 margin 은 auto
    • 블록 레벨 요소를 가로로 가운데 정렬

Ctrl+S를 누르거나 WebIDE 의 저장 아이콘을 사용하여 파일을 저장합니다.

개별 Margin 속성 실험

이 단계에서는 요소의 각 측면에 대한 간격을 정밀하게 제어할 수 있는 개별 margin 속성을 살펴봅니다. WebIDE 에서 index.html 파일을 열고 개별 margin 속성을 시연하도록 스타일을 업데이트합니다.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Individual Margin Properties</title>
    <style>
      .box {
        width: 200px;
        background-color: lightblue;
        border: 2px solid blue;
        margin-top: 20px; /* Top margin */
        margin-right: 30px; /* Right margin */
        margin-bottom: 40px; /* Bottom margin */
        margin-left: 50px; /* Left margin */
        padding: 10px;
      }

      .individual-margins {
        display: flex;
        justify-content: space-between;
      }

      .margin-example {
        width: 100px;
        height: 100px;
        background-color: lightgreen;
        margin-top: 10px;
        margin-bottom: 20px;
      }
    </style>
  </head>
  <body>
    <div class="individual-margins">
      <div class="box">Margin on All Sides</div>
      <div class="margin-example">Vertical Margins</div>
    </div>
  </body>
</html>

개별 Margin 속성 설명:

  1. margin-top: 위쪽 margin 을 제어합니다.

    • 요소 위에 20px 간격을 설정합니다.

  2. margin-right: 오른쪽 margin 을 제어합니다.

    • 요소 오른쪽에 30px 간격을 설정합니다.

  3. margin-bottom: 아래쪽 margin 을 제어합니다.

    • 요소 아래에 40px 간격을 설정합니다.

  4. margin-left: 왼쪽 margin 을 제어합니다.

    • 요소 왼쪽에 50px 간격을 설정합니다.

주요 관찰 사항:

  • 각 측면은 서로 다른 margin 값을 가질 수 있습니다.
  • 정밀한 레이아웃 제어에 유용합니다.
  • 요소 간격을 미세 조정할 수 있습니다.
  • 다른 CSS 속성과 결합할 수 있습니다.

전문가 팁: 개별 margin 속성은 축약형 margin 속성에 비해 더 세분화된 제어를 제공하여 특정 측면을 독립적으로 조정할 수 있습니다.

Ctrl+S를 누르거나 WebIDE 의 저장 아이콘을 사용하여 파일을 저장합니다.

요약

이 Lab 에서 참가자는 HTML 문서를 생성하고 다양한 스타일링 기법을 탐구하여 CSS margin 스타일 적용의 기본 사항을 배웁니다. Lab 은 <!DOCTYPE html>, <head>, <body>와 같은 필수 요소를 소개하고 margin 속성을 시연하기 위해 세 개의 <div> 요소를 생성하여 기본적인 HTML5 구조를 구성하는 것으로 시작합니다.

학습 과정은 style 속성을 사용하여 HTML 요소에 직접 인라인 스타일을 추가하는 것으로 이어지며, 이를 통해 margin 이 요소 주변의 간격을 제어하는 데 어떻게 적용될 수 있는지 이해하는 실질적인 접근 방식을 제공합니다. 참가자는 다양한 margin 구문을 실험하고, 개별 margin 속성을 탐구하며, 다양한 margin 값을 적용하여 CSS 스타일링 기법에 대한 실질적인 경험을 얻게 됩니다.

관련 CSS 코스
초보자를 위한 CSS

초보자를 위한 CSS

cssweb-development
틱택토 웹 앱 만들기

틱택토 웹 앱 만들기

javascriptweb-development
두더지 잡기 웹 게임 만들기

두더지 잡기 웹 게임 만들기

javascriptweb-development