○ border-width : 테두리의 두께 지정
테두리의 스타일(border-style)과 마찬가지 방식으로, 박스의 테두리의 두께도 지정이 가능합니다. 아래의 예시처럼 px과 같은 크기 값을 직접 입력하거나, 예약어를 통해서 두께를 지정할 수 있습니다.
선택자 {
border-width: [크기] | thin | medium | thick
}
참고로 border-style때와 마찬가지로, border-top | right | bottom | left-width와 같은 방식으로 위치에 따라 개별적인 속성 값 지정도 가능합니다. 하지만 아래에서 설명하는 방식으로 각 테두리의 두께 개별 지정도 간단하게 가능하니 확인해 보겠습니다.
우선 border-width에서 속성 값으로 최소 한 개, 최대 네 개(top, right, bottom, left)의 값을 지정이 가능할 것입니다. 여기에 몇 개의 속성 값을 작성하는지에 따라서 테두리 두께가 적용되는 방식이 달라지게 되죠. 다음과 같은 예시가 있다고 가정해 보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
border: 10px solid red;
width: 200px;
height: 100px;
}
#box1 {
border-width: 3px;
}
#box2 {
border-width: thin thick;
}
#box3 {
border-width: thick thin thin;
}
#box4 {
border-width: 20px 5px 5px 20px;
}
</style>
</head>
<body>
<div id="box1">박스 1입니다.</div>
<br>
<div id="box2">박스 2입니다.</div>
<br>
<div id="box3">박스 3입니다.</div>
<br>
<div id="box4">박스 4입니다.</div>
</body>
</html>
· 박스 1의 경우, 속성 값 1개만이 작성되었습니다. 이 경우 4개 방향 모두에 동일한 값이 자동으로 적용됩니다.
· 박스 2의 경우에는 thin, thick 두 개의 값이 작성되었습니다. 이럴 경우에는 처음의 thin은 top+bottom에 적용되고 두 번째 thick은 left+right에 동시 적용됩니다.
· 박스 3의 경우 think / thin / thin 세 개의 값이 입력되었습니다. 우선 순서대로 top, right, bottom에 적용됩니다. 그런데 left에 대한 값이 빠져있습니다. 이 경우, left는 마주 보고 있는 right의 속성을 그대로 사용하게 됩니다.
· 박스 4의 경우 네 개의 값이 모두 작성되어 있기 때문에 top, right, bottom, left의 순서대로 적용됩니다.
참고로 이렇게 일괄 적용된 값들의 경우 크롬 개발자 도구의 [Styles] 탭에서 border-width 요소에서 확인이 가능합니다. 예를 들어 2px 하나만 작성되어 있다면 화살표를 클릭해 border-top-width 형태로 개별 적용된 값을 직접 확인할 수 있습니다.
○ border-color: 테두리의 색상 지정
테두리의 생상 역시 간단하게 border-color 속성을 이용해 지정할 수 있습니다. 역시 네 개의 값을 이용해 각 방향의 컬러를 지정할 수도 있고, border-top | right | bottom | left-color 형식으로도 지정이 가능합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
border: 10px solid;
width: 200px;
height: 100px;
}
#box1 {
border-width: 3px;
border-color: blueviolet;
}
#box2 {
border-width: thin thick;
border-color: red black;
}
#box3 {
border-width: thick thin thin;
border-color: yellowgreen grey blue wheat;
}
#box4 {
border-width: 20px 5px 5px 20px;
border-top-color: brown;
border-left-color: purple;
}
</style>
</head>
<body>
<div id="box1">박스 1입니다.</div>
<br>
<div id="box2">박스 2입니다.</div>
<br>
<div id="box3">박스 3입니다.</div>
<br>
<div id="box4">박스 4입니다.</div>
</body>
</html>
'Programming > HTML+CSS' 카테고리의 다른 글
| [CSS] 3. 박스 모델(5) - 여백 속성(margin, padding) 1 (0) | 2023.04.12 |
|---|---|
| [CSS] 3. 박스 모델(4) - 테두리 스타일 3 (0) | 2023.04.12 |
| [CSS] 3. 박스 모델(4) - 테두리 스타일 1 (0) | 2023.04.09 |
| [CSS] 3. 박스 모델(3) - box shadow (0) | 2023.04.07 |
| [CSS] 3. 박스 모델(2) - 사이즈, 크기 지정 (0) | 2023.04.05 |
