<div> 태그 사용 설명서

태그는 HTML에서 가장 일반적으로 사용되는 컨테이너 태그 중 하나입니다. 이 태그는 페이지의 레이아웃을 만들기 위해 사용되며, 다른 요소들을 그룹화하여 스타일링 하거나 자바스크립트를 통해 조작하는 등의 역할을 할 수 있습니다.

태그의 사용법은 간단합니다. 다음과 같이 사용합니다.

 

<div>
  <!-- 내용을 입력합니다 -->
</div>

태그는 시작 태그

와 종료 태그

로 이루어져 있으며, 그 사이에 원하는 콘텐츠를 입력합니다. 예를 들어, 다음과 같이 사용할 수 있습니다.

<div class="container">
  <h1>Hello, World!</h1>
  <p>This is a paragraph of text.</p>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div> 

위 예제에서는

태그를 사용하여 class 속성을 갖는 요소를 그룹화하였습니다. 이렇게 그룹화된 요소들은 CSS에서 선택하여 스타일링이 가능합니다.

태그는 웹 페이지의 다양한 부분에 사용될 수 있습니다. 예제를 살펴보면 다음과 같습니다.

<!-- 웹 페이지 전체를 감싸는 컨테이너 -->
<div class="wrapper">
  <!-- 헤더 -->
  <div class="header">
    <h1>My Website</h1>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </div>

  <!-- 본문 -->
  <div class="main">
    <h2>Welcome to my website</h2>
    <p>This is the main content of the website.</p>
  </div>

  <!-- 사이드바 -->
  <div class="sidebar">
    <h3>Categories</h3>
    <ul>
      <li><a href="#">Category 1</a></li>
      <li><a href="#">Category 2</a></li>
      <li><a href="#">Category 3</a></li>
    </ul>
  </div>

  <!-- 푸터 -->
  <div class="footer">
    <p>&copy; 2023 My Website. All rights reserved.</p>
  </div>
</div>

<div> 태그 사용 설명서