개념
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 100px;
margin: 15px;
text-align: center;
font-size: 20px;
line-height: 100px; /* height값과 동일한 값을 적용하면 텍스트를 상하 중앙 정렬할 수 있음 */
border-width: 5px; /* 테두리 굵기 */
}
#box1 { border-style: solid; } /* 실선 */
#box2 { border-style: dotted; } /* 점선 */
#box3 { border-style: dashed; } /* 짧은 점선 */
</style>
</head>
<body>
<div id="box1"> 실선 테두리 </div>
<div id="box2"> 점선 테두리 </div>
<div id="box3"> 점선 테두리</div>
</body>
</html>
HTML
복사