<div>: 콘텐츠 분할 요소

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

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

콘텐츠 카테고리 플로우 콘텐츠, 뚜렷한 콘텐츠
가능한 콘텐츠 플로우 콘텐츠.
또는 (WHATWG HTML에서): 부모가 <dl> 요소라면: 하나 이상의 <dt> 요소, 이후 하나 이상의 <dd> 요소, 선택적으로 <script><template> 요소 혼합 가능.
태그 생략 None, both the starting and ending tag are mandatory.
가능한 부모 요소 플로우 콘텐츠를 허용하는 아무 요소.
또는 (WHATWG HTML에서) <dl> 요소.
암시적 ARIA 역할 대응하는 역할 없음
가능한 ARIA 역할 모두
DOM 인터페이스 HTMLDivElement

특성

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

사용 일람

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

예제

간단한 예제

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

결과는 다음과 같습니다.

스타일 예제

다음 예제는 CSS로 <div>에 그림자를 입힙니다. <div>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);
}

결과

명세

명세 상태 주석
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 AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
divChrome Full support YesEdge Full support 12Firefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android 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 12Firefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android 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.

같이 보기