* 여백속성 (CSS에서는 여백의 종류가 2가지 padding, margin)
1. padding : 안쪽 여백, 크기변경 (크기가 달라짐)
2. margin : 바깥쪽 여백, 위치변경 (위치가 달라짐)
* 요소 정렬
레이아웃을 할 수 있는 요소는 2가지
- float, position -> 이 두가지로는 가운데 정렬이 불가
1. margin
- 여백속성
- 값이 auto인 경우 가운데 정렬 효과를 가짐 (margin:auto = margin:0 auto)
- 위/아래 여백은 0, 좌/우 여백은 동일
- width 속성과 같이 사용하여야 가운데 정렬을 할 수 있다
(wrap으로 선언하였을때 width속성을 선언하지 않을 경우 가시적으로는 가운데 정렬로 보이지 않게 된다
block레벨은 100%임으로 부모요소와 자식요소)
* Float (옆으로 나란히)
1. 지정된 요소를 띄우는 속성(1.5층)
2. 다른 요소에 영향 있음
3. left/right
4. 상위 요소의 크기를 초과하면 아래쪽으로 이동
(부모요소보다 커지면 아래로 이동-하위요소의 길이합은 부모요소를 초과 할수 없음)
5. 지정된 요소를 inline-block (inline인데 크기를 지정할 수 있음, 다른 컨텐츠도 올 수 있음)
6. 같은 부모에 있는 요소(형제)들에게만 적용
*clear
1. float 속성을 해제
2. left/right (clear left/clear right)/both(양쪽을 다 막을때 사용)
----------------------------실습내용------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
#wrap{
width:800px;
margin:0 auto
}
#header{
width:800px;
height:200px;
background-color:#f39;
}
#content{
width:800px;
height:450px;
background-color:#6ff;
}
#footer{
width:800px;
height:150px;
background-color:#ff6;
}
#content1, #content2, #content3{
height:300px;
}
#content1{
width:300px;
background-color:#fc9;
float:left
}
#content2{
width:300px;
background-color:#063;
float:left
}
#content3{
width:200px;
background-color:#ff3300;
float:right
}
#content4{
width:800px;
height:100px;
background-color:#ffff00;
clear:both
}
#content5{
width:800px;
height:50px;
background-color:#6633cc;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">Header</div> <!---div 블록레벨---div는 가운데 정렬 불가 align--->
<div id="content">
<div id="content1"> </div>
<div id="content2"> </div>
<div id="content3"> </div>
<div id="content4"> clear:both는 float 기능을 left, right 다 꺼버림</div>
<div id="content5"> </div>
</div>
<div id="footer">Footer</div>
</div>
</body>
</html>
'홈피관련글' 카테고리의 다른 글
| [130626]웹표준 7강 (0) | 2013.06.26 |
|---|---|
| [130619] 웹표준 5강 (0) | 2013.06.19 |
| [130617] 웹표준 4강 (0) | 2013.06.17 |
| [130614] 웹표준 3강 (0) | 2013.06.17 |
| [130612] 웹표준 2강 2교시 - 태그 (0) | 2013.06.12 |