Categories: CSS

CSS box-shadow 그림자 속성 알아보기

css

CSS box-shadow 그림자 속성

box-shadow 는 CSS에서 사용되는 속성 중 하나로, 요소에 그림자 효과를 추가하는 데 사용됩니다. box-shadow 속성을 사용하면 요소가 화면에서 떠 있는 듯한 입체적인 효과를 만들 수 있습니다.

CSS box-shadow 형식

box-shadow 는 다음과 같은 형식을 가지고 있습니다.

CSS

box-shadow: [horizontal offset] [vertical offset] [blur radius] [spread radius] [color];

CSS

여기서 각 값은 다음과 같습니다.

수평 오프셋(horizontal offset): 그림자의 수평 위치를 설정합니다. 음수 값은 그림자를 요소의 왼쪽으로, 양수 값은 오른쪽으로 이동시킵니다.
수직 오프셋(vertical offset): 그림자의 수직 위치를 설정합니다. 음수 값은 그림자를 요소의 위쪽으로, 양수 값은 아래쪽으로 이동시킵니다.
블러 반경(blur radius): 그림자의 흐림 정도를 나타냅니다. 값이 클수록 흐린 그림자가 생성됩니다. 0이면 흐리지 않은 선명한 그림자가 생성됩니다.
확산 반경(spread radius): 그림자의 확산 정도를 나타냅니다. 이 값을 설정하면 그림자의 크기가 증가하거나 감소합니다.
색상(color): 그림자의 색상을 지정합니다.

CSS box-shadow 예시

아래 예제들의 공통적인 HTML 과 CSS 코드 입니다.

HTML

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>box-shadow 예제</title>
  <style>
    .box {
      margin: 200px auto;
      text-align: center;
      line-height: 300px;
      background-color: orange;
      font-size: 50px;
      width: 300px;
      height: 300px;
      border: 2px solid black;
      /* 이곳에 box-shadow 속성 추가*/
    }
  </style>
</head>
<body>
  <div class="box">박스</div>
</body>
</html>

HTML

기본 그림자

기본 그림자를 표현해 보겠습니다.

CSS

box-shadow: 10px 10px 20px black;

CSS

기본적인 그림자 효과가 적용되었습니다.

왼쪽 위 그림자

값을 음수로 지정하여 왼쪽 위로 그림자를 표현해 보겠습니다.

CSS

box-shadow: -10px -10px 20px black;

CSS

음수의 값으로 왼쪽 위에 그림자를 적용하였습니다.

선명한 그림자

블러 반경(blur radius)의 값을 0으로 주어 선명한 그림자를 표현해 보겠습니다.

CSS

box-shadow: 10px 10px 0px 0px black;

CSS

블러 반경(blur radius)의 값을 0으로 주면 이처럼 선명한 그림자를 표현합니다.

큰 그림자, 색상 변경

그림자의 확산 반경(spread radius)을 키우고 색상을 변경해 보겠습니다.

CSS

box-shadow: 10px 10px 20px 10px blueviolet;

CSS

그림자의 색상을 변경하고, 확산 반경을 넓혀 보았습니다.

결론

box-shadow는 CSS에서 사용되는 속성으로, 웹 요소에 그림자 효과를 부여하는 데 활용됩니다. 이 속성은 요소를 화면에서 떨어져 있는 듯한 3D 효과를 주거나, 요소 간의 계층 구조를 더 잘 강조하는 데 사용됩니다. box-shadow의 다양한 매개변수를 통해 그림자의 위치, 크기, 흐림 정도, 확산 정도, 그리고 색상을 조절 하여 다양한 스타일의 그림자를 만들 수 있습니다. box-shadow를 적절히 활용하면 웹 페이지의 디자인을 더욱 동적이고 매력적으로 표현할 수 있습니다.

suover