티스토리 뷰

[개발]프로그래밍/css3

[css3] border-width - 테두리 두께 지정

좋은 블로그 2021. 4. 26. 10:01
1. 개념
border-width - 테두리 두께 지정
border-width는 테두리 두께를 지정하는 속성
border-top-width, border-right-width, border-left-width,border-bottom-width 등과 같이 각각으로 두께를 지정할 수 있음
아니면 border-width로 시계방향으로 위 → 오른쪽 → 아래 → 왼쪽으로 두께를 지정할 수도 있음
2. 태그
border-width
html5 코드
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<! DOCTYPE html>
<html lang = "kr" >
<head>
<meta charset = "utf-8" >
<title> 키보드와 하루 </title>
</head>
<style>
div
{
margin-top : 20px ;
width : 100px ;
height : 100px ;
display : inline-block ;
border-width : 1px ;
border-style : solid ;
}
</style>
<body>
1
<div style =' border-top-width : 3px ' ></div>
2
<div style =' border-bottom-width : medium ' ></div>
3
<div style =' border-left-width : 2px ' ></div>
4
<div style =' border-right-width : thick ' ></div>
5
<div style =' border-width : 3px 1px 5px medium ' ></div>
</body>
</html>
결과 화면
border-width 사용 예제
코드 설명
1
border-top-width : 3px ;
border-top-width는 top이라는 키워드에서 알 수 있듯이 테두리 위에 해당하는 두께를 지정합니다.
px 단위 숫자로 두께를 지정할 수 있고 thin , medium , thick와 같은 키워드를 이용해 두께를 지정할 수도 있습니다.
2
border-bottom-width : medium ;
border-bottom-width은 테두리에서 아래의 두께를 지정하는 속성입니다.
3
border-left-width : 2px ;
border-left-width은 테두리에서 왼쪽의 두께를 지정하는 속성입니다.
4
border-right-width : thick ;
border-right-width은 테두리에서 오른쪽의 두께를 지정하는 속성입니다.
4
border-width : 3px 1px 5px medium ;
위에 있는 속성을 따로 따로 설정하지 않고 지금처럼 border-width로 한번에 설정이 가능합니다.
top을 기준으로 시계방향으로 두께를 설정하는 것이기 때문에 top : 3px , right : 1px , bottom: 5px , left : medium을 한번에 설정 할 수 있는 것입니다.
저작자표시

'[개발]프로그래밍 > css3' 카테고리의 다른 글

[css3] border - 테두리 스타일 묶어 지정  (0) 2021.04.28
[css3] border-color - 테두리 색상 지정  (0) 2021.04.27
[css3] border-style - 테두리 스타일 지정  (0) 2021.04.23
[css3] display - 화면 배치 방법 결정  (0) 2021.04.22
[css3] width,height - 박스 모델의 너비와 높이  (0) 2021.04.21
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday