<div>: 콘텐츠 구분 요소

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

HTML <div> 요소는 플로우 콘텐츠를 담는 일반적인 컨테이너입니다. CSS를 통해 직접 스타일을 적용하거나 플렉스박스 같은 레이아웃 모델이 부모 요소에 적용되지 않는 한, 해당 요소 자체는 콘텐츠나 레이아웃에 아무런 영향을 주지 않습니다.

시도해 보기

<div class="warning">
  <img
    src="/shared-assets/images/examples/leopard.jpg"
    alt="An intimidating leopard." />
  <p>Beware of the leopard</p>
</div>

.warning {
  border: 10px ridge #f00;
  background-color: #ff0;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
}

.warning img {
  width: 100%;
}

.warning p {
  font: small-caps bold 1.2rem sans-serif;
  text-align: center;
}

"순수한" 컨테이너로서 <div> 요소는 본래 아무런 의미를 갖지 않습니다. 대신, 콘텐츠를 그룹화해서 class나 id 속성을 사용해 쉽게 스타일을 지정하거나, lang 속성을 사용해 문서의 일부가 다른 언어로 작성되었음을 표시하는 등의 용도로 사용됩니다.

특성

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

참고 :>align 속성은 더 이상 사용되지 않는 구식 속성이므로 사용하지 않습니다. 대신, <div> 요소를 정렬하거나 배치할 때는 CSS Grid나 CSS Flexbox 같은 CSS 속성이나 기술을 사용하는 것이 좋습니다.

사용 일람

  • <div> 요소는 <article>나 <nav> 같은 다른 시맨틱 요소를 사용할 수 없는 경우에만 사용해야 합니다.

접근성

<div> 요소는 암시적으로 generic의 역할을 가지며, none이 아닙니다. 이로 인해 특정 역할을 가진 자식 요소가 있어야 제대로 동작하는 일부 ARIA 조합 선언에서는 영향을 줄 수 있습니다.

예제

기본 예제

html
<div>
  <p>
    Any kind of content here. Such as &lt;p&gt;, &lt;table&gt;. You name it!
  </p>
</div>

결과

스타일 적용 예제

이 예제는 <div> 요소에 CSS 스타일을 적용해 그림자 박스를 만듭니다. "shadowbox"라는 스타일을 적용하기 위해 <div>에 class 속성을 사용한 점에 주목하세요.

HTML

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

CSS

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

결과

기술 요약

콘텐츠 카테고리 플로우 콘텐츠, 인식 가능 콘텐츠.
가능한 콘텐츠 플로우 콘텐츠.
또는 (WHATWG HTML 기준으로), <dl>가 부모 요소인 경우 하나 이상의 <dt> 요소 다음에 하나 이상의 <dd> 요소가 와야하며, 필요에 따라 <script>나 <template> 요소가 섞여 있어도 됩니다.
태그 생략 생략 불가. 시작과 종료 태그 모두 필수.
가능한 부모 요소 플로우 콘텐츠를 허용하는 모든 요소.
또는 (WHATWG HTML 기준으로), <dl> 요소.
암시적 ARIA 역할 generic
가능한 ARIA 역할 제한 없음
DOM 인터페이스 HTMLDivElement

명세서

Specification
HTML
# the-div-element

브라우저 호환성

같이 보기