4.6 div요소(Element)
기존 HTML5 이전에 div 요소는 웹 문서의 부분(섹션)을
정의하는데 사용되는 요소로 CSS를 이용하여 해당 부분에 대한 스타일을 적용하거나 해당 부분을 그룹화할
수 있었습니다.
HTML5에서는 div 요소 대신에 article,
aside, header, footer 등과 같은 새로운 요소가 등장하여 div 요소가
하던 일들이 세분화된 형태로 진행되고 있습니다.
따라서 HTML5에서는 div 요소 대신에 등장한
새로운 요소들로 구현할 수 없는 것들만 div 요소로 처리하는 것이 적당할 것입니다. 사용 형식은 다음과 같습니다.
<div>
텍스트, 사진, …
</div>
div 요소를 이용하여 해당 영역에 간단하게 스타일을 적용하는 예제를 하나 해봅니다. 메모장을 열어서 HTML5 문서의 기본적인 코드를 작성한 후 <body> … </body> 블록 안에 다음과 같이 코드를 작성합니다.
<body>
<div
style="background-color:orange;text-align:center">
<p>HTML5</p>
HTML5는 새로운 웹
개발의 기본...
</div>
<div
style="background-color:aqua;text-align:left">
<p>CSS3</p>
CSS3는 웹페이지의 디자인을 더욱 화려하고 아름답게 ...
</div>
</body>
2개의 div 요소를 이용하여 영역을 설정하고 해당 영역 안에 p요소와 텍스트 문자열로 컨텐츠를 작성하고 style 속성을 이용하여 첫 번째 div 요소 영역은 배경색이 오렌지(orange)색이고 텍스트의 정렬은 가운데 정렬하도록 처리합니다. 그 다음 두 번째 div 요소 영역에 대해서 배경색을 청록색(aqua)로 설정하도록 합니다. 작성이 완료되었으면 “divEx.html”로 저장한 후 IE9로 열어보면 다음과 같이 2개의 div 영역에 대해서 각각 스타일이 적용되어 나타납니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 HTML5 요소(Element)에 대한 부분을 그대로를 공개하는 것으로
본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
끝으로 책 한권 분량에 대한 목차(링크 포함)은 "http://fromyou.tistory.com/581"에서 다운로드 받아서 필요하신 학습을 하실 수 있으며 조금이나마 도움이 되셨으면 합니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 5.2 code 요소(Element) (0) | 2013.07.31 |
|---|---|
| 5. Text-level Elements (0) | 2013.07.31 |
| 4.5 figure, figcaption요소(Element) (0) | 2013.07.31 |
| 4.4 dl, dt, dd 요소(Element) (0) | 2013.07.31 |
| 4.3 li, ol, ul 요소(Element) (0) | 2013.07.31 |
