css border

border는 선택된 태그의 테두리선을 지정하는 css 입니다.

 

borderdml 기본속성은

 

boder border-width(두께) border-style(선의종류) border-color(선의색상) 순으로 설정을 합니다.

 

ex) border : 1px solid black;

 

border-width을 4방향 모두 두께를 다르게 설정해줄 수 있습니다.

 

단위는 px, em, cm 등을 사용할 수 있는데 보통 px 단위를 많이 사용합니다.

 

입력값을 4가지 입력하면 순서대로 위, 우, 아래, 좌의 두께를 설정할 수 있습니다.

입력값을 3가지 입력하면 순서대로 위, (좌, 우) 아래의 두께를 설정할 수 있습니다.

입력값을 2가지 입력하면 순서대로 (위, 아래) (좌, 우)의 두께를 설정할 수 있습니다.

입력값을 1가지 입력하면 순서대로 (위, 우, 아래, 좌)의 두께를 설정할 수 있습니다.

 

<두께>

border-width : 위 우 아래 좌; (border-width: 1px 2px 3px 4px;)

border-width : 위 (좌, 우) 아래; (border-width: 1px 2px 3px;)

border-width : (위, 아래) (좌, 우); (border-width: 1px 2px;)

border-width : (위, 아래, 좌, 우); (border-width: 1px;)

 

<선의 종류>

border-style : 위 우 아래 좌; (border-style: solide dotted dashed double;)

border-style : 위 (좌, 우) 아래; (border-style: solide dotted dashed;)

border-style : (위, 아래) (좌, 우); (border-style: solide dotted;)

border-style : (위, 아래, 좌, 우); (border-style: solid;)

 

border-style은 기본값은 none 이기때문에 스타일을 지정해주어야 화면에 표시가 됩니다.

 

속성값

none // 없음

hidden // 숨기기

solide // 실선

dotted // 점선

dashed // 파선

double // 두 줄

groove // 홈이 파여있는 선

ridge // 솟은 모양

inset // 전체가 들어간 모양

outset // 전체가 나온 모양

 

<색상>

border-color : 위 우 아래 좌; (border-color: red orange #aaa rgba(255, 255, 255, 0.5)

border-color : 위 (좌, 우) 아래; (border-color: red orange #bbb;)

border-color : (위, 아래) (좌, 우); (border-color: red #ccc;)

border-color : (위, 아래, 좌, 우); (border-color: red;)

 

<box-sizing>

요소의 크기 계산기준을 지정해 줍니다.

content-box // width, height 만으로 크기를 계산

border-box // width, height에 padding과 border두가지 값을 포함하여 크기를 계산