웹 디자인에서 그림자 효과는 요소를 돋보이게 하거나 깊이를 표현하는 데 사용됩니다. CSS는 box-shadow와 text-shadow 속성을 통해 간단하면서도 강력한 그림자 효과를 제공합니다. 이 글에서는 그림자 효과의 기본부터 고급 활용법까지 단계적으로 알아보겠습니다.
1. CSS 그림자 효과의 종류
CSS에서는 두 가지 주요 그림자 효과를 사용할 수 있습니다:
1. Box-Shadow: 요소의 박스 외곽에 그림자를 추가합니다.
2. Text-Shadow: 텍스트에 그림자를 추가합니다.
2. Box-Shadow
2-1. Box-Shadow 기본 문법
box-shadow: [수평 거리] [수직 거리] [흐림 반경] [확산 반경] [색상];
속성 설명
수평 거리 그림자의 X축 위치. 양수: 오른쪽, 음수: 왼쪽.
수직 거리 그림자의 Y축 위치. 양수: 아래쪽, 음수: 위쪽.
흐림 반경 그림자의 흐림 정도. 값이 클수록 부드러움.
확산 반경 그림자의 크기를 확장 또는 축소. 음수: 축소, 양수: 확장.
색상 그림자의 색상. HEX, RGB, HSL, 또는 이름 사용 가능.
2-2. Box-Shadow 예제
.box {
width: 200px;
height: 100px;
background-color: #007bff;
box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);
}
결과: 요소 오른쪽 아래로 흐린 검정색 그림자가 표시됩니다.
2-3. 여러 개의 Box-Shadow
쉼표로 구분해 여러 그림자를 적용할 수 있습니다.
.box {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2), -5px -5px 10px rgba(255, 255, 255, 0.5);
}
결과: 요소에 두 개의 그림자가 표시됩니다. 하나는 오른쪽 아래, 다른 하나는 왼쪽 위.
3. Text-Shadow
3-1. Text-Shadow 기본 문법
text-shadow: [수평 거리] [수직 거리] [흐림 반경] [색상];3-2. Text-Shadow 예제
.text {
font-size: 24px;
color: #333;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
결과: 텍스트 오른쪽 아래로 흐린 검정색 그림자가 나타납니다.
3-3. 여러 개의 Text-Shadow
.text {
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3), -2px -2px 2px rgba(255, 255, 255, 0.5);
}
결과: 텍스트에 두 방향으로 그림자가 적용됩니다.
4. 실전 예제: 그림자 효과로 카드 디자인 만들기
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 그림자 효과</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="card">
<h1 class="title">CSS 그림자 효과</h1>
<p class="description">box-shadow와 text-shadow로 요소를 더욱 돋보이게 만드세요.</p>
</div>
</body>
</html>
CSS
body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.card {
width: 300px;
padding: 20px;
background-color: white;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
transition: box-shadow 0.3s ease;
}
.card:hover {
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
.title {
font-size: 24px;
color: #333;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}
.description {
font-size: 16px;
color: #555;
}
결과: 카드 요소에 마우스를 올리면 그림자 효과가 더 강해져 입체감이 강조됩니다. 텍스트에는 부드러운 그림자가 추가되어 읽기 쉽게 만듭니다.
5. 그림자 효과 활용 팁
1. 자연스러운 색상 사용: 그림자의 색상은 요소와 배경 색상에 어울리는 자연스러운 톤을 선택하세요.
• 밝은 배경: 연한 회색 그림자.
• 어두운 배경: 부드러운 흰색 그림자.
2. 효과적 사용: 너무 많은 그림자를 추가하면 시각적 피로를 유발할 수 있습니다. 강조가 필요한 요소에만 그림자를 적용하세요.
3. Hover 효과 결합: box-shadow를 transition과 함께 사용해 사용자와의 상호작용을 강조하세요.
CSS의 box-shadow와 text-shadow는 간단한 코드로 웹 페이지를 시각적으로 풍부하게 만드는 데 강력한 도구입니다. 이 글에서 소개한 기본 사용법과 예제를 따라 실습하며 그림자 효과를 다양한 프로젝트에 응용해 보세요.
다음 글에서는 CSS 필터 효과와 배경 블러링 기법을 다룰 예정입니다.
