CSS Shadows
CSS Shadows: 웹 디자인에서 그림자 효과 사용하기
CSS Shadows는 웹 페이지에서 요소나 텍스트에 그림자를 적용해 입체감과 시각적인 강조 효과를 더할 수 있는 기능입니다. CSS에서 두 가지 그림자 속성을 사용할 수 있습니다:
box-shadow: 박스 요소에 그림자를 적용합니다.text-shadow: 텍스트에 그림자를 적용합니다.
각각의 속성 사용법과 다양한 예제를 통해 그림자를 적용하는 방법을 알아보겠습니다.
1. box-shadow: 요소에 그림자 적용하기
box-shadow 속성은 박스 모델에 해당하는 요소에 그림자를 추가할 때 사용됩니다. 버튼, 카드,
이미지 등의 요소에 그림자를 적용해 깊이감을 줄 수 있습니다.
box-shadow 기본 구문
box-shadow: [x-offset] [y-offset] [blur-radius] [spread-radius] [color];
- x-offset: 그림자의 수평 위치(오른쪽: 양수, 왼쪽: 음수).
- y-offset: 그림자의 수직 위치(아래: 양수, 위: 음수).
- blur-radius: 그림자의 흐림 정도.
- spread-radius: 그림자의 크기 확장 정도.
- color: 그림자의 색상.
기본 예시
.box {
width: 200px;
height: 200px;
background-color: lightgray;
box-shadow: 10px 10px 5px gray;
}
- x-offset: 10px: 그림자가 오른쪽으로 10px 이동.
- y-offset: 10px: 그림자가 아래로 10px 이동.
- blur-radius: 5px: 그림자를 흐리게.
- color: gray: 그림자의 색상을 회색으로 지정.
다양한 box-shadow 예제
1. 흐림 효과 없는 그림자
.box-no-blur {
width: 200px;
height: 200px;
background-color: white;
box-shadow: 10px 10px 0px black;
}
- blur-radius: 0: 그림자가 선명한 경계를 가집니다.
2. 흐린 그림자
.box-blur {
width: 200px;
height: 200px;
background-color: white;
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
}
- blur-radius: 20px: 그림자가 많이 퍼져 부드러운 효과를 냅니다.
- rgba(0, 0, 0, 0.5): 반투명한 검정색 그림자.
3. 내부 그림자 (inset)
box-shadow 속성에 inset 키워드를 추가하면 요소 내부에 그림자를 줄 수 있습니다.
.box-inset {
width: 200px;
height: 200px;
background-color: white;
box-shadow: inset 10px 10px 20px rgba(0, 0, 0, 0.5);
}
- inset: 그림자가 요소 내부에서 적용되어 안쪽으로 패인 것 같은 효과를 줍니다.
다중 그림자
여러 개의 그림자를 한 요소에 적용할 수 있습니다. 그림자를 쉼표로 구분해 나열하면 됩니다.
.box-multiple {
width: 200px;
height: 200px;
background-color: white;
box-shadow: 5px 5px 10px red, -5px -5px 10px blue;
}
- 첫 번째 그림자는 빨간색으로 오른쪽 아래 방향으로.
- 두 번째 그림자는 파란색으로 왼쪽 위 방향으로 적용됩니다.
2. text-shadow: 텍스트에 그림자 적용하기
text-shadow 속성은 텍스트에 그림자를 적용해 입체감이나 강조 효과를 줄 수 있습니다.
text-shadow 기본 구문
text-shadow: [x-offset] [y-offset] [blur-radius] [color];
- x-offset: 그림자의 수평 위치.
- y-offset: 그림자의 수직 위치.
- blur-radius: 그림자의 흐림 정도.
- color: 그림자의 색상.
기본 예시
h1 {
text-shadow: 2px 2px 5px gray;
}
- 텍스트 그림자가 2px 오른쪽, 2px 아래로 이동하며, 흐림 효과가 5px 적용됩니다.
다양한 text-shadow 예제
1. 흐림 없는 텍스트 그림자
h2 {
text-shadow: 2px 2px 0 black;
}
- blur-radius: 0: 그림자가 선명하게 나타납니다.
2. 반투명한 텍스트 그림자
h3 {
text-shadow: 4px 4px 10px rgba(0, 0, 0, 0.7);
}
- rgba(0, 0, 0, 0.7): 70% 투명도를 가진 검정색 그림자가 적용됩니다.
3. 다중 텍스트 그림자
p {
text-shadow: 1px 1px 2px red, -1px -1px 2px blue;
}
- 첫 번째 그림자는 빨간색, 두 번째 그림자는 파란색 그림자가 각각 다른 방향으로 적용됩니다.
실전 예시: CSS Shadows를 활용한 다양한 디자인
1. 버튼에 그림자 적용
.button {
padding: 10px 20px;
background-color: lightblue;
border: none;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}
이 예시에서는 lightblue 버튼에 흐림 효과가 적용된 그림자가 추가되어 버튼이 떠 있는 듯한 느낌을 줍니다.
2. 카드 디자인에 그림자 적용
.card {
padding: 20px;
background-color: white;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
이 카드 디자인은 흰색 배경에 부드러운 그림자를 추가해 입체감 있는 카드 요소를 만듭니다.
3. 텍스트에 강조 그림자 적용
.title {
font-size: 48px;
color: darkblue;
text-shadow: 3px 3px 5px lightgray;
}
이 제목 텍스트에는 회색 그림자가 적용되어 텍스트가 더욱 강조되고 뚜렷해 보입니다.