HTML div 태그 사용법
안녕하세요 열코입니다.
이번시간에는 html의 div 태그에 대해 알아보도록 하겠습니다.
div 태그는 Division(분할, 나누기)태그로 알려져있으며 html에서 웹 페이지의 내용(텍스트, 이미지, 머리글 등)을 구분하는데 사용됩니다.
div 태그에는 열기(<) 및 닫기(>) 태그가 모두 있어야 하며 특정 데이터나 기능에 대한 섹션을 만들 수 있기 때문에 웹 개발에서 유용한 태그중 하나입니다.
div 태그는 블록 레벨 태그이며 일반 컨테이너 태그입니다.
html의 다양한 태그 그룹에 사용되며 섹션을 만들고 스타일을 적용할 수 있습니다.
css 레이아웃 및 div 태그의 기본 예제입니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <html> <head> <title>열코 div 테스트</title> <style type=text/css> div { color: white; background-color: #333333; font-size: 20px; } </style> </head> <body> <div> div 태그 </div> <div> div 태그 </div> <div> div 태그 </div> </body> </html> | cs |
실행 화면
div 태그안에 컨테이너 태그로 두개 이상의 html 요소를 넣을 수 있으며 함께 그룹화하여 css를 적용할 수 있습니다.
div 태그는 아래 예제에서 웹 페이지의 레이아웃을 만드는데 사용할 수 있습니다.
테이블 태그를 사용하여 만들 수 있지만 테이블 태그는 레이아웃을 수정하는데 매우 복잡합니다.
그러나 div 태그는 매우 유연하여 레이아웃 수정이 쉽습니다.
다음은 div 태그를 이용하여 html 요소를 그룹화한 레이아웃 예제입니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <html> <head> <title>열코 div 테스트</title> <style type=text/css> .leftdiv { float: left; } .middlediv { float: left; background-color:gray } .rightdiv { float: left; } div{ padding : 1%; color: white; background-color: 009900; width: 30%; border: solid black; } </style> </head> <body> <div class="leftdiv"> <h1>열코1</h1> <p>열코의 프로그래밍 일기</p> </div> <div class="middlediv"> <h1>열코2</h1> <p>열코의 프로그래밍 일기</p> </div> <div class="rightdiv"> <h1>열코3</h1> <p>열코의 프로그래밍 일기</p> </div> </body> </html> | cs |
실행 결과
다음과 같은 방법으로 css를 사용할 수 있습니다.
1. 클래스 사용
내부 css또는 외부 css에서 특정 div에 클래스를 사용할 수 있습니다.
- 내부 css : <style> 요소 내 html의 <head> 섹션에 클래스 정의
- 외부 css : 별도의 css파일을 만들고 <link>를 사용하여 <head> 섹션에 포함
2. 인라인 css
div에서 직접 css를 사용할 수 있습니다.
이 방법은 클래스가 따로 필요하지 않고 모든 태그를 포함할 수 있으므로 컨테이너 태그로도 사용됩니다.
간단한 예제코드입니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <html> <head> <title> 열코 div 테스트 </title> </head> <body> <center> <div style="height:300px; width:500px; color:white; border:1px solid; background-color: 009900;"> <!--open tag of Div!--> <caption> <h1>div 인라인 css 테스트</h1> </caption> <h1>div 태그내에 css 스타일 정의 </h1> </div> </center> </body> </html> | cs |
실행결과
이상 'html div 태그 사용법'에 대해 알아보았습니다.
질문 사항은 모두 커뮤니티에서 받습니다. -> 커뮤니티 바로가기
메인 페이지로 이동하시면 더 많은 자료를 볼 수 있습니다.
'HTML, CSS, JS' 카테고리의 다른 글
| 자바스크립트 스크롤 멈춤 이벤트 (0) | 2019.04.07 |
|---|---|
| JavaScript String substring() Method : 자바스크립트 문자열 자르기 (0) | 2019.03.25 |
| css로 텍스트 ... 처리하기 - 고정, 가변 길이 element (0) | 2019.03.25 |
| Javascript에서 $ 기호는 뭘까? (1) | 2019.03.24 |
| [프론트엔드 개발자] ECMAScript란? (0) | 2019.03.20 |
| HTML에 CSS 적용하기 (0) | 2018.10.03 |
| Atom Editor 설치 (0) | 2018.10.01 |
| HTML 기본 문법 (3) | 2018.09.30 |
