08-2 테두리 스타일 지정하기

박스 모델을 사용해 웹 문서에 요소를 배치하려면 각 박스 모델의 크기와 여백, 테두리 스타일 등을 고려해야 함

특히 테두리 스타일은 점선인지 실선인지뿐만 아니라 테두리 두께와 색상을 지정할 수 있음.

또한 네 방향 모두 같은 테두리를 사용할 수도 있고 각각 다르게 사용할 수도 있음.

 

>>> 박스 모델의 방향 살펴보기

박스 모델의 4개의 방향을 가리키는 예약어를 미리 알아 두는 것이 좋음

박스 모델의 방향으로 맨 윗부분은 top, 오른쪽은 right, 아랫부분은 bottom, 그리고 왼쪽은 left

맨 위부터 시작해서 top -> right -> bottom -> left 처럼 시계 방향으로 순서를 기억해 두셈.

 

>>> 테두리 스타일을 지정하는 border-style 속성

테두리를 그리려면 가장 먼저 테두리 스타일의 속성값을 지정해야함

 

>>> 테두리 두께를 지정하는 border-width 속성

[기본형] border-width: <크기> | thin | medium | thick

 

>>> 테두리 색상을 지정하는 border-color 속성

 

>>> 테두리 스타일 묶어 지정하는 border 속성

 

>>> 둥근 테두리를 만드는 border-radius 속성

[기본형] border-radius: <크기> | <백분율>

 

>>> 꼭짓점마다 따로 둥글게 처리하기

 

!!! 알아두면 좋아요 !!! 

<<<꼭짓점을 타원으로 만들기>>>

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

특정한 꼭짓점만 타원 형태로 만들기

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