border 굵기/ 종류/ 색상 ⇒ 파라미터가 3개
파라미터가 1개 이상일 때는 띄워쓰기로 구분함
기본 세팅하기
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div {
border: 3px solid skyblue;
background-color: aliceblue;
height: 50px;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
1) display : inline 사용하기
자기 크기만큼만 사이즈를 차지함
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div {
border: 3px solid skyblue;
background-color: aliceblue;
height: 50px; /* 높이 부여하기-> 높이만큼 늘어남*/
display: inline;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
2) display: block 사용하기
div처럼 한 줄을 다 차지하게 바뀜
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
span {
border: 3px solid skyblue;
background-color: aliceblue;
height: 100px;
width: 100px;
display: block;
}
</style>
</head>
<body>
<span>가</span>
<span>나</span>
<span>다</span>
<span>라</span>
<span>마</span>
</body>
</html>
Share article
