div

설명

The Document Division (<div>) HTML element is generic container for flow content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang. It should be used only when no other semantic element (such as <article> or <nav>) is appropriate.

(저도 확실하게 이해한 것은 아니라서 제 나름대로 이해한대로 써두겠습니다. 참고하시고 적절히 적용해주시면 감사드릴게요)

문서나눔 요소인 <div>는 여러개의 요소를 하나로 묶어 주려는 경우에 사용하는 요소이다. 실제로 <div>태그를 사용했을 때에는 아무것도 표현되지 않는다. 실제로 <div>는 CSS에서 디자인 했을 때 그 진가가 발휘된다. 그를 위해서 요소들을 <div> 요소로 묶어서 구성한다. 또한 하나의 <div>요소 안에서는 lang과 같은 언어 속성값이 공통적으로 적용되기 때문에 <div>를 사용하기도 한다. <div>요소는 특정한 의미적 요소(<article>이나 <nav>와 같은)가 아닐 때 사용한다. 다시 말해서, HTML4 버전 때까지만 해도 <article>이나 <nav>같은 요소 대신에 <div>를 사용했지만, HTML5 버전부터 <div>대신 특정한 의미적 요소인 <article>이나 <nav>요소를 사용한다. 덧붙여, HTML 태그 초기에는 <table>요소를 이용해서 레이아웃을 구성하기도 했는데 웹 표준이 대두되면서 <div>의 중요도가 높아졌다. 현재는 많은 페이지들이 <div>요소를 이용해서 레이아웃을 구성하고 있지만, 더 나아가 HTML5에서 <header>나<footer>등의 특정한 요소가 생겨나면서 다시 <div>의 역할이 세분화되고 있다.

Usage Context

Permitted content	Flow content
Tag omission	None, must have both a start tag and an end tag.
Permitted parent elements	Any element that accepts flow content.
Normative document	HTML 5, section 4.5.13; HTML 4.01, section 7.5.4

속성

이 엘리먼트는 전역속성을 지원한다.

align - HTML5에서 폐지됨

예제

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

    <div id="contents" class="article">  
	<h1>생활 코딩 공동 번역</h1>
      <p>생활코딩 공동번역은 쉽게 알아들을 수 있도록 의역하여 번역을 진행하고 있습니다.</p>  
    </div>  

DOM Interface

This element implements the HTMLDivElement interface.

호환성

Desktop

기능	구글크롬	파이어폭스Gecko)	인터넷 익스플로러	Opera	Safari
기본적인 지원	1.0	지원	지원		지원

Mobile

기능	안드로이드	파이어폭스 모바일(Gecko)	인터넷 익스플로러 모바일	오페라 모바일	사파리 모바일
기본적인 지원	지원	지원	지원	지원	지원

참고

• 원본 - https://developer.mozilla.org/en/HTML/Element/div
• Semantic sectioning elements:  <section>, <article>, <nav>, <header>, <footer>
• <span> element for styling of phrasing content