테두리와 그림자: 요소에 테두리와 그림자를 추가

웹 디자인에서 테두리(Border)와 그림자(Shadow)는 요소의 시각적 매력을 크게 향상시키는 중요한 역할을 합니다. 이들은 요소에 깊이와 구조를 부여하고, 디자인에 세련미를 더합니다. 다음은 테두리와 그림자에 관련된 상세한 CSS 속성들에 대한 설명입니다.

테두리(Border)

1. 테두리 스타일(Border Style):
   • border-style: 이 속성은 요소의 테두리 스타일을 지정합니다. 사용 가능한 값에는 solid (실선), dotted (점선), dashed (파선), double (이중선), groove (홈이 파인 듯한 모양), ridge (산맥처럼 솟은 모양), inset (내장된 듯한 모양), outset (돌출된 듯한 모양), none (테두리 없음), hidden (숨김)이 있습니다.
2. 테두리 너비(Border Width):
   • border-width: 테두리의 두께를 지정합니다. 단위는 픽셀(px), 포인트(pt), 엠(em), 뷰포트 폭(vw) 등 다양한 단위를 사용할 수 있습니다. 개별 테두리 (상, 우, 하, 좌)에 대해 서로 다른 두께를 지정할 수도 있습니다.
3. 테두리 색상(Border Color):
   • border-color: 테두리의 색상을 지정합니다. 색상은 이름, RGB, RGBA, HEX, HSL, HSLA 값 등을 사용하여 지정할 수 있습니다.
4. 테두리 단축 속성(Shorthand Property):
   • border: 스타일, 너비, 색상을 한 줄로 설정할 수 있습니다. 예: border: 1px solid black;는 검은색 1픽셀 실선 테두리를 만듭니다.
5. 테두리 둥글기(Border Radius):
   • border-radius: 요소의 모서리를 둥글게 만들어주는 속성입니다. 각 모서리를 개별적으로 설정할 수 있으며, 픽셀(px) 또는 백분율(%)로 지정할 수 있습니다.
6. 개별 테두리 설정(Individual Border Properties):
   • border-top, border-right, border-bottom, border-left: 각각 상단, 우측, 하단, 좌측 테두리를 개별적으로 설정할 수 있는 속성입니다.

그림자(Shadow)

1. 박스 그림자(Box Shadow):
   • box-shadow: 요소에 그림자를 추가하는 속성입니다. 이 속성은 수평 오프셋(horizontal offset), 수직 오프셋(vertical offset), 흐림 반경(blur radius), 확산 반경(spread radius), 색상(color)을 지정할 수 있습니다. 여러 그림자를 쉼표(,)로 구분하여 한 요소에 적용할 수도 있습니다.
2. 텍스트 그림자(Text Shadow):
   • text-shadow: 텍스트에 그림자 효과를 추가합니다. 이 속성은 수평 오프셋, 수직 오프셋, 흐림 반경, 색상을 지정할 수 있습니다.

CSS 속성 요약

• 테두리 관련: border-style, border-width, border-color, border, border-radius, border-top, border-right, border-bottom, border-left
• 그림자 관련: box-shadow, text-shadow