[css] box-shadow 이해하기

웹 페이지 요소에 입체감을 더하고 시각적인 포인트를 줄 수 있는 box-shadow 속성

1. box-shadow 속성의 개념

• box-shadow 속성을 사용하면 HTML 요소를 감싸는 그림자 효과를 손쉽게 만들 수 있음.
• 그림자는 요소의 주변이나 내부에 표현하여 깊이감을 부여하거나 강조하는 데 유용

기본 구문:

box-shadow: [수평 거리] [수직 거리] [흐림 반경] [번짐 반경] [색상] [inset (선택 사항)];
box-shadow: 10px 10px 20px 5px black;
// 이 예시는 오른쪽과 아래로 10px씩 이동하고, 흐림 반경이 20px, 
// 번짐 반경이 5px인 검은색 그림자를 만듬

각 속성 값은 다음과 같은 의미를 가짐

• [수평 거리]
  • 그림자의 수평 오프셋을 지정.
  • 양수 값은 그림자를 오른쪽으로, 음수 값은 왼쪽으로 이동시킴
• [수직 거리]
  • 그림자의 수직 오프셋을 지정.
  • 양수 값은 그림자를 아래로, 음수 값은 위로 이동시킴.
• [흐림 반경]
  • 그림자의 흐림 정도를 지정.
  • 값이 클수록 그림자가 더 부드럽게 퍼짐.
  • 0으로 설정하면 그림자가 번지지 않고 선명하게 나타남.
• [번짐 반경]
  • 그림자의 크기를 확장하거나 축소.
  • 양수 값은 그림자를 더 크게 만들고, 음수 값은 더 작게 만듬.
  • 생략하면 0으로 처리.
• [색상]
  • 그림자의 색상을 지정.
  • CSS에서 사용할 수 있는 모든 색상 형식을 사용할 수 있음.
• inset (선택 사항)
  • 이 키워드를 사용하면 그림자가 요소의 외부가 아닌 내부에 그려짐

팁: box-shadow 속성을 시각적으로 쉽게 생성하고 미리 볼 수 있는 편리한 도구들이 있으며 다음 사이트에서 테스트 가능

🔗 CSS Box Shadow Generator

2. box-shadow 속성 사용해보기

2.1. 가장 기본적인 그림자 만들기

<div class="box"></div>

.box {
  width: 300px;
  height: 300px;
  background-color: blue;
  box-shadow: 5px 5px 20px 5px black;
}

이 코드는 파란색 div 요소의 오른쪽과 아래로 약간의 그림자를 드리워 입체감을 표현

2.2. 박스 내부에 그림자 만들기 (inset)

요소의 내부에서부터 그림자를 만들고 싶다면 box-shadow 속성 앞에 inset 키워드를 추가하면 됨

.box {
  width: 300px;
  height: 300px;
  background-color: blue;
  box-shadow: inset 5px 5px 20px 5px black;
}

이제 그림자가 파란색 박스 내부에서부터 시작되어 안쪽으로 드리워진 효과를 볼 수 있음

2.3. 여러 개의 그림자 겹쳐 만들기

box-shadow 속성은 여러 개의 그림자를 콤마(,)로 구분하여 동시에 적용할 수 있음. 이를 통해 더욱 복잡하고 흥미로운 그림자 효과를 만들 수 있음.

.box {
  width: 300px;
  height: 300px;
  background-color: blue;
  box-shadow: 5px 5px 10px black,
              10px 10px 20px yellow;
}

위 코드는 검은색 그림자와 노란색 그림자를 겹쳐서 표현.

그림자의 순서에 따라 위에 놓이는 그림자가 결정됨

네온 효과 예시

        width: 200px;
        height: 200px;
        background: #222;
        border-radius: 16px;
        box-shadow: 0 0 8px #00ffe7, 0 0 16px #00ffe7, 0 0 32px #00ffe7;