[지식루프의 웹개발공부] CSS의 border

CSS에서 border는 HTML 요소의 경계(테두리)를 정의하는 속성입니다. border는 요소의 외곽에 적용되며, 스타일, 두께, 색상을 지정할 수 있습니다. 주요 구성 요소는 다음과 같습니다:

1. border-width: 테두리의 두께를 설정합니다. 두께는 픽셀(px), 포인트(pt), 백분율(%) 등으로 지정할 수 있으며, thin, medium, thick 등의 값도 사용할 수 있습니다.
   • 예: border-width: 2px;
2. border-style: 테두리의 스타일을 설정합니다. 가능한 값은 다음과 같습니다:
   • solid: 실선
   • dashed: 점선
   • dotted: 점선 (작은 점들)
   • double: 이중선
   • groove: 입체적인 홈이 파인 효과
   • ridge: 입체적인 돌출 효과
   • inset: 요소가 눌려 들어간 듯한 효과
   • outset: 요소가 튀어나온 듯한 효과
   • none: 테두리 없음
   • 예: border-style: solid;
3. border-color: 테두리의 색상을 지정합니다. 색상은 이름(red), HEX 코드(#ff0000), RGB(rgb(255, 0, 0)), RGBA(rgba(255, 0, 0, 0.5)) 등을 사용할 수 있습니다.
   • 예: border-color: blue;
4. border 단축 속성: border-width, border-style, border-color를 한 줄로 모두 설정할 수 있습니다.
   • 예: border: 2px solid black;

각각의 속성을 한 번에 지정할 수도 있으며, 요소의 상하좌우에 다른 테두리 스타일을 설정할 수 있습니다. 예를 들어 border-top, border-right, border-bottom, border-left와 같이 사용할 수 있습니다.

 

이 예에서는 .my-element라는 클래스를 가진 HTML 요소에 두께가 3px인 빨간색 점선 테두리가 적용됩니다.

 

[실제 적용 영상]