<div>: 콘텐츠 분할 요소

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

시도해보기

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 https://github.com/mdn/interactive-examples and send us a pull request.

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

콘텐츠 카테고리 플로우 콘텐츠, 뚜렷한 콘텐츠
가능한 콘텐츠 플로우 콘텐츠.
또는 (WHATWG HTML에서): 부모가 <dl> 요소라면: 하나 이상의 <dt> 요소, 이후 하나 이상의 <dd> 요소, 선택적으로 <script>와 <template> 요소 혼합 가능.
태그 생략 불가능, 시작과 끝에 태그를 추가하는것은 필수입니다.
가능한 부모 요소 플로우 콘텐츠를 허용하는 아무 요소.
또는 (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);
}

결과

명세

Specification
HTML Standard
# the-div-element

브라우저 호환성

BCD tables only load in the browser

같이 보기