div 요소

정의

division(generic flow container); div 요소는 그 자체로 어떤 의미를 갖지는 않으며, 몇가지 요소를 한 덩어리로 묶어서 스타일을 주거나 스크립트를 연결하는데 사용합니다.

마크업 규칙

Flow Interactive Metadata Phrasing Embedded Heading Sectioning

기본 문법은 다음과 같습니다. 데모

<div id="header">
  <p>문단 내용</p>
  <ul id="header_nav">
    <li>목록 내용 1</li>
    <li>목록 내용 2</li>
  </ul>
</div>

이 마크업 예제는 HTML5에 적합하지 않습니다. div 요소는 header 요소로, ul 요소nav 요소로 바꿔서 쓰면 요소의 역할을 더 명확하게 나타낼 수 있습니다.

속성

속성명 설명
전역 속성 공통 속성

메모

HTML4/XHTML1과의 차이점, 접근성, 보충 내용 그리고 편집자 의견 등을 포함하고 있습니다.

  • div 요소는 범용 요소입니다. 범용 요소는 어디에서나 간편하게 쓸 수 있다는 장점이 있지만, 바꿔 말하면 그 자체로는 아무 의미도 없기 때문에 이 요소를 왜 썼는지 알려면 주석, 클래스명, 팀내 규칙 등 부가적인 것이 필요합니다. 그리고 이러한 부가적인 설명은 표준화할 수 없고, 스크린 리더나 검색 엔진은 이를 이해하지 못합니다. 기계가 이해하지 못하는 문제를 해결하려고 여러 방법을 사용하고 사용한 방법이 장치 간 호환성이 떨어져서 또 다른 방법을 추가하는 악순환이 발생합니다.
  • 이러한 점을 개선하려고 HTML5에서 section, header, footer, nav, aside 등 다양한 요소를 도입했습니다. 기계가 이해하도록 요소를 세분화하면 이를 지키는 것만으로도 접근성과 호환성을 상당 부분 보장받을 수 있습니다.
  • 즉 div 요소는 가능한 한 쓰지 않는 것이 최상입니다.
  • 시작/종료 태그 생략 정보는 명세 8.1.2.4 선택적 태그의 주석을 참조해 주세요.

참조

기준 명세를 바탕으로 명세 번역과 레퍼런스 제작이 이루어졌습니다. 최근 내용은 최신 명세를 확인해 주세요.

관련 요소

 
html5/element/div.txt · 마지막 수정: 2013/11/19 13:35 (외부 편집기)
이 레퍼런스는 클리어보스가 제작/운영하고 있으며, 다음의 라이센스를 따릅니다 :CC 저작자표시-비영리-동일조건변경허락 2.0
Recent changes RSS feed World Wide Web Consortium Driven by DokuWiki