CSS.07. Border

박스 모델의 방향

박스 모델은 테두리나 마진, 패딩 등을 지정할 때 상하좌우 4개의 여백을 똑같이 지정하거나, 모두 다르게 지정 가능

상>우>하>좌 순으로 지정

 

border-style 속성

테두리 스타일 지정

>>기본값 none

>>속성값을 지정하지 않으면 테두리 관련 속성을 지정하더라도 화면에 표시되지 않음

 

border-style 속성값

none	테두리 : 기본값
hidden	테두리 감추기 표에서 border-collapse: collapse일 경우 다른 테두리도 표시​
solid	테두리를 실선으로 표시
dotted	테두리를 점선으로 표시
dashed	테두리를 짧은 직선으로 표시
double	테두리를 이중선으로 표시, border-width값 : 두 선 사이의 간격
groove	테두리를 창에 조각한 것처럼 표시, 홈이 파인 듯한 입체 느낌
inset	표에서 border-collapse: seperate일 경우 → 전체 박스 테두리가 창에 박혀 있는 것 처럼 표시 표에서 border-collapse: collapse일 경우 groove와 똑같이 표시
outset	표에서 border-collapse: collapse일 경우 → 전체 박스 테두리가 창에서 튀어나온 것처럼 표시 표에서 border-collapse: collapse일 경우 ridge와 똑같이 표시
ridge	테두리를 창에서 튀어나온 것처럼 표시

 

border-width 속성

테두리 두께 지정

border-width: <크기> | thin | medium | thick

상하좌우 4개 방향의 테두리를 한꺼번에 지정 가능

 

border-color 속성

테두리 색상 지정

상하좌우 4개 방향의 테두리 색을 한번에 지정 가능

 

border 속성

테두리 스타일을 묶어 지정하는 속성(순서 상관 없음)

 

border-radius 속성

둥근 테두리를 만드는 속성

>> 박스 모델의 꼭짓점 부분에 원이 있다고 가정하여 둥글게 처리

border-radius: <크기> | <백분율>

 

border-radius 속성값

<크기>	반지름 크기를 px, em 단위와 함께 수치로 표시
<백분율>	현재 요소의 크기를 기준으로 비율(%) 지정

 

 

꼭짓점을 타원으로 만들기

가로 반지름과 세로 반지름 사이에 슬래시( / )를 넣어서 구분

border-radius: <가로 반지름> / <세로 반지름>;

 

특정 꼭짓점만 타원형태로 지정 : 슬래시 없이 가로 반지름, 세로 반지름을 지정

border-위치-radius: <가로 반지름> < 세로 반지름>;