[CSS] 박스모델 (Box model)

노마딕 2020. 5. 1. 22:43

<html>
	<head>
		<meta charset="utf-8">
<title></title>
<style>
/*
block level element
*/
h1{
border-width:5px;
border-color:red;
border-style:solid;
display:inline;
display:none;
}

/*
inline element
*/
a{
border-width:5px;
border-color:red;
border-style:solid;
display:block;
}
</head>

<body>
<h1>WEB</h1>
</body>
</html>

CSS의 코드중복을 없앨 수 있다.

<html>
	<head>
		<meta charset="utf-8">
<title></title>
<style>
h1, a{
border:5px red solid;
}
</style>
</head>

<body>
<h1>WEB</h1>
</body>
</html>

박스모델을 본격적으로 살펴보자

<html>
	<head>
		<meta charset="utf-8">
<title></title>
<style>
h1{
border:5px red solid;
padding:20px;
margin:20px;
display:block;
width:100px;
}
</style>
</head>

<body>
<h1>WEB</h1>
</body>
</html>