목차
<div> 예제 - 문서 영역 설정 <div> 정의 <div> 구문 <div> 속성 <div> 예제 - 2x2 테이블 만들기 <div> 예제 - div 태그 특징 이해 <div> 예제 - div 안 공백 특징 관련 CSS 좌표
<div> 예제 - 문서 영역 설정
< div style="color:blue"> </div> 결과 보기
<div> 정의
의미 상 관련 없는 문서 영역 묶을 때 사용.
1.
홈페이지 제작할 때 가장 자주 사용하는 태그 중 하나이며,
최근엔 <div> 태그 이용해
<table> 레이아웃 대체 중임.
(∵ 영역 분할・섹션 지정이 <table>태그보다 훨씬 간단)
2.
<div> : 영역(division)의 약자
3.
<div> 태그는 기본적으로 블럭요소 단, CSS 중
float 속성 이용해 옆으로 정렬 가능.
4.
<div> 태그는 홈페이지 레이아웃 (=기본틀) 위해서 CSS와 함께 자주 사용.
5.
<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>
결과보기
<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/
