<div>: 콘텐츠 구분 요소

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015년 7월⁩.

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

시도해 보기

<div>  <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>  <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`