728x90
CSS 테두리 속성 설정하기 border
CSS 테두리는 대표적으로 총 세가지로
설정하는데 다음과 같다.
1. 테두리 굵기 (width)
2. 테두리 스타일 (style)
3. 테두리 색상 (color)
이를 설정하는 방법은 세가지 각각의 속성으로
설정하여도 되고 한번에 설정하여도 되는데
아래 기본 형태를 참고하자
기본 형태
//테두리 스타일 세가지 속성 각각 설정하는 경우
CSS Selector {
//원하는 테두리 굵기
border-width : 1px;
//원하는 테두리 스타일
border-style : solid;
//원하는 테두리 색상
border-color : grey;
}
//테두리 스타일 세가지 속성 한번에 설정하는 경우
CSS Selector {
//원하는 테두리 굵기, 스타일, 색상 순
border : 1px solid grey;
}샘플예제 HTML, CSS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>CSS 테두리 설정</title>
</head>
<body>
<div class="item box1"></div>
<div class="item box2"></div>
<div class="item box3"></div>
<div class="item box4"></div>
<div class="item box5"></div>
<div class="item box6"></div>
<div class="item box7"></div>
<div class="item box8"></div>
<div class="item box9"></div>
</body>
</html>.item {
width : 150px;
height: 20px;
border-width : 1px;
border-color : red;
margin : 5px;
}
.box1 {border-style: dotted;}
.box2 {border-style: dashed;}
.box3 {border-style: solid;}
.box4 {border-style: double;}
.box5 {border-style: groove;}
.box6 {border-style: ridge;}
.box7 {border-style: inset;}
.box8 {border-style: outset;}
.box9 {border-style: dotted dashed solid double;}출력 결과
728x90
'프론트엔드 > CSS' 카테고리의 다른 글
| [CSS] CSS Selector 선택자 우선순위 (0) | 2021.04.15 |
|---|---|
| [CSS] 폰트 크기 설정 font-size (0) | 2021.04.11 |
| [CSS] 모서리 모양 변경하기 border-radius (0) | 2021.04.03 |
| [CSS] 배경 색상 변경하기 background color (4) | 2021.04.03 |
| [CSS] 폰트 (문자) 색상 설정 하기 font color set (0) | 2021.04.02 |
댓글