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

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

콘텐츠 카테고리 플로우 콘텐츠, 뚜렷한 콘텐츠
가능한 콘텐츠 플로우 콘텐츠.
Or (in WHATWG HTML): If the parent is a <dl> element: one or more <dt> elements followed by one or more <dd> elements, optionally intermixed with <script> and <template> elements.
태그 생략 None, both the starting and ending tag are mandatory.
가능한 부모 Any element that accepts flow content.
Or (in WHATWG HTML): <dl> element.
가능한 ARIA 역할 모두
DOM 인터페이스 HTMLDivElement

속성

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

사용 참고

  • <div> 요소는 의미 있는 다른 요소(<article>, <nav> 등)가 적절하지 않을 때만 사용해야 합니다.

예제

간단한 예제

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

결과는 다음과 같습니다.

스타일 예제

This example creates a shadowed box by applying a style to the <div> using CSS. Note the use of the class attribute on the <div> to apply the style named "shadowbox" to the element.

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

결과

명세

명세 상태 주석
HTML Living Standard
The definition of '<div>' in that specification.
Living Standard No changes since the latest snapshot
HTML5
The definition of '<div>' in that specification.
Recommendation Obsoleted align
HTML 4.01 Specification
The definition of '<div>' in that specification.
Recommendation  

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
divChrome Full support YesEdge Full support YesFirefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
align
DeprecatedNon-standard
Chrome Full support YesEdge Full support YesFirefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.

같이 보기

문서 태그 및 공헌자

이 페이지의 공헌자: alattalatta, mdnwebdocs-bot, Kaben, azunyan3
최종 변경자: alattalatta,