catbook C:haevivin Front-end Developer

7. CSS 테두리 지정하기

» 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