---
title: '<div>: 콘텐츠 분할 요소'
slug: Web/HTML/Element/div
tags:
  - Element
  - HTML
  - HTML grouping content
  - 'HTML:Flow content'
  - Layout
  - Reference
  - Web
translation_of: Web/HTML/Element/div
---
<div>{{HTMLRef}}</div>

<p><strong>HTML <code>&lt;div&gt;</code> 요소</strong>는 플로우 콘텐츠를 위한 통용 컨테이너입니다. {{glossary("CSS")}}로 꾸미기 전에는 콘텐츠나 레이아웃에 어떤 영향도 주지 않습니다.</p>

<div>{{EmbedInteractiveExample("pages/tabbed/div.html","tabbed-standard")}}</div>

<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p>

<p><code>&lt;div&gt;</code> 요소는 "순수" 컨테이너로서 아무것도 표현하지 않습니다. 대신 다른 요소 여럿을 묶어 {{htmlattrxref("class")}}나 {{htmlattrxref("id")}} 속성으로 꾸미기 쉽도록 돕거나, 문서의 특정 구역이 다른 언어임을 표시({{htmlattrxref("lang")}} 속성 사용)하는 등의 용도로 사용할 수 있습니다.</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, 뚜렷한 콘텐츠</td>
  </tr>
  <tr>
   <th scope="row">가능한 콘텐츠</th>
   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>.<br>
    또는 ({{glossary("WHATWG")}} HTML에서): 부모가 {{HTMLElement("dl")}} 요소라면: 하나 이상의 {{HTMLElement("dt")}} 요소, 이후 하나 이상의 {{HTMLElement("dd")}} 요소, 선택적으로 {{HTMLElement("script")}}와 {{HTMLElement("template")}} 요소 혼합 가능.</td>
  </tr>
  <tr>
   <th scope="row">태그 생략</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">가능한 부모 요소</th>
   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>를 허용하는 아무 요소.<br>
    또는 ({{glossary("WHATWG")}} HTML에서) {{HTMLElement("dl")}} 요소.</td>
  </tr>
  <tr>
   <th scope="row">암시적 ARIA 역할</th>
   <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">대응하는 역할 없음</a></td>
  </tr>
  <tr>
   <th scope="row">가능한 ARIA 역할</th>
   <td>모두</td>
  </tr>
  <tr>
   <th scope="row">DOM 인터페이스</th>
   <td>{{domxref("HTMLDivElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Attributes" name="Attributes">특성</h2>

<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p>

<h2 id="예제" name="예제">사용 일람</h2>

<ul>
 <li><code>&lt;div&gt;</code> 요소는 의미를 가진 다른 요소({{htmlelement("article")}}, {{htmlelement("nav")}} 등)가 적절하지 않을 때만 사용해야 합니다.</li>
</ul>

<h2 id="예제" name="예제">예제</h2>

<h3 id="간단한_예제">간단한 예제</h3>

<pre class="brush: html notranslate">&lt;div&gt;
   &lt;p&gt;어떤 콘텐츠든 좋습니다.
   &amp;lt;p&amp;gt;, &amp;lt;table&amp;gt;같이 말이죠. 써보세요!&lt;/p&gt;
&lt;/div&gt;</pre>

<p>결과는 다음과 같습니다.</p>

<p>{{ EmbedLiveSample('간단한_예제') }}</p>

<h3 id="스타일_예제">스타일 예제</h3>

<p>다음 예제는 CSS로 &lt;div&gt;에 그림자를 입힙니다. <code>&lt;div&gt;</code>의 {{htmlattrxref("class")}} 속성을 통해 <code>"shadowbox"</code> 스타일을 적용한 점에 주목하세요.</p>

<h4 id="HTML">HTML</h4>

<pre class="notranslate">&lt;div class="shadowbox"&gt;
  &lt;p&gt;Here's a very interesting note displayed in a
  lovely shadowed box.&lt;/p&gt;
&lt;/div&gt;</pre>

<h4 id="CSS">CSS</h4>

<pre class="notranslate">.shadowbox {
  width: 15em;
  border: 1px solid #333;
  box-shadow: 8px 8px 5px #444;
  padding: 8px 12px;
  background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
}</pre>

<h4 id="결과">결과</h4>

<p>{{EmbedLiveSample("스타일_예제", 650, 120)}}</p>

<h2 id="Specifications" name="Specifications">명세</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">명세</th>
   <th scope="col">상태</th>
   <th scope="col">주석</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-div-element', '&lt;div&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>No changes since the latest snapshot</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-div-element', '&lt;div&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>Obsoleted <code>align</code></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.4', '&lt;div&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>



<p>{{Compat("html.elements.div")}}</p>

<h2 id="See_also" name="See_also">같이 보기</h2>

<ul>
 <li>의미를 지닌 구획 요소: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}</li>
 <li>구문 콘텐츠를 꾸밀 때 사용하는 {{HTMLElement("span")}} 요소</li>
</ul>