From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- files/ko/web/html/element/div/index.html | 147 +++++++++++++++++++++++++++++++ 1 file changed, 147 insertions(+) create mode 100644 files/ko/web/html/element/div/index.html (limited to 'files/ko/web/html/element/div') 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: '
: 콘텐츠 분할 요소' +slug: Web/HTML/Element/div +tags: + - Element + - HTML + - HTML grouping content + - 'HTML:Flow content' + - Layout + - Reference + - Web +translation_of: Web/HTML/Element/div +--- +
{{HTMLRef}}
+ +

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

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

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
콘텐츠 카테고리플로우 콘텐츠, 뚜렷한 콘텐츠
가능한 콘텐츠플로우 콘텐츠.
+ 또는 ({{glossary("WHATWG")}} HTML에서): 부모가 {{HTMLElement("dl")}} 요소라면: 하나 이상의 {{HTMLElement("dt")}} 요소, 이후 하나 이상의 {{HTMLElement("dd")}} 요소, 선택적으로 {{HTMLElement("script")}}와 {{HTMLElement("template")}} 요소 혼합 가능.
태그 생략{{no_tag_omission}}
가능한 부모 요소플로우 콘텐츠를 허용하는 아무 요소.
+ 또는 ({{glossary("WHATWG")}} HTML에서) {{HTMLElement("dl")}} 요소.
암시적 ARIA 역할대응하는 역할 없음
가능한 ARIA 역할모두
DOM 인터페이스{{domxref("HTMLDivElement")}}
+ +

특성

+ +

이 요소는 전역 특성만 포함합니다.

+ +

사용 일람

+ + + +

예제

+ +

간단한 예제

+ +
<div>
+   <p>어떤 콘텐츠든 좋습니다.
+   &lt;p&gt;, &lt;table&gt;같이 말이죠. 써보세요!</p>
+</div>
+ +

결과는 다음과 같습니다.

+ +

{{ EmbedLiveSample('간단한_예제') }}

+ +

스타일 예제

+ +

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

+ +

HTML

+ +
<div class="shadowbox">
+  <p>Here's a very interesting note displayed in a
+  lovely shadowed box.</p>
+</div>
+ +

CSS

+ +
.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);
+}
+ +

결과

+ +

{{EmbedLiveSample("스타일_예제", 650, 120)}}

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
명세상태주석
{{SpecName('HTML WHATWG', 'grouping-content.html#the-div-element', '<div>')}}{{Spec2('HTML WHATWG')}}No changes since the latest snapshot
{{SpecName('HTML5 W3C', 'grouping-content.html#the-div-element', '<div>')}}{{Spec2('HTML5 W3C')}}Obsoleted align
{{SpecName('HTML4.01', 'struct/global.html#h-7.5.4', '<div>')}}{{Spec2('HTML4.01')}}
+ +

브라우저 호환성

+ + + +

{{Compat("html.elements.div")}}

+ +

같이 보기

+ + -- cgit v1.2.3-54-g00ecf