반응형
CSS border 속성 - 단축 속성
이전 페이지에서 보셨듯이 테두리를 다룰 때 고려해야 할 많은 속성이 있다.
코드를 단축하기 위해 하나의 속성에 모든 개별 테두리 속성을 지정할 수도 있다.
테두리 속성은 다음과 같은 개별 테두리 속성의 단축형 속성이다:
- border-width
- border-style(required)
- border-color
| <!DOCTYPE html> <html> <head> <style> p { border: 5px solid red; } </style> </head> <body> <h2>테두리 속성</h2> <p>이 속성은 테두리 너비, 테두리 스타일 및 테두리 색상에 대한 단축 속성입니다.</p> </body> </html> |
border 단축 속성에 5px, solid, red 를 한번에 스타일을 적용할 수 있다. 테두리 너비, 테두리 스타일, 테두리 색상을 순서대로 설정한다. 아래 그림은 실행 결과 화면이다.
또한 한 면에 대해 모든 개별 테두리 속성을 지정할 수 있다:
| <!DOCTYPE html> <html> <head> <style> p { border-left: 6px solid red; background-color: lightgrey; } </style> </head> <body> <h2>border-left 속성</h2> <p>이 속성은 테두리 왼쪽 너비, 테두리 왼쪽 스타일 및 테두리 왼쪽 색상의 단축 속성입니다.</p> </body> </html> |
위의 border-left에 (왼쪽 테두리에) 6px, solid, red 스타일을 적용하였고, 결과 화면은 아래 그림과 같다.
테두리 아래쪽 설정 예제이다.
| <!DOCTYPE html> <html> <head> <style> p { border-bottom: 6px solid red; background-color: lightgrey; } </style> </head> <body> <h2>border-bottom 속성</h2> <p>이 속성은 테두리-하단-폭, 테두리-하단 스타일 및 테두리-하단-색상에 대한 단축 속성입니다.</p> </body> </html> |
border-bottom 속성에(아래쪽 테두리에) 6px, solid, red 스타일을 적용하였고, 실행한 결과 화면은 아래 그림과 같다.
지금까지 CSS에서 css-border 속성 설정과 관련하여 간략히 살펴보았다.
꼭 실습하고 해당 속성을 익히기 바랍니다.
모두 화이팅입니다.!!!
반응형
'HTML > CSS문법' 카테고리의 다른 글
| CSS 여백(margin) (0) | 2023.07.18 |
|---|---|
| CSS 둥근 테두리 (0) | 2023.07.17 |
| CSS 테두리 측면 속성 설정 (0) | 2023.07.15 |
| CSS 테두리 너비(CSS border-width) (0) | 2023.07.14 |
| CSS border-color 속성 (0) | 2023.07.12 |
댓글