HTML
Div 요소

소개

통사론

• <div>example div</div>

중첩

여러 <div> 를 다른 <div> 안에 배치하는 것이 일반적입니다. 이것은 일반적으로 "중첩"요소라고하며 하위 요소를 하위 섹션으로 나누거나 CSS 스타일을 사용하여 개발자를 지원합니다.

<div class="outer-div"> 는 두 개의 <div class="inner-div"> 요소를 그룹화하는 데 사용됩니다. 각각은 <p> 요소를 포함합니다.

<div class="outer-div">
  <div class="inner-div">
    <p>This is a paragraph</p>
  </div>
  <div class="inner-div">
    <p>This is another paragraph</p>
  </div>
</div>

이렇게하면 다음 결과가 나타납니다 (명확성을 위해 CSS 스타일 적용).

인라인 및 블록 요소 중첩 요소를 중첩하는 동안 인라인 및 블록 요소 가 있음을 명심해야합니다. 블록 요소는 "백그라운드에서 줄 바꿈을 추가"하는 동안, 다른 중첩 된 요소는 다음 줄에 자동으로 표시되므로 인라인 요소는 기본적으로 서로 옆에 배치 될 수 있습니다

깊은 <div> 중첩 피하기

깊숙이 자주 사용되는 중첩 컨테이너 레이아웃은 잘못된 코딩 스타일을 보여줍니다.

모서리를 둥글게하거나 이와 유사한 기능을 사용하면 HTML 코드가 자주 생성됩니다. 대부분의 마지막 세대 브라우저에는 CSS3가 있습니다. 가능한 HTML 요소를 적게 사용하여 콘텐츠를 태그 비율로 높이고 페이지로드를 줄여서 검색 엔진 순위를 높입니다.

div 섹션 요소는 6 개의 레이어보다 더 깊게 중첩되어서는 안됩니다.

기본 사용법

<div> 요소는 대개 단순히 구분을 나타내는 특정 의미 론적 의미가 없으며 일반적으로 HTML 문서 내의 다른 요소를 그룹화하고 캡슐화하고 다른 요소와 구분하는 데 사용됩니다. 따라서 각 <div> 는 내용으로 가장 잘 설명됩니다.

<div>
  <p>Hello! This is a paragraph.</p>
</div>

div 요소는 일반적으로 블록 수준 요소로 , HTML 문서 블록을 분리하고 페이지의 최대 너비를 차지합니다. 브라우저에는 일반적으로 다음과 같은 기본 CSS 규칙이 있습니다.

div {
  display: block;
}

W3C (World Wide Web Consortium) 에서는 div 요소를 다른 요소가 적합하지 않을 때 최후의 수단으로 간주하기를 강력히 권장합니다. div 엘리먼트 대신에 적절한 엘리먼트를 사용하면 독자가 쉽게 접근 할 수 있고 작성자가 쉽게 유지 보수 할 수 있습니다.

예를 들어 블로그 게시물은 <article> , <section> 사용하는 장, <nav> 사용하는 페이지의 탐색 보조 도구 및 <fieldset> 사용하는 양식 컨트롤 그룹을 사용하여 마크 업됩니다.

div 엘리먼트는 문법적 목적이나 섹션 내에서 유사한 방식으로 주석이 달린 여러 개의 단락을 감싸는 데 유용 할 수 있습니다.