그림자 및 외곽선은 웹 요소에 시각적인 깊이와 강조를 주는 데 도움이 됩니다. CSS를 사용하여 그림자와 외곽선을 추가하고 스타일링하는 방법에 대해 알아보겠습니다.

그림자 추가하기

그림자는 box-shadow 속성을 사용하여 쉽게 추가할 수 있습니다. 아래는 기본 box-shadow의 구문입니다.

.element {
  box-shadow: h-shadow v-shadow blur spread color;
}

• h-shadow: 그림자의 수평 위치를 지정합니다.
• v-shadow: 그림자의 수직 위치를 지정합니다.
• blur: 그림자의 흐릿한 정도를 지정합니다.
• spread: 그림자의 확장 정도를 지정합니다.
• color: 그림자의 색상을 지정합니다.

예시:

.element {
  box-shadow: 3px 3px 5px 2px rgba(0, 0, 0, 0.5);
}

이렇게 하면 요소에 오른쪽으로 3px, 아래쪽으로 3px의 그림자가 5px의 흐릿함과 2px의 확장 정도로 추가되며 색상은 투명한 검은색입니다.

외곽선 스타일링

외곽선은 border 속성을 사용하여 스타일링할 수 있습니다. 아래는 기본 border의 구문입니다.

.element {
  border: border-width border-style color;
}

• border-width: 외곽선의 너비를 지정합니다.
• border-style: 외곽선의 스타일(실선, 점선 등)을 지정합니다.
• color: 외곽선의 색상을 지정합니다.

예시:

.element {
  border: 2px dashed #ff0000;
}

이렇게 하면 요소에 2px의 빨간색 점선 외곽선이 추가됩니다.

결론

그림자와 외곽선 스타일링은 웹 요소를 시각적으로 강조하는데 효과적인 도구입니다. 이러한 기술을 사용하여 웹 디자인을 더욱 풍부하고 독창적이게 만들 수 있습니다.

더 많은 정보는 MDN web docs에서 찾을 수 있습니다.