HTML div 요소 생성 및 스타일 지정 방법 - 웹 디자인 튜토리얼

소개

이 랩에서는 참가자들이 HTML 에서 <div> 요소를 생성하고 스타일링하는 기본적인 개념을 탐구하며, 웹 페이지 디자인에서 해당 요소의 목적, 구조 및 다용도성에 중점을 둡니다. 이 랩은 div 요소 사용에 대한 포괄적인 여정을 안내하며, 기본적인 생성부터 시작하여 고급 스타일링 기술까지 다룹니다.

참가자들은 div 요소가 웹 콘텐츠를 구성하고 그룹화하는 데 필수적인 컨테이너 역할을 한다는 것을 배우고, 블록 레벨 특성을 이해하며, 크기, 위치 및 시각적 외관을 사용자 정의하는 기술을 연습하게 됩니다. 실용적인 예제와 실습을 통해 학생들은 div 요소를 사용하여 디자인과 기능성을 모두 향상시키는 논리적이고 잘 구조화된 웹 페이지 레이아웃을 만드는 실질적인 기술을 습득하게 됩니다.

이것은 가이드 실험입니다. 학습과 실습을 돕기 위한 단계별 지침을 제공합니다.각 단계를 완료하고 실무 경험을 쌓기 위해 지침을 주의 깊게 따르세요. 과거 데이터에 따르면, 이것은 초급 레벨의 실험이며 완료율은 100%입니다.학습자들로부터 100%의 긍정적인 리뷰율을 받았습니다.

Div 요소의 목적 이해

이 단계에서는 HTML 에서 <div> 요소의 기본적인 목적과 웹 페이지 콘텐츠를 구조화하고 구성하는 방법에 대해 배우게 됩니다.

<div> (division, 분할) 요소는 다른 HTML 요소를 그룹화하고 구성하는 데 사용되는 컨테이너입니다. 이는 개발자가 논리적인 섹션을 만들고 콘텐츠 그룹에 스타일을 적용하는 데 도움이 되는 다용도 블록 레벨 요소입니다. <div>를 다른 요소를 담을 수 있고 웹 페이지 레이아웃을 구조화하는 데 도움이 되는 상자라고 생각하십시오.

<div> 요소의 기본 사용법을 보여주는 간단한 HTML 파일을 만들어 보겠습니다. WebIDE 를 열고 ~/project 디렉토리에 div-example.html이라는 새 파일을 만듭니다.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Div Element Example</title>
  </head>
  <body>
    <div>
      <h1>Welcome to My Website</h1>
      <p>This is a paragraph inside a div element.</p>
    </div>

    <div>
      <h2>About Section</h2>
      <p>Here's some information about our project.</p>
    </div>
  </body>
</html>

이 예제에서는 두 개의 <div> 요소를 사용하여 페이지에 별도의 섹션을 만들었습니다. 각 <div>에는 제목과 단락이 포함되어 있어 div 가 관련 콘텐츠를 함께 그룹화할 수 있는 방법을 보여줍니다.

<div> 요소의 주요 특징:

블록 레벨 요소이므로 일반적으로 새 줄에서 시작합니다.
다른 HTML 요소를 포함할 수 있습니다.
레이아웃 및 스타일링 목적으로 자주 사용됩니다.
CSS 가 없으면 고유한 시각적 표현이 없습니다.

웹 브라우저에서 볼 때의 예시 출력:

텍스트 콘텐츠가 있는 기본 Div 생성

이 단계에서는 div 요소를 생성하고 텍스트 콘텐츠를 추가하는 방법을 배우게 됩니다. 이전 단계를 기반으로 div 요소 내부에 의미 있는 텍스트를 추가하는 방법을 살펴보겠습니다.

WebIDE 를 열고 ~/project 디렉토리의 div-example.html 파일을 수정하여 더 자세한 텍스트 콘텐츠를 포함합니다.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Div Text Content Example</title>
  </head>
  <body>
    <div>
      <h1>Welcome to Our Learning Platform</h1>
      <p>This div contains an introduction to our website.</p>
      <p>We provide interactive learning experiences for web development.</p>
    </div>

    <div>
      <h2>Course Highlights</h2>
      <p>Our courses cover various web technologies:</p>
      <ul>
        <li>HTML Fundamentals</li>
        <li>CSS Styling</li>
        <li>JavaScript Interactivity</li>
      </ul>
    </div>
  </body>
</html>

이 예제에서는 div 요소에 텍스트 콘텐츠를 추가하는 여러 가지 방법을 보여주었습니다.

제목 태그 (<h1>, <h2>) 사용
<p> 태그로 단락 추가
<ul> 및 <li> 태그로 정렬되지 않은 목록 포함

각 div 는 여러 유형의 텍스트와 HTML 요소를 포함할 수 있습니다. 이러한 유연성을 통해 웹 페이지에서 구조화되고 구성된 콘텐츠를 만들 수 있습니다.

웹 브라우저에서 볼 때의 예시 출력은 다음과 같습니다.

Div 요소에 배경색 추가

이 단계에서는 인라인 CSS 스타일을 사용하여 div 요소에 배경색을 추가하는 방법을 배우게 됩니다. 배경색은 시각적인 분리를 만들고 웹 페이지의 디자인을 향상시키는 데 도움이 됩니다.

~/project 디렉토리에서 div-example.html 파일을 열고 배경색을 포함하도록 수정합니다.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Div Background Color Example</title>
    <style>
      .intro-section {
        background-color: #f0f0f0;
        padding: 15px;
      }

      .courses-section {
        background-color: #e6f2ff;
        padding: 15px;
      }
    </style>
  </head>
  <body>
    <div class="intro-section">
      <h1>Welcome to Our Learning Platform</h1>
      <p>This section has a light gray background.</p>
      <p>Background colors help create visual hierarchy.</p>
    </div>

    <div class="courses-section">
      <h2>Course Highlights</h2>
      <p>This section has a light blue background.</p>
      <ul>
        <li>HTML Fundamentals</li>
        <li>CSS Styling</li>
        <li>JavaScript Interactivity</li>
      </ul>
    </div>
  </body>
</html>

이 예제에서는 배경색을 추가하는 두 가지 방법을 보여주었습니다.

<head> 섹션에서 인라인 CSS style 태그 사용
특정 배경색으로 CSS 클래스 생성
div 내부에 공간을 만들기 위해 padding 추가

배경색에 대한 주요 사항:

16 진수 색상 코드 (예: #f0f0f0) 사용
색상 이름 또는 RGB 값을 사용할 수 있습니다.
background-color 속성은 배경을 설정합니다.
padding은 div 내부에 공간을 추가합니다.

예시 시각적 출력:

Div 요소의 블록 레벨 특성 탐색

이 단계에서는 div 요소의 블록 레벨 특성과 웹 페이지 레이아웃에서의 동작 방식을 배우게 됩니다. Div 요소는 새로운 줄에서 자동으로 시작하는 별개의 콘텐츠 섹션을 생성하는 고유한 기능을 가지고 있습니다.

~/project 디렉토리에 block-level-example.html이라는 새 파일을 다음 내용으로 생성합니다.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Div Block-Level Characteristics</title>
    <style>
      .block-example {
        border: 2px solid blue;
        margin: 10px 0;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <div class="block-example">
      <h2>First Div Block</h2>
      <p>
        This is the first div element. Notice how it takes up the full width of
        its container.
      </p>
    </div>

    <div class="block-example">
      <h2>Second Div Block</h2>
      <p>
        This div starts on a new line, even though the previous div is right
        above it.
      </p>
    </div>

    <p>
      This is a paragraph outside the divs to show the block-level behavior.
    </p>
  </body>
</html>

div 요소의 주요 블록 레벨 특성:

항상 새로운 줄에서 시작합니다.
부모 컨테이너의 전체 너비를 차지합니다.
쉽게 스타일을 지정하고 배치할 수 있는 "블록" 콘텐츠를 생성합니다.

블록 레벨 특성을 보여주기 위해 다음을 추가했습니다.

각 div 의 경계를 시각화하기 위한 파란색 테두리
간격을 표시하기 위한 여백 (margin) 및 안쪽 여백 (padding)
수직으로 쌓이는 방식을 보여주기 위한 여러 div

예시 시각적 출력은 다음과 같습니다.

Div 크기 및 위치 사용자 정의

이 단계에서는 CSS 속성을 사용하여 div 요소의 크기와 위치를 사용자 정의하는 방법을 배우게 됩니다. 이를 통해 더 복잡하고 시각적으로 매력적인 웹 레이아웃을 만들 수 있습니다.

~/project 디렉토리에 div-sizing-example.html이라는 새 파일을 다음 내용으로 생성합니다.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Div Sizing and Positioning</title>
    <style>
      .container {
        width: 100%;
        max-width: 800px;
        margin: 0 auto;
      }

      .box {
        width: 300px;
        height: 200px;
        background-color: #f0f0f0;
        margin: 20px;
        padding: 15px;
        border: 2px solid #333;
      }

      .inline-boxes {
        display: flex;
        justify-content: space-between;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>Div Sizing and Positioning Example</h1>

      <div class="box">
        <h2>Fixed Size Div</h2>
        <p>This div has a fixed width of 300px and height of 200px.</p>
      </div>

      <div class="inline-boxes">
        <div class="box">
          <h2>Inline Box 1</h2>
          <p>Flexbox allows divs to sit side by side.</p>
        </div>
        <div class="box">
          <h2>Inline Box 2</h2>
          <p>Divs can be easily positioned horizontally.</p>
        </div>
      </div>
    </div>
  </body>
</html>

div 크기 및 위치를 사용자 정의하기 위한 주요 CSS 속성:

width 및 height: div 의 크기를 제어합니다.
margin: div 주변에 공간을 추가합니다.
padding: div 내부에 공간을 추가합니다.
display: flex: 유연한 레이아웃을 만듭니다.
max-width: div 의 최대 너비를 제한합니다.
margin: 0 auto: div 를 가로로 가운데 정렬합니다.

예시 시각적 출력은 다음과 같습니다.

요약

이 Lab 에서 참가자들은 웹 페이지 구조 및 구성에서 <div> 요소의 역할을 이해하는 데 중점을 두고 HTML 에서 <div> 요소의 기본적인 사용법과 스타일 지정을 탐구했습니다. 이 Lab 은 학습자들이 기본적인 div 컨테이너를 만들고, 텍스트 콘텐츠를 추가하고, 배경색을 적용하고, 이러한 다재다능한 HTML 요소의 블록 레벨 특성을 검토하는 과정을 안내했습니다.

참가자들은 div 가 관련 콘텐츠를 그룹화하기 위한 유연한 컨테이너 역할을 하며, 웹 페이지 내에서 논리적인 섹션을 만들고, 레이아웃 및 스타일 지정을 위한 기반을 제공하는 방법을 배웠습니다. 실습 예제를 통해 학습자들은 div 요소를 사용하여 웹 콘텐츠를 구성하고 기본적인 CSS 속성을 적용하는 실질적인 기술을 습득하여 HTML 페이지 구성 및 디자인 기술에 대한 이해를 높였습니다.

HTML 에서 div 요소 생성 및 스타일 지정

소개

Div 요소의 목적 이해

텍스트 콘텐츠가 있는 기본 Div 생성

Div 요소에 배경색 추가

Div 요소의 블록 레벨 특성 탐색

Div 크기 및 위치 사용자 정의

요약