제16강_CSS 레이아웃기초

티스토리 뷰

Front-End-Web/html+css

제16강_CSS 레이아웃기초_박스모델이해

jsBae 2022. 10. 8. 00:25

1.box model 이해

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>css레이아웃 박스 모델 이해</title>
	<style>
    * {margin: 0px;padding: 0px;}
body {background: #eeeeee;}
div {width:500px;height:300px;
border:10px solid gray;
margin:10px;
padding: 10px;
}

    </style>
</head>
<body>
<h1>레이아웃 박스모델이해</h1>
<!--1.박스구조이해-->
<h2>box model 이해</h2>
<ul>
	<li>margin:바깥여백</li>
	<li>border : 경계선</li>
	<li>padding : 안쪽여백</li>
</ul>
<div>contents</div>
</body>
</html>

2.너비와 높이

3.경계선 다루기

<p class="box01">기본 테두리</p>
<p class="box02">분리 디자인</p>
<p class="box03">모서리가 둥근 스타일</p>
<p class="box04">보드스타일을 이용한 디자인</p>

.box01 {width:300px;padding:10px;margin:20px;border:5px solid gray;}
.box02 {width:300px;border-bottom:2px solid red;}
.box03 {border:1px solid gray;border-radius: 15px;padding:10px;}
.box04 {padding:10px;margin:10px;border-left:5px solid #0000ff;background: #ccccff;}