CSS 테두리는 HTML 구성 요소 주위의 테두리를 특성화하고 스타일을 지정하는 데 사용되는 주요 속성입니다. 테두리는 웹 사이트 구성에서 중요한 부분을 차지하며 분리, 강조 및 세련된 매력을 만드는 데 도움을 줍니다. CSS에서는 몇 가지 테두리 관련 속성을 활용하여 이러한 테두리의 스타일, 다양성, 크기 및 모양을 제어할 수 있습니다. 이 기사에서는 이러한 CSS 테두리 속성과 이를 실제로 활용하는 방법을 조사합니다.
CSS 테두리 속성
CSS 테두리 속성은 구성 요소 테두리의 스타일, 다양성, 너비, 밀물과 흐름을 결정하는 데 사용됩니다. 이러한 속성은 다음과 같습니다.
- 테두리 스타일
- 테두리 색상
- 테두리 너비
- 국경 반경
1) CSS 테두리 스타일
테두리 스타일 속성은 웹 페이지에 표시하려는 테두리 유형을 지정하는 데 사용됩니다.
테두리를 정의하기 위해 border-style 속성과 함께 사용되는 일부 테두리 스타일 값이 있습니다.
| 값 | 설명 |
|---|---|
| 없음 | 국경을 정의하지 않습니다. |
| 점이 찍힌 | 점선 테두리를 정의하는 데 사용됩니다. |
| 파선 | 점선 테두리를 정의하는 데 사용됩니다. |
| 단단한 | 실선 테두리를 정의하는 데 사용됩니다. |
| 더블 | 동일한 테두리 너비 값으로 두 개의 테두리를 정의합니다. |
| 홈 | 3D 홈이 있는 테두리를 정의합니다. 테두리 색상 값에 따라 효과가 생성됩니다. |
| 산등성이 | 3D 능선 테두리를 정의합니다. 테두리 색상 값에 따라 효과가 생성됩니다. |
| 삽입 | 3D 삽입 테두리를 정의합니다. 테두리 색상 값에 따라 효과가 생성됩니다. |
| 시초 | 3D 시작 테두리를 정의합니다. 테두리 색상 값에 따라 효과가 생성됩니다. |
예:
.border-example { width: 150px; height: 30px; margin: 10px; padding: 10px; } .dotted { border: 2px dotted #FFA500; } .dashed { border: 2px dashed #008000; } .solid { border: 2px solid #000; } .double { border: 4px double #FF0000; } .groove { border: 3px groove #3333FF; } .ridge { border: 3px ridge #660066; } .inset { border: 3px inset #006600; } .outset { border: 3px outset #990000; } Dotted Border Dashed Border Solid Border Double Border Groove Border Ridge Border Inset Border Outset Border 산출:
2) CSS 테두리 너비
border-width 속성은 테두리의 너비를 설정하는 데 사용됩니다. 픽셀 단위로 설정됩니다. 미리 정의된 세 가지 값(얇음, 중간, 두꺼움) 중 하나를 사용하여 테두리 너비를 설정할 수도 있습니다.
참고: border-width 속성은 단독으로 활용되지 않습니다. 작동하지 않는 다른 방식으로 테두리를 먼저 설정하기 위해 'border-style' 속성과 같은 다른 테두리 속성과 함께 지속적으로 활용됩니다.
/* CSS for different border widths */ .thin-border { border: 2px solid #FF0000; /* It is 2-pixel wide solid red border */ } .medium-border { border: 4px solid #00FF00; /* It is 4-pixel wide solid green border */ } .thick-border { border: 6px solid #0000FF; /* It is 6-pixel wide solid blue border */ } .custom-border { border: 3px dashed #FFA500; /* It is 3-pixel wide dashed orange border */ } <p class="thin-border"> Thin Border </p> <p class="medium-border"> Medium Border </p> <p class="thick-border"> Thick Border </p> Custom Border 산출:
3) CSS 테두리 색상
테두리 색상을 설정하는 방법에는 세 가지가 있습니다.
- 이름: 색상 이름을 결정합니다. 예를 들면 '빨간색'입니다.
- RGB: 색상의 RGB 값을 결정합니다. 예: 'rgb(255,0,0)'.
- 16진수: 색상의 16진수 값을 결정합니다. 예: '#ff0000'.
참고: border-color 속성은 단독으로 활용되지 않습니다. 작동하지 않는 다른 방식으로 테두리를 먼저 설정하기 위해 'border-style' 속성과 같은 다른 테두리 속성과 함께 지속적으로 활용됩니다.
예:
.my-element { width: 200px; height: 100px; border: 2px solid #333; /* The Initial border color is dark gray */ transition: border-color 0.5s; /* Adding a smooth transition effect */ } .my-element:hover { border-color: blue; /* This changes the border color to blue when hovering */ } Hover 산출:
