<div> 태그의 정의 및 사용법

<div> 태그는
레이아웃을 만들거나 콘텐츠를 나누는(division) 컨테이너로 사용하는 태그입니다.
<div> 태그는 자체적으로 특별한 의미가 전혀 없습니다.

  • <div>는 "division(나누다)"의 줄임말로 사용된 것입니다.
  • 대부분의 HTML 태그들은 각각의 특별한 의미가 있지만, <div> 태그는 순전한 컨테이너로서 본질적으로 어떤 의미도 없습니다.
  • 의미가 있는 태그(예를 들어, <article>이나 <nav>)를 사용할 수 없는 상황에서만 <div> 태그를 사용하세요.
  • <div> 태그에 role 속성을 사용해서 구조나 의미를 부여할 수 있습니다.
HTML role 속성

자체적으로 특별한 의미가 전혀 없으나, 단순 텍스트나 텍스트에 관련된 마크업 등 구문 콘텐츠에 스타일이나 속성의 범위를 적용하기 위해서는 <span> 태그를 사용하세요. <div> 태그는 적당하지 않습니다.

HTML <span> 태그 - 올바른 이해와 사용 방법

활용 예제

<div> 태그는 웹사이트를 제작할 때 가장 많아 사용하는 태그들 가운데 하나입니다. <div> 태그의 다양한 활용 예제입니다.

속성을 활용하기 위한 컨테이너

<div> 태그는 class, lang, title 등의 속성과 함께 사용하여 관련된 부분으로 나누기 위해 활용할 수 있습니다. 다음의 예제는 lang 속성으로 콘텐츠의 일부분을 영어 영역으로 나누기 위해 <div> 태그를 활용한 예제입니다.

lang 속성은 HTML 태그에 언어 정보를 제공하는데 사용됩니다.
lang 속성을 사용하면 스크린 리더 및 보조 기술을 사용하는 사용자가 콘텐츠를 더 잘 이해할 수 있습니다.

HTML lang 속성
HTML 
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>웹 디자인 트렌드</title>
    </head>
    <body>
        <h1>웹 디자인 트렌드</h1>
        <article>
            <h2>웹 디자인 트렌드 2023</h2>
            <p>2023년 웹 디자인 트렌드에 대한 예측과 해석입니다. ...</p>

            <!-- div 태그를 사용하여 영어로 표시되는 부분을 그룹화하고 언어를 명시 -->
            <div lang="en-US">
                <h2>Web Design Trend 2023</h2>
                <p>Forecast and interpretation of 2023 web design trends.</p>
            </div>
        </article>
    </body>
</html>

위 예제에서 <div> 태그는 특별한 의미가 있지 않습니다.
예를 들어 주제별 콘텐츠 그룹을 나타내거나(이 경우에는 <section> 태그를 사용해야 함), 탐색을 위한 링크가 있는 영역(이 경우에는 <nav> 태그를 사용해야 함)도 아닙니다.

HTML <section> 태그
HTML <nav> 태그

스타일을 활용하기 위한 컨테이너

<div> 태그는 스타일을 지정하기 위한 영역으로 활용됩니다.

웹사이트 제작에 있어서 스타일을 지정하기 위해 <div> 태그를 활용하는 예는 수없이 많습니다. 그 중에서 몇 가지를 소개하겠습니다.

콘텐츠의 박스 스타일을 위한 컨테이너

다음은 <div> 태그로 콘텐츠의 박스 스타일을 위한 컨테이너로 활용한 예제입니다.

HTML 
<div class="shadow-box">
    <p>아름다운 박스 스타일을 만들었군요!</p>
</div>
CSS 
.shadow-box {
    border-radius: 25px;
    padding: 2.5em;
    box-shadow: 0 20px 50px -25px rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: gold;
}
브라우저에서 실제 표시된 모습

오직 시각적 스타일을 위한 장식용 컨텐이너

다음은 <div> 태그로 오직 스타일을 위한 시각적 장식용 컨테이너로 활용한 예제입니다.

HTML 
<div class="container" aria-hidden="true">
    <div class="circle circle-1"></div>
    <div class="circle circle-2"></div>
    <div class="circle circle-3"></div>
</div>

aria-hidden="true"는 스크린 리더 및 보조 기술을 사용하는 것으로, aria-hidden 속성의 값이 true로 설정되면 해당 요소와 그 안에 포함된 콘텐츠는 접근성 기술을 통해 감지되지 않습니다. 위 예제에서는 <div> 태그가 오직 시각적 장식으로만 활용되었기 때문에 웹접근성 향상을 위해 사용되었습니다.

CSS 
.container {
    position: relative;
    height: 200px;
}
.circle {
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
}
.circle-1 {
    top: 0;
    background-color: red;
}
.circle-2 {
    top: 80px;
    left: 100px;
    background-color: green;
}
.circle-3 {
    bottom: 0;
    left: 50px;
    background-color: blue;
}
브라우저에서 실제 표시된 모습

role 속성으로 <div> 태그에 구조나 의미 부여

role 속성은
HTML 요소(Element)의 확장 개념으로 좀 더 명확한 HTML 요소의 구조와 의미를 부여하는 역할을 하는 속성입니다.

HTML role 속성

<div> 태그에 role 속성을 사용해서 구조나 의미를 부여할 수 있습니다.

웹 페이지의 구성과 구조를 식별

글로벌 헤더나 글로벌 푸터, 사이트바, 메뉴 네비게이션 등은 웹 페이지를 이해하고 탐색하는 데 도움을 주며, 스크린 리더 및 다른 보조 기술을 사용하는 사용자에게 페이지의 레이아웃 및 구조를 전달하는 데 중요한 역할을 합니다. HTML에서 이를 "랜드마크(landmark)"라고 합니다.

다음은 랜드마크 역할을 하는 일부 요소들을 발췌했습니다.

랜드마크 요소들
<header> 웹 페이지 상단에 있는 전체적인 글로벌 헤더 부분을 나타내기 위해 사용됩니다.
<footer> 웹 페이지 맨 하단에 있는 저작권 정보, 개인정보처리방침에 대한 링크 등을 내용을 포함한 글로벌 푸터 부분을 나타내기 위해 사용합니다.
<main> HTML 문서의 주요 내용(dominant contents)을 나타냅니다.
<aside> 주로 사이드바 혹은 문서의 내용과 관련된 추가 정보를 제공하는 작은 영역으로 표현됩니다.
<nav> 다른 웹 페이지로 연결하거나, 현재 웹 페이지의 콘텐츠 내부로 연결되는 탐색(Navigation)을 위한 링크(links)가 있는 영역을 나타냅니다. 일반적인 예로는 메뉴, 목차, 색인 등이 있습니다.

이러한 요소들은 <div> 태그에 role 속성을 사용해서 동일하게 활용할 수 있습니다.

주의하세요!
브라우저 호환성 문제로 랜드마크 역할을 하는 요소를 사용할 수 없는 경우를 제외하고 role 속성을 사용한 <div> 태그의 구조나 의미 부여는 권장하지 않습니다.

HTML - 글로벌 헤더 
<header>
    <h1>웹사이트 제목<h1>
    .... 로고, 네비게이션, 검색....
</header>

<!-- 아래와 같이 사용할 수 있습니다.-->
<div role="banner">
    <h1>웹사이트 제목<h1>
    .... 로고, 네비게이션, 검색....
</div>
HTML - 글로벌 푸터 
<footer role="contentinfo">
    <address>
        © 2023 웹 페이지 제작자
        <a href="mailto:contact@example.com">contact@example.com</a>
    </address>
</footer>

<!-- 아래와 같이 사용할 수 있습니다.-->
<div role="contentinfo">
    <address>
        © 2023 웹 페이지 제작자
        <a href="mailto:contact@example.com">contact@example.com</a>
    </address>
</div>
HTML - main 
<!DOCTYPE html>
<html>
    <head>
        <title>웹 페이지 제목</title>
    </head>
    <body>
        <header></header>
        <nav></nav>
        <main>
            <!-- 웹 페이지의 주요 콘텐츠 영역 -->
            <h1>주요 제목</h1>
            <p>주요 내용...</p>
            <!-- 기타 콘텐츠 -->
        </main>
        
        <!-- 아래와 같이 사용할 수 있습니다.-->
        <div role="main">
            <!-- 웹 페이지의 주요 콘텐츠 영역 -->
            <h1>주요 제목</h1>
            <p>주요 내용...</p>
            <!-- 기타 콘텐츠 -->
        </div>
        <footer></footer>
    </body>
</html>
HTML - aside 
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>aside 태그 예제</title>
    </head>
    <body>
        <header></header>
        <main></main>
        <aside>
            <h3>부가 정보</h3>
            <p>이 영역은 주요 콘텐츠에 포함되어 있지 않은 별도로 분리된 부가 정보를 표시합니다.</p>
        </aside>
        
        <!-- 아래와 같이 사용할 수 있습니다.-->
        <div role="complementary">
            <h3>부가 정보</h3>
            <p>이 영역은 주요 콘텐츠에 포함되어 있지 않은 별도로 분리된 부가 정보를 표시합니다.</p>
        </div>
        <footer></footer>
    </body>
</html>
HTML - 네비게이션 
<nav>
    <ul>
        <li><a href="/">홈</a></li>
        <li><a href="/about">회사 정보</a></li>
        <li><a href="/services">서비스</a></li>
        <li><a href="/contact">연락처</a></li>
    </ul>
</nav>

<!-- 아래와 같이 사용할 수 있습니다.-->
<div role="navigation">
    <ul>
        <li><a href="/">홈</a></li>
        <li><a href="/about">회사 정보</a></li>
        <li><a href="/services">서비스</a></li>
        <li><a href="/contact">연락처</a></li>
    </ul>
</div>

태그의 의미 부여

다음은 <div> 태그에 role 속성을 사용해서 <button> 태그의 의미를 부여하는 예제입니다.

HTML 
<button type="button" id="save">저장하기</button>

<!-- 아래와 같이 사용할 수 있습니다.-->
<div id="save" tabindex="0" role="button" aria-pressed="false">저장하기</div>

주의하세요!
role="button"은 <div> 태그를 스크린 리더 및 다른 보조 기술에 대한 버튼으로 식별합니다. 하지만, 버튼의 기능을 제공하지는 않습니다. 버튼의 기능을 추가하려면 tabindex 속성과 자바스크립트, CSS가 추가로 필요합니다.

<div> 태그에 role 속성을 사용해서 태그의 의미를 부여할 수 있는 것은 다양합니다.

브라우저 호환성

div 태그의 브라우저 호환성
태그
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
<div> 1 12 1 1

caniuse.com에서 더 자세한 정보를 확인해 보세요.

명세서

div 태그의 명세서 사양
명세서 사양
<div> HTML Standard
#the-div-element

참고문헌

같이 보기