<div>: 콘텐츠 구분 요소

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

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

HTML

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

CSS

.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 속성을 사용해 문서의 일부가 다른 언어로 작성되었음을 표시하는 등의 용도로 사용됩니다.

특성

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

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

결과

기술 요약

콘텐츠 카테고리	플로우 콘텐츠, 인식 가능 콘텐츠.
가능한 콘텐츠	플로우 콘텐츠. 또는 (WHATWG HTML 기준으로), ` `가 부모 요소인 경우 하나 이상의 ` ` 요소 다음에 하나 이상의 ` ` 요소가 와야하며, 필요에 따라 ` 브라우저 호환성 같이 보기 시맨틱 구획 요소: `<section>`, `<article>`, `<nav>`, `<header>`, `<footer>` 문장 콘텐츠에 스타일을 적용할 수 있는 `<span>` 요소