• 회원가입
  • 로그인
  • 구글아이디로 로그인

[style] HTML - <div> 태그 ★★★★★ - 영역 지정 (= 섹션 분할 = div태그 = 디브태그 = 디비전태그) (HTML5수정)</div>

목차

  1. <div> 예제 - 문서 영역 설정
  2. <div> 정의
  3. <div> 구문
  4. <div> 속성
  5. <div> 예제 - 2x2 테이블 만들기
  6. <div> 예제 - div 태그 특징 이해
  7. <div> 예제 - div 안 공백 특징
  8. 관련 CSS 좌표

 

<div> 예제 - 문서 영역 설정

 
<div style="color:blue">
  <h3>홈짱닷컴 (homzzang.com)</h3>
  <p>HTML CSS PHP JavaScript 무료 강의</p>
</div>

결과 보기
 

<div> 정의

 
의미 상 관련 없는 문서 영역 묶을 때 사용.

 


 
1. 
홈페이지 제작할 때 가장 자주 사용하는 태그 중 하나이며, 
최근엔 <div> 태그 이용해 <table>  레이아웃 대체 중임.
(∵ 영역 분할・섹션 지정이 <table>태그보다 훨씬 간단) 
 
2. 
<div> : 영역(division)의 약자
 
3. 
<div> 태그는 기본적으로 블럭요소 (Block Element : 한 줄 전체를 전부 차지하는 속성)라서 CSS 적용 없을 때는 <div> 태그 앞뒤로 줄바꿈되어 종렬로 정렬 됨. 
단, CSS 중 float 속성 이용해 옆으로 정렬 가능. 
 
4. 
<div> 태그는 홈페이지 레이아웃 (=기본틀) 위해서 CSS와 함께 자주 사용.
 
5. 
HTML5에서는 align 속성 더 이상 지원 X. (CSS 권장.)

6. 
시작 태그와 종료 태그로 구성
 
 

<div> 구문

[예전 방식]
 
<div 속성=속성값> 내용 </div> 
[주의]
HTML5 이전 버전 때 허용되었으나, HTML5에서는 CSS로 대체 됨.
즉, <div align=left>내용</div> 태그가 HTML5에서는 더 이상 지원 안됨.
따라서, HTML5에서는 <div style="text-align:left">내용</div>처럼 해야 함.

 


[권장 방식]
 
<div style="속성:속성값; 속성:속성값; ... "> 내용 </div>
 
[주의]
앞으로 이런 CSS 적용 형식으로 사용해야 함.또한, align 속성 역시 HTML5에서 지원 안 되므로 CSS 속성 중 text-align 속성을 이용해야 함. 왜냐하면, CSS엔 align 속성이란 것이 없기 때문임.
 
 

<div> 속성

 속성  속성값
 쓰임새 
 비고
 align
 left  
right
center
justify 
 left  : 왼쪽 정렬
right : 오른쪽 정렬
center : 중앙 정렬
justify : 좌우 균분 정렬 
 HTML5 X
<div>태그는 전역속성・이벤트속성 지원.
 

<div> 예제 - 2x2 테이블 만들기

 

<style>

*{margin:0; padding:0;}

 

/* float 이용 방법 */

.a{width:400px;}

.a div {

    width:50%; 

    height:100px; 

    line-height:100px;

    float:left; 

    background:yellow;

    outline:1px solid #000;

    box-sizing: border-box;

    text-align:center;

}

 

/* flex 이용 방법 */

.b{width:400px; display:flex; flex-wrap:wrap;}

.b div{

    flex-basis:50%; 

    height:100px;

    line-height:100px;

    background:tomato; 

    outline:1px solid #000;

    text-align:center;

}

</style>


<div class="a">

    <div>홈</div>

    <div>짱</div>

    <div>닷</div>

    <div>컴</div>

</div>

<div class="b">

    <div>홈</div>

    <div>짱</div>

    <div>닷</div>

    <div>컴</div>

</div>

 

결과보기

바트컨트롤 님 (210712) https://sir.kr/qa/421565
 

<div> 예제 - div 태그 특징 이해

 

<style>

/* 바깥 div 높이 설정 X 경우 */

#a {

    border:1px solid red;

}

#a div {

    border:1px solid blue;

    float:left;

    height:100px;

}

 

/* 바깥 div 높이 설정 O 경우 */

#b {

    border:1px solid red;

    height:50px;

    clear:both;

    margin-top:120px;

}

#b div {

    border:1px solid blue;

    float:left;

    height:100px;

}

</style>

 

<div id="a">

    <div>1</div>

    <div>2</div>

    <div>3</div>

    <div>4</div>

</div>


<div id="b">

    <div>1</div>

    <div>2</div>

    <div>3</div>

    <div>4</div>

</div>

 

결과보기


[위 코드 설명]

 

1.

#a 경우 높이 미설정으로 인해서 제대로 상자 구성 X

반면,

#b 경우 낮은 높이 설정 탓에 자식요소를 제대로 못 감쌈.

 

2.

그 결과, #a와 #b가 둘 다 블럭요소이지만,

$a의 자식요소와 #b의 자식요소가 옆으로 나린히 배치됨. 보기 ★

따라서, 

#a와 #b를  상하로 간격 두고 배치하려면 아래 속성 필요.

clear:both; /* 강제 줄바꿈 */

margin-top:120px; // #a의 자식요소 높이보다 큰 값을 줘야 함.

 

3. ★

#a와 #b를 제대로 상자 구실 하게 하려면 둘 다 각각에

overflow:hidden 또는 overflow:auto 속성 추가 필요.

이 경우, clear:both 속성은 불필요하게 되며,

#b에 margin-top:20px만 줘도 상하 간격 벌어지게 됨.

 


[예제] - 위 코드 해설을 적용한 경우

 

<style>

/* 바깥 div 높이 설정 X 경우 */

#a {

    border:1px solid red;

    overflow:auto

}

#a div {

    border:1px solid blue;

    float:left;

    height:100px;

}


/* 바깥 div 높이 설정 O 경우 */

#b {

    border:1px solid red;

    height:50px;

    margin-top:20px;

    overflow:auto;

}

#b div {

    border:1px solid blue;

    float:left;

    height:100px;

}

</style>

 

<div id="a">

    <div>1</div>

    <div>2</div>

    <div>3</div>

    <div>4</div>

</div>


<div id="b">

    <div>1</div>

    <div>2</div>

    <div>3</div>

    <div>4</div>

</div>

 

결과보기 

 

<div> 예제 - div 안 공백 특징

1. 링크 앞뒤에 글자 없는 경우, Enter키 쳐서 줄바꿈 해도 공백 안 생김.

 

<style>

div {display:inline-block; border:1px solid red;}

</style>

 

<div><a href="https://homzzang.com">홈짱닷컴</a></div>

 

<div>

    <a href="https://homzzang.com">홈짱닷컴</a>

</div>

 

결과보기


2. 링크 앞뒤로 글자 넣고 Enter 키 치면 링크 앞뒤로 공백 생김.

※ 주의: 링크 앞뒤로 공백 여러 개 넣어도 1개로 간주됨.

 

<style>

div {display:inline-block; border:1px solid red;}

</style>

 

<div>앞

<a href="https://homzzang.com">홈짱닷컴</a>

뒤</div>

 

결과보기

 

관련 CSS 좌표

 

CSS 레이아웃 속성 모음

https://homzzang.com/b/css-254

 

CSS 정렬/위치 속성 모음

https://homzzang.com/b/css-256

 

DIV 테이블 생성기

https://divtable.com/generator/

 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
intro HTML - 준비물 + 추천링크 (※ 사용중지・사용폐기 태그) 2
intro HTML - 태그 문법 ★
basic HTML - <!DOCTYPE> 태그 ★ - 문서타입 (= !doctype태그 = !doctype요소 = …
basic HTML - <html> 태그 ★ - HTML문서 (= html태그/html요소 = 에이치티엠엘태그/에이치티…
basic HTML - <body> 태그 ★ - 문서영역 (= 문서본문영역 = body태그/body요소 = 바디태그/바…
font HTML - <h1> ~ <h6> 태그 ★ - 문단제목글씨크기 (= 표제태그 = 단락제목글자크기 = h1태그…
basic HTML - <p> 태그 ★ - 글단락 (= 글문단 = p태그/p요소 = 피태그/피요소)
basic HTML - <br> 태그 ★ - 줄바꿈 (=br태그/br요소 = 비알태그/비알요소) ※ 한줄아래로 줄바꿈 …
basic HTML - <hr> 태그 - 주제 다른 문단구분선 (= hr태그 = hr요소 = 가로선 = 수평선 = 에이…
basic HTML - <!--주석 내용--> 태그 ★ - 주석 처리 ※ 스크립트 태그 안 주석 의미
intro HTML - IE조건부주석 ★ (= 익스주석태그 = 익스플로러 조건문)
formatting HTML - <acronym> 태그 - 두문자어 (= acronym태그 = acronym요소 = 애크로님태그…
formatting HTML - <abbr> 태그 - 축약어/두문자어 (= abbr태그 = abbr요소 = 어브르태그 = 어브리…
formatting HTML - <address> 태그 - 연락처 (= address태그 = address요소 = 어드레스태그)
font HTML - <b> 태그 ★ - 굵은글씨 (= b태그 = 비태그) ※ 볼드태그 / bold태그 / 글씨 긁…
formatting HTML - <bdo> 태그 - 텍스트출력방향 (= bdo태그 = bdo요소 = 글자방향 = 브도태그 = …
1/18
목록
찾아주셔서 감사합니다. Since 2012