css에는 테두리 종류가 많다. 원하는 스타일을 골라 예쁘게 살을 붙이는데 사용하면 좋다.
또한 테두리 두께를 조절하는 border-witdth 와 border 색상을 바꾸는 border-color 도 있으니 적재적소에 사용하면 좋겠다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
div {
width : 100px; height:100px;
text-align : center;
}
#d1{border-style: dotted;}
#d2{border-style: dashed;}
#d3{border-style: solid;}
#d4{border-style: double;}
#d5{border-style: groove;}
#d6{border-style: ridge;}
#d7{border-style: inset;}
#d8{border-style: outset;}
#d9{border-style: none;}
#d10{border-style: hidden;}
#d11{border-style: dotted dashed solid double;}
.a{
border-style : solid;
border-color : red ;
}
</style>
</head>
<body>
<h3>테두리 제어 </h3>
<div id = "d1">d1 dotted 테두리</div>
<div id = "d2">d2 dashed 테두리</div>
<div id = "d3">d3 solid 테두리</div>
<div id = "d4">d4 double 테두리</div>
<div id = "d5">d5 groove</div>
<div id = "d6">d6 ridge테두리</div>
<div id = "d7">d7 inset 테두리</div>
<div id = "d8">d8 outset테두리</div>
<div id = "d9">d9 none테두리</div>
<div id = "d10">d10 hidden테두리</div>
<div id = "d11">d11 dotted dashed solid double 테두리</div>
<!-- 위 오른 아래 왼 순서 -->
<br/>
<div class = "a" style = "border-width:1px"> hidden </div>
<div class = "a" style = "border-width:2px"> hidden </div>
<div class = "a" style = "border-width:3px"> hidden </div>
<br/>
<br/>
<div style = "border : solid 4px blue"> hidden </div>
</body>
</html>[결과]
'Front > css' 카테고리의 다른 글
| Input type ="date" 사용시 placeholder 없애기 (0) | 2023.08.27 |
|---|---|
| [html, css] 홈페이지 따라 만들기 (0) | 2023.03.22 |
| [css] 웹 페이지의 살 붙이기 - button 이미지 넣기 (0) | 2023.03.22 |
| [css] 웹 페이지의 살 붙이기 - position (0) | 2023.03.22 |
| [css] 웹 페이지의 살 붙이기 - css파일로 불러오기 (0) | 2023.03.22 |
