# Shadow
## 1. 개요
`shadow`는 텍스트나 요소에 그림자효과를 부여하기 위한 프로퍼티이다.
## 2. text-shadow
`text-shadow`는 글자에 그림자 효과를 주는 프로퍼티이다.
사용법 `text-shadow: offset-x offset-y blur-radius color | none | initial | inherit`
아래는 `text-shadow`의 프로퍼티 값의 설명이다.
| 프로퍼티 값 | 설명 | 생략 |
| ------------ | ------------------------------------- | --- |
| offset-x | 그림자를 텍스트의 오른쪽으로 지정값만큼 이동시킨다. | 불가능 |
| offset-y | 그림자를 텍스트의 아래로 지정값만큼 이동시킨다. | 불가능 |
| blur-radius | 그림자의 흐림정도를 지정한다. 지정값만큼 그림자가 커지고 흐려진다. | 가능 |
| shadow-color | 그림자의 색상을 지정한다. | 가능 |
```html
Hello World
Hello World
Hello World
Hello World
Hello World
Hello World
```
***
## 3. box-shadow
`box-shadow`는 선택한 요소에 그람자 효과를 만들어 준다.
사용법 `box-shadow: x-position y-position blur spread color | inset | initial | inherit`
아래는 `box-shadow`의 프로퍼티 값의 설명이다.
| 프로퍼티 값 | 설명 | 생략 |
| ---------- | ----------------------------------- | --- |
| x-position | 가로 위치, 양수면 오른쪽, 음수면 왼쪽에 그림자가 만들어진다. | 불가능 |
| y-position | 세로 위치, 양수면 아래쪽, 음수면 위쪽에 그림자가 만들어진다. | 불가능 |
| blur | 그림자를 흐릿하게 만든다. 값이 클수록 더욱 흐려진다. | 가능 |
| spread | 양수면 그림자를 확장하고, 음수면 축소한다. | 가능 |
| color | 그림자 색을 정한다. | 가능 |
| inset | 그림자를 요소의 안쪽에 만든다. | 가능 |
| inital | 기본값으로 설정한다. | 가능 |
| inherit | 부모 요소의 속성값을 상속받는다. | 가능 |
```html
Hello World
Hello World
Hello World
Hello World
Hello World
Hello World
```
***
## 참고
[CSS / text-shadow / 글자에 그림자 효과를 주는 속성](https://www.codingfactory.net/10650)\
[CSS / box-shadow / 박스에 그림자 효과 만드는 속성](https://www.codingfactory.net/10628)\
[poiemaweb 2-12 그림자](https://poiemaweb.com/css3-shadow)
***
[👆](#shadow)
📅 2022-07-21
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://noah-dev.gitbook.io/til/css/shadow.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.