[css] 박스의 경계선 스타일 지정하기
CSS를 사용하면 HTML 요소 주위에 경계선을 추가하고 스타일을 지정할 수 있습니다. 박스의 경계선 스타일을 지정하기 위해서는 border
속성을 사용합니다.
border
속성
border
속성은 요소의 상, 하, 좌, 우에 경계선을 설정할 때 사용됩니다. 이 속성은 다음과 같은 세 가지 하위 속성으로 구성됩니다.
border-width
: 경계선의 두께를 지정합니다.border-style
: 경계선의 스타일을 지정합니다. (예: solid, dashed, dotted)border-color
: 경계선의 색상을 지정합니다.
예제
다음은 border
속성을 사용하여 경계선 스타일을 설정하는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 200px;
border-width: 2px;
border-style: dashed;
border-color: black;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
이 예제에서는 box
클래스를 가진 <div>
요소에 2픽셀 두께의 점선 스타일의 검정색 경계선이 추가됩니다.
이렇게 CSS의 border
속성을 사용하여 HTML 요소의 경계선 스타일을 지정할 수 있습니다.