html/css 독학하기

코스 전체목록

닫기

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) 인터넷 익스플로러 모바일 오페라 모바일 사파리 모바일
기본적인 지원 지원 지원 지원 지원 지원

참고

댓글

댓글 본문
  1. engfordev
    안녕하세요 ^^
    1.설명 부분에서요..
    (저도 확실히 이해한 것은 아니라서, 일단 제 나름대로 이해한 대로 써 둡니다. 참고하시고 적절히 적용해주시면 감사드릴게요)
    CSS 스타일을 사용하기 위해 여러 개의 요소들을 하나로 묶어주려는 경우에 <div>요소를 사용할 수 있다. 이 때 <div>요소 안에 class나 id 속성을 사용한다. 또한 하나의 <div>요소 안에서는 lang과 같은 속성값이 공통적으로 적용되기 때문에, 이러한 이유로 <div>요소를 사용하기도 한다. <article>이나 <nav>등 내용의 의미와 관련있는 요소(저도 어찌 표현할지가.. ??)를 사용하는 것이 적절하지 않은 경우에만 <div> 요소를 사용하자.
    뒷 부분에 설명 추가해주셔서 감사요!
    <header>나 <footer>요소의 경우에는 링크 달아줘도 좋을 것 같네요 :)
    #lang 속성에 대해서 참고한 문서
    http://www.w3.org......a...
    2. 옷.. 예제도 한국어로 추가해 주셨네요~
    수고하셨습니다 ^^</footer></header></div></nav></article></div></div></div></div>
버전 관리
마법부리는곰
현재 버전
선택 버전
graphittie 자세히 보기