--- 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><div></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><div></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><div></code> 요소는 의미를 가진 다른 요소({{htmlelement("article")}}, {{htmlelement("nav")}} 등)가 적절하지 않을 때만 사용해야 합니다.</li> </ul> <h2 id="예제" name="예제">예제</h2> <h3 id="간단한_예제">간단한 예제</h3> <pre class="brush: html notranslate"><div> <p>어떤 콘텐츠든 좋습니다. &lt;p&gt;, &lt;table&gt;같이 말이죠. 써보세요!</p> </div></pre> <p>결과는 다음과 같습니다.</p> <p>{{ EmbedLiveSample('간단한_예제') }}</p> <h3 id="스타일_예제">스타일 예제</h3> <p>다음 예제는 CSS로 <div>에 그림자를 입힙니다. <code><div></code>의 {{htmlattrxref("class")}} 속성을 통해 <code>"shadowbox"</code> 스타일을 적용한 점에 주목하세요.</p> <h4 id="HTML">HTML</h4> <pre class="notranslate"><div class="shadowbox"> <p>Here's a very interesting note displayed in a lovely shadowed box.</p> </div></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', '<div>')}}</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', '<div>')}}</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', '<div>')}}</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>