7. CSS 테두리 지정하기
May 18, 2022
»
CSS
border
- 요소의 테두리 선을 지정
- 속성 값
- border-width : 선의 두께
- border-style : 선의 종류
- border-color : 선의 색상
- 사용법
- border: 두께 종류 색상;
.box {
border: 1px solid black;
}
border-width
- 사용법
- border-width: 위 우 아래 좌;
- border-width: 위 [좌, 우] 아래;
- border-width: [위, 아래] [좌, 우];
- border-width: [위, 아래, 좌, 우];
.box {
border-width: 10px 20px 30px 40px;
border-width: 10px 20px 40px;
border-width: 10px 40px;
border-width: 10px;
}
border-style
- 종류
- none : 선 없음
- hidden : 선 없음과 동일 (table 요소에서 사용)
- solid : 실선 (일반 선) ⭐
- dotted : 점선
- dashed : 파선 ⭐
- double : 두줄선
- groove : 홈이 파여있는 모양
- ridge : 솟은 모양 (groove의 반대)
- inset : 요소 전체가 들어간 모양
- outset : 요소 전체가 나온 모양
- 사용법
- border-style: 위 우 아래 좌;
- border-style: 위 [좌, 우] 아래;
- border-style: [위, 아래] [좌, 우];
- border-style: [위, 아래, 좌, 우];
.box {
border-style: solid dotted double inset;
border-style: solid dotted inset;
border-style: solid inset;
border-style: solid;
}
border-color
- 색상 이름으로 지정 : black, white, yellow, red, …
- 색상 코드로 지정 : #000000, #ffffff, #fff200, #ff0000, …
- 투명한 선 : transparent