CSS CSS border 속성
페이지 정보
작성자 모던DS
조회 1회 작성일 26-02-26 02:57
조회 1회 작성일 26-02-26 02:57
본문
CSS border 속성
Border (테두리)
설명: 패딩과 마진 사이의 테두리 선입니다.
속성:
border-width,border-style,border-color로 스타일을 지정합니다.
border-style 속성
| 종류 | 설명 |
| none | 테두리가 없습니다. 기본값입니다. |
| hidden | 테두리를 감춥니다. border-collapse: collapse일 경우 다른 테두리도 표시되지 않습니다. |
| solid | 테두리를 실선으로 표시합니다. |
| dotted | 테두리를 점선으로 표시합니다. |
| dashed | 테두리를 짧은 직선으로 표시합니다. |
| double | 테두리를 이중선으로 표시합니다. 두 선 사이의 간격이 border-width값이 됩니다. |
| groove | 테두리를 창에 조각한 것처럼 표시합니다. 홈이 파인 듯 입체 느낌이 납니다. |
| inset | separate일 때 박스가 창에 박힌 듯 보이고, collapse일 때 groove와 똑같이 표시됩니다. |
| outset | separate일 때 박스가 창에서 튀어나온 듯 보이고, collapse일 때 ridge와 똑같이 표시됩니다. |
| ridge | 테두리를 창에서 튀어나온 것처럼 표시합니다. |
border-radius 속성 정리
| 속성값 | 설명 |
| <크기> | 둥글게 만들 반지름의 크기를 px, em 등의 단위로 지정합니다. |
| <백분율> | 요소의 너비와 높이를 기준으로 반지름을 백분율(%)로 지정합니다. |
사용법 및 특징
단축 속성: 네 모서리를 한 번에 지정하거나 각각 다르게 지정할 수 있습니다.
border-radius: 10px;(네 모서리 모두 10px)border-radius: 10px 20px 30px 40px;(왼쪽 위부터 시계 방향순)border-radius: 50%;(원형)
원 만들기: 정사각형 요소의
border-radius를 **50%**로 설정하면 완벽한 원이 됩니다.개별 속성: 특정 모서리만 조절하고 싶을 때 사용합니다.
border-top-left-radiusborder-top-right-radiusborder-bottom-right-radiusborder-bottom-left-radius
- 이전글CSS display 속성 - 위치 지정 26.02.26
- 다음글CSS 박스 모델(Box Model) 구성 요소 26.02.26