색과 그라디언트만으로도 웹 페이지의 배경을 만들 수 있다. CSS가 색의 변화를 계산하므로 별도의 그림 파일을 준비하지 않아도 된다.
- 바탕색: 그라디언트 아래에 단색 배경을 둔다. 배경 이미지 선언을 껐을 때도 글을 읽을 수 있는지 살핀다.
- 방향과 위치:
linear-gradient()에서 각도는 진행 방향을, 퍼센트는 색의 위치를 정한다. 색을 더하는 것과 색이 바뀌는 자리를 옮기는 것은 다른 편집이다. - 읽는 면: 배경 전체에서 글자의 대비가 일정하지 않다면 본문 뒤에 단색 면을 둘 수 있다. 분위기를 만드는 배경과 정보인 이미지를 구별한다.
한 파일로 확인하기
아래 전체 코드를 UTF-8 형식의 example-03.html 파일로 저장해 웹 브라우저에서 연다. 예제의 전시와 행사는 가상이다.
<!doctype html>
<html lang="ko">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>이미지 없이 만드는 배경: 제작 예제</title>
<style>
* { box-sizing: border-box; }
body { margin: 0; padding: 1rem; color: #202020;
background: #fff; font-family: sans-serif; line-height: 1.7; }
main { max-inline-size: 44rem; margin-inline: auto; }
h1 { font-size: 1.75rem; line-height: 1.3; }
a { color: #164d91; }
:focus-visible { outline: 3px solid #164d91; outline-offset: 4px; }
body { background-color: #f5f0e6;
background-image: linear-gradient(135deg, #f4dafa 0%, #e1f2fc 65%, #fff0c4 100%);
min-block-size: 100vh; }
article { margin-block: 2rem; padding: 1.5rem;
background: #fff; border: 1px solid #777; }
</style>
<main>
<article>
<h1>햇빛이 지나간 자리</h1>
<p>가상의 전시 안내다. 배경은 색으로 만들고, 날짜와 장소는 글로 적는다.</p>
<p>2026년 11월 7일, 종이방. 이 일정은 제작 예제다.</p>
</article>
</main>
</html>background-image 한 줄을 지워 단색만 남겨도 안내가 읽히는지 확인한다. 작품 사진처럼 내용에 필요한 이미지는 대체 텍스트를 가진 HTML 이미지로 다루는 편이 적절하다. 배경이 정보를 맡는 순간에는 색만으로 구분한 전시 구역 같은 사례를 살펴볼 수 있다.