색과 그라디언트만으로도 웹 페이지의 배경을 만들 수 있다. [[CSS]]가 색의 변화를 계산하므로 별도의 그림 파일을 준비하지 않아도 된다.
- **바탕색:** 그라디언트 아래에 단색 배경을 둔다. 배경 이미지 선언을 껐을 때도 글을 읽을 수 있는지 살핀다.
- **방향과 위치:** `linear-gradient()`에서 각도는 진행 방향을, 퍼센트는 색의 위치를 정한다. 색을 더하는 것과 색이 바뀌는 자리를 옮기는 것은 다른 편집이다.
- **읽는 면:** 배경 전체에서 글자의 대비가 일정하지 않다면 본문 뒤에 단색 면을 둘 수 있다. 분위기를 만드는 배경과 정보인 이미지를 구별한다.
## 한 파일로 확인하기
아래 전체 코드를 UTF-8 형식의 `example-03.html` 파일로 저장해 웹 브라우저에서 연다. 예제의 전시와 행사는 가상이다.
```html
이미지 없이 만드는 배경: 제작 예제
햇빛이 지나간 자리
가상의 전시 안내다. 배경은 색으로 만들고, 날짜와 장소는 글로 적는다.
2026년 11월 7일, 종이방. 이 일정은 제작 예제다.
```
`background-image` 한 줄을 지워 단색만 남겨도 안내가 읽히는지 확인한다. 작품 사진처럼 내용에 필요한 이미지는 [[대체 텍스트]]를 가진 HTML 이미지로 다루는 편이 적절하다. [[배경이 정보를 맡는 순간]]에는 색만으로 구분한 전시 구역 같은 사례를 살펴볼 수 있다.
## 참고
- [셰이 하우: 배경과 그라디언트](https://learn.shayhowe.com/html-css/setting-backgrounds-and-gradients/)
- [MDN: linear-gradient()](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/gradient/linear-gradient)
## 기타 등등
- CSS의 그라디언트는 색상 값이 아니라 이미지 값이다. `background-color` 자리에 그대로 넣을 수는 없다. [출처](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/gradient/linear-gradient)
- 서로 다른 두 색의 정지점을 같은 위치에 두면 부드러운 변화 대신 선명한 경계가 생긴다. [출처](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/gradient/linear-gradient)
#HTML #CSS #디자인