<div>: 콘텐츠 구분 요소

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 조합 선언에서는 영향을 줄 수 있습니다.

기본 예제

<div>
  <p>
    Any kind of content here. Such as <p>, <table>. You name it!
  </p>
</div>

스타일 적용 예제

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

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

기술 요약

같이 보기

• 시맨틱 구획 요소: <section>, <article>, <nav>, <header>, <footer>
• 문장 콘텐츠에 스타일을 적용할 수 있는 <span> 요소