border는 테두리에 대한 두께 , 색상 , 스타일을 한번에 지정할 수 있는 속성
두께 , 색상 , 스타일 순서는 상관이 없음
두께 , 색상 , 스타일 순서는 상관이 없음
티스토리 뷰
1. 개념
border - 테두리 스타일 묶어 지정
2. 태그
border
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
|
<!
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
:
1px solid #000
;
}
</style>
<body>
1
<div style
='
border-top
:
5px solid red
'
></div>
2
<div style
='
border-bottom
:
3px solid red
'
></div>
3
<div style
='
border-left
:
4px solid red
'
></div>
4
<div style
='
border-right
:
2px solid red
'
></div>
5
<div style
='
border
:
2px solid red
'
></div>
</body>
</html>
|
결과 화면
코드 설명
1
border-top-color
:
red
;
border-top-color는 테두리 위에 있는 색상을 지정합니다..
2
border-bottom-color
:
red
;
border-bottom-color는 테두리 아래에 있는 색상을 지정합니다.
3
border-left-color
:
red
;
border-left-color는 테두리서 왼쪽에 있는 색상을 지정합니다.
4
border-right-color
:
red
;
border-right-color는 테두리 오른쪽에 있는 색상을 지정합니다.
5
border-color
:
red
;
border-color 는 테두리 전체에 해당하는 색상을 지정합니다.
'[개발]프로그래밍 > css3' 카테고리의 다른 글
| [css3] border-shadow - 그림자 효과 내기 (0) | 2021.04.30 |
|---|---|
| [css3] border-radius - 모서리 둥글게 만드는 속성 (0) | 2021.04.29 |
| [css3] border-color - 테두리 색상 지정 (0) | 2021.04.27 |
| [css3] border-width - 테두리 두께 지정 (0) | 2021.04.26 |
| [css3] border-style - 테두리 스타일 지정 (0) | 2021.04.23 |
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday