2024-10-10
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 500px;
height: 300px;
border: 20px inset blue;
box-sizing: border-box;
}
</style>
</head>
<body>
<!--
border 속성
- 요소의 테두리 선을 지정 할 때 사용되는 속성.
- 형식) border : 선의 두께, 선의 종류, 선의 색상
- 개별적으로 사용하는 방법
* border-width : 테두리 선의 두께
* border-style : 테두리 선의 종류
* border-color : 테두리 선의 색상
- 사용법
* border-style (테두리 선의 종류)
- none : 테두리 선 없음.
- hidden : 테두리 선 없음.
- solid : 실선, 단선(일반적인 선).
- dotted : 점섬 (......)
- dashed : 파선 (------)
- doudle : 이중선 (=====)
- groove : 흠이 파여 있는 선.
- ridge : 솟은 모양의 선 (groove의 반대)
- inset : 요소 전체가 들어간 선.
- outset : 요소 전체가 나온 선.
-->
<div class="box"></div>
</body>
</html>
