[DEV] CSS 속성 3 (border)

 border: 선-두께 선-종류 선-색상; 

-> 요소의 테두리 선을 지정하는 단축 속성

 

border : 요소의 크기가 커짐

선-두께 : border-width

선-종류 : border-style

선 색상 : border-color

 

ex. border의 기본값

->  border: medium none black;

 

border-width : 요소 테두리 선의 두께

-> 개별 속성 이면서 단축 속성 (padding,margin과 같음)

기본값 : medium(중간 두께)

 

border-style : 요소 테두리 선의 종류

-> 개별 속성 이면서 단축 속성 (padding,margin과 같음)

- 기본값 : none (선 없음)

solid(실선)

dashed(파선)

 

border-color : 요소 테두리 선의 색상을 지정하는 단축 속성

-> 개별 속성 이면서 단축 속성 (padding,margin과 같음)

기본 값 : black(검정색)

transparent(투명색)

 

border-radius : 요소의 모서서리를 둥글게 깎음

- 기본값 : 0 (둥글게 없음)

- 단위 : px, em, vw 등 단위로 지정

border-radius: 0 0 0 0

(사각형 모서리의 왼쪽 상단부터 시계 방향으로 1,2,3,4)

 

css 색상 표현 방법

• 색상 이름 : 브라우저에서 제공하는 색상 이름 (ex red, tomato, royalblue)
• Hex 색상 코드 : 16진수 색상 (ex #000, #FFFFFF)
• RGB : 빛의 삼원색 (ex rgb(255, 255, 255)
• RGBA : 빛의 삼원색 + 투명도 (ex rgba(0, 0, 0, 0.5)

 

border 개별 속성

border-top: 두께 종류 색상;

border-top-width: 두께;

border-top-style: 종류;

border-top-color: 색상;

 

border-right: 두께 종류 색상;

border-right-width: 두께;

border-right-style: 종류;

border-right-color: 색상;

 

border-left: 두께 종류 색상;

border-left-width: 두께;

border-left-style: 종류;

border-left-color: 색상;

 

border-bottom: 두께 종류 색상;

border-bottom-width: 두께;

border-bottom-style: 종류;

border-bottom-color: 색상;