<style type="text/css">
body{
margin:0; padding:0;}
div{
background-color: yellow;
width:300px;
padding:25px;
border:15px dotted navy;
margin:25px;
}
</style>
</head>
<body>
<p>CSS3 박스 모델은 content,padding,border,margin으로 구성되어 있다.</p>
<div>박스모델의 padding, border, margin 속성의 기본값은 0이며,<br>
상하좌우 네가지 방향을 top bottom left right 를 이용하여 지정할 수 있다.
</div>
3. Margin
<head>
<meta charset="UTF-8">
<title>ex10</title>
<style type="text/css">
.mp1{background-color:aqua; color:red; margin-bottom:100px; padding-left:50px;}
.mp2{background-color:silver; color:green; margin:20px; padding:10px 20px;}
.mp3{background-color:gray; color:purple; margin: 50px 15px 20px; padding:10px;}
</style>
</head>
<body>
<p>박스모델의 네 방향 여백지정</p>
<p class="mp1">mp1</p>
<p class="mp2">mp2</p>
<p class="mp3">mp3</p>
기본 값 (4개일 경우): top, right, bottom, left<br>
기본 값 (3개일 경우): top, right & bottom, left<br>
기본 값 (2개일 경우): top & right, bottom & left<br>
기본 값 (1개일 경우): top & right & bottom & left<br>
개별 위치 지정 : margin-top,extra.
</body>
4. 크기의 단위
<style type="text/css">
p{
background-color:yellow; color:red;
font-weight:bold; font-size:16px;
}
p.c1{width:300px; height:80px; color:green;}
p.c2{width:50%; height:50%; color:purple;}
p.c3{width:10cm; height:3cm; color:blue;}
div{width:50%;color:red;}
</style>
</head>
<body>
<p>박스모델의 내용 영역크기 지정</p>
<p class="c1">(1) c1: 박스 모델의 크기를 픽셀단위로 지정</p>
<p class="c2">(2) c2: 박스 모델의 크기를 퍼센트단위로 지정</p>
<p class="c3">(3) c3: 박스 모델의 크기를 센치단위로 지정</p>
<div>
<p class="c2">(2) c2: 박스 모델의 크기를 퍼센트단위로 지정</p>
</div>
<style>
body{ height: 1000px;}
.ps {
position: static; 기본값이기 위치지정요소의 영향을 받지 않는다.
left: 30px;
top: 30px;
background-color: cyan;
width: 400px;
height: 50px;
}
.pf {
position: fixed; (이 부분이 스크롤을 움직여도 따라다닌다.)
right: 40px;
top: 40px;
background-color: orange;
width: 400px;
height: 50px;
}
.pa {
position: absolute; 웹문서에 흐름과 상관 없이 고정됀 위치에 그대로 있는다.
right: 50px;
top: 10px;
background-color: lightgreen;
width: 400px;
height: 50px;
}
</style>
</head>
<body>
<h1>positioning style2</h1>
<p class="ps">정적 위치 설정 적용</p>
<div class="pf">고정 위치 설정</div>
<p class="pa">절대 위치 설정 적용</p>
<p class="ps">정적 위치 설정 적용</p>
<p class="ps">정적 위치 설정 적용</p>
고정 위치 : 창의 스크롤을 움직여도 사라지지 않고 고정된 위치에 그대로 있음.
<br> 절대 위치 : 웹 문서의 흐름과 상관없이 전체 페이지를 기준으로 배치
<br>
</body>
