반응형
CSS의 box-shadow 및 text-shadow 속성은 그림자 효과를 추가하여 요소나 텍스트를 시각적으로 강조하거나 입체감을 부여하는 데 사용됩니다. 각각의 속성에 대해 간략히 설명하겠습니다.
1. box-shadow
- 요소에 그림자를 추가하는 속성입니다.
box-shadow: offset-x offset-y blur-radius spread-radius color;각 매개변수:
- offset-x: 그림자의 x축 위치. (양수는 오른쪽, 음수는 왼쪽)
- offset-y: 그림자의 y축 위치. (양수는 아래쪽, 음수는 위쪽)
- blur-radius: 그림자의 흐림 정도. (값이 클수록 더 흐릿해짐, 기본값: 0)
- spread-radius: 그림자의 크기 확장 정도. (양수는 확장, 음수는 축소, 기본값: 0)
- color: 그림자의 색상.
- inset (선택): 그림자를 내부로 적용.
예제 :
div {
width: 200px;
height: 100px;
background: lightblue;
box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);
}결과: 요소 오른쪽 아래로 그림자가 생김.
2. text-shadow
- 텍스트에 그림자를 추가하는 속성입니다.
text-shadow: offset-x offset-y blur-radius color;각 매개변수:
- offset-x: 그림자의 x축 위치.
- offset-y: 그림자의 y축 위치.
- blur-radius: 그림자의 흐림 정도 (기본값: 0).
- color: 그림자의 색상.
예제 :
p {
font-size: 24px;
color: black;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}결과: 텍스트에 그림자가 적용되어 강조 효과를 냄.
3. 예제: box-shadow와 text-shadow 함께 사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.box {
width: 300px;
height: 150px;
background: #fff;
margin: 50px auto;
text-align: center;
line-height: 150px;
font-size: 24px;
font-weight: bold;
color: darkblue;
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.4);
text-shadow: 2px 2px 4px rgba(0, 0, 255, 0.5);
}
</style>
</head>
<body>
<div class="box">Shadow Effects</div>
</body>
</html>위 코드를 실행하면 box-shadow와 text-shadow가 조화를 이루어 박스와 텍스트에 그림자가 적용된 결과를 볼 수 있습니다.
참고 사항
1. "box-shadow"는 블록 요소에 주로 사용되고, "text-shadow"는 텍스트 관련 요소에 사용됩니다.
2. 여러 그림자를 쉼표로 구분하여 추가할 수도 있습니다
box-shadow: 2px 2px 4px rgba(0,0,0,0.3), -2px -2px 4px rgba(0,0,0,0.2);
반응형
'HTML&CSS' 카테고리의 다른 글
| HTML, CSS, JavaScript를 활용한 뮤직플레이어를 만들어보자. (2) (0) | 2025.01.13 |
|---|---|
| HTML, CSS, JavaScript를 활용한 뮤직 플레이어 만들기 (1) (1) | 2025.01.13 |
| CSS img 속성을 알아보자. (1) | 2024.12.31 |
| CSS a속성에 대해 알아보자. (1) | 2024.12.27 |
| CSS 속성별 예제 및 설명 (0) | 2024.12.24 |
