diff options
Diffstat (limited to 'files/ko/web/html/element/div/index.html')
| -rw-r--r-- | files/ko/web/html/element/div/index.html | 147 |
1 files changed, 147 insertions, 0 deletions
diff --git a/files/ko/web/html/element/div/index.html b/files/ko/web/html/element/div/index.html new file mode 100644 index 0000000000..3fd7ebd390 --- /dev/null +++ b/files/ko/web/html/element/div/index.html @@ -0,0 +1,147 @@ +--- +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> |