배경 그림과 그러데이션

background-image는 상자 밑에 그림을 배경으로 깔고, background-size · background-position이 그 그림의 크기와 자리를, linear-gradient()가 두 색이 이어지는 그러데이션을 정합니다. CSS 파일 안 url()의 상대 주소는 HTML이 아니라 그 CSS 파일이 있는 폴더에서 출발합니다.

레시피 노트 머리에 음식 그림을 깔고 그 위에 제목을 올리면 페이지가 한결 살아납니다. 그런데 CSS 파일을 css/ 폴더로 옮기는 순간 배경 그림이 아무 표시 없이 사라지기도 합니다. 이 레슨은 배경 그림의 주소가 어디서 출발하는지와, 그림을 채우는 값 · 그러데이션을 봅니다.

그림 준비 중

1CSS 안 url()은 CSS 파일 폴더에서 출발한다

경로 읽기에서 상대 주소는 그 주소를 적은 파일이 있는 폴더에서 출발한다고 했습니다(브라우저 규칙 1). CSS 파일 안의 url()도 그 규칙을 따릅니다 — 주소를 적은 파일이 CSS 파일이니, 출발점은 CSS 파일 폴더입니다.

recipe-note/
  index.html
  css/
    style.css
  images/
    kimchi.svg

/* css/style.css */
.hero {
  background-image:
    url("images/kimchi.svg");
}

index.html의 img에 images/kimchi.svg라고 적으면 그림이 나옵니다. 같은 주소를 css/style.css 안에 적으면 출발점이 css/라 다른 파일을 찾습니다.

이 레슨의 결과 화면은 CSS를 페이지 안에 넣어 그립니다. 그래서 아래 예제의 url()은 index.html과 같은 폴더에서 출발합니다 — style.css가 index.html 곁에 있을 때와 같습니다.

2크기와 자리 — cover · contain · background-position

<div class="hero">김치볶음밥</div>

.hero {
  height: 150px;
  background-image:
    url("images/kimchi.svg");
  background-size: cover;
  background-position: center;
}

배경은 처음 값이 background-repeat: repeat⁠이라, 그림이 상자보다 작으면 같은 그림이 되풀이해 깔립니다. 한 번만 깔려면 no-repeat를 줍니다. 배경 그림은 꾸밈입니다. 화면 읽기 프로그램이 읽을 이름(alt)을 줄 자리가 없어, 뜻을 전하는 글은 상자 안 글로 둡니다 — 위 '김치볶음밥'처럼(브라우저 규칙 3).

3그러데이션 — linear-gradient()

그러데이션(gradient)은 한 색에서 다른 색으로 차츰 바뀌는 칠입니다 — 자료에 따라 그레이디언트라고도 부릅니다. linear-gradient()는 그림 파일 없이 그러데이션 그림을 만들어 background-image에 줍니다.

<div class="hero">
  오늘의 레시피
</div>

.hero {
  height: 120px;
  background-image:
    linear-gradient(
      #ffffff,
      #d6ecff
    );
}

위는 흰색, 아래로 갈수록 하늘색입니다. 방향을 적지 않으면 위에서 아래로 바뀝니다. url() · linear-gradient()처럼 이름 뒤 괄호 안에 값을 받는 꼴을 함수(function), 괄호 안에 쉼표로 가른 값 하나하나를 인자(argument)라 부릅니다. 선언이 한 줄에 들지 않아 함수 괄호 안에서 줄을 나눴습니다. 마지막 색 #d6ecff 뒤에는 쉼표를 쓰지 않습니다 — 끝 쉼표가 들면 CSS는 그 선언을 통째로 버려 그러데이션이 사라집니다(background-image가 none).

예제

레시피 노트 머리글

머리글에 옅은 하늘색 바탕을 칠하고, 오른쪽에 작은 음식 그림을 한 번만 둡니다.

<header class="site-header">
  <p>레시피 노트</p>
</header>

.site-header {
  padding: 16px;
  background-color: #d6ecff;
  background-image:
    url("images/kimchi.svg");
  background-size: 80px;
  background-position: right;
  background-repeat: no-repeat;
}

• 음식 그림은 너비 80px로 줄어 오른쪽에 한 번만 깔리고, 나머지는 하늘색 바탕입니다. 크기를 하나만 적으면 높이는 그림 비율대로(auto) 정해집니다.
• 색과 그림을 풀어 적은 속성으로 따로 적어, 한 줄이 다른 줄을 되돌리지 않습니다.
• 그림은 꾸밈이라 배경으로 두고, 사이트 이름은 머리글 안 글로 둡니다.

자주 틀리는 곳

틀린 생각: CSS 파일 안 url()도 HTML 파일 폴더에서 출발한다.

/* css/style.css */
.hero {
  background-image:
    url("images/kimchi.svg");
}

index.html에서 보면 맞는 주소 같지만, 이 주소를 적은 파일은 css/style.css라 css/images/kimchi.svg⁠를 찾습니다. 그런 파일이 없어 배경이 비고, 배경 그림은 깨진 표시조차 그리지 않아 오류를 알아채기 어렵습니다.

맞는 규칙: 상대 주소는 그 주소를 적은 파일의 폴더에서 출발합니다. css/ 안의 CSS에서는 ../images/kimchi.svg처럼 한 칸 올라갑니다.

틀린 생각: 뜻 있는 그림도 배경으로 깔면 된다.

<div class="photo"></div>
<img
  src="images/kimchi.svg"
  alt="김치볶음밥"
  width="200"
  height="150"
/>

.photo {
  height: 150px;
  background-image:
    url("images/kimchi.svg");
}

화면에는 그림이 둘 보이지만, 화면 읽기 프로그램에 배경 쪽은 이름 없는 빈 상자입니다.

맞는 규칙: 내용인 그림(요리 사진 · 도표)은 alt를 줄 수 있는 img로, 꾸밈만 배경으로 둡니다(브라우저 규칙 3).

틀린 생각: 짧게 적기 background는 적은 그림만 바꾸고 앞의 배경색은 남긴다.

<div class="box">된장찌개</div>

.box {
  background-color: #f5f5f7;
  background:
    url("images/doenjang.svg");
}

회색 바탕이 사라지고 투명이 되었습니다. 손 점수판에 풀어 적으면 까닭이 보입니다.

맞는 규칙: 짧게 적기 background는 적지 않은 칸(색 · 크기 · 자리 …)을 처음 값으로 되돌립니다. 그림만 바꾸려면 background-image를 씁니다.

확인 문제

1. 2절 예제에서 background-size: cover; 줄을 지우면 배경은 어떻게 보일까요? 그림 파일은 가로 800 · 세로 600입니다.

• ① 그림이 원래 크기로 깔려, 상자에는 그림 가운데 일부만 보인다.
• ② 그림이 상자에 맞게 줄어 전체가 보인다.
• ③ 크기를 정하지 않아 배경 그림이 사라진다.

<div class="hero">
  김치볶음밥
</div>

.hero {
  height: 150px;
  background-image:
    url("images/kimchi.svg");
  background-position:
    center;
}

2. 동아리 공지 머리 칸에 사진을 깔려고 합니다. 칸이 어떤 크기여도 빈틈없이 덮게 하는 값을 ____ 자리에 쓰세요.

<div class="banner">
  사진 동아리
</div>

.banner {
  height: 120px;
  background-image:
    url("images/kimchi.svg");
  background-size: ____;
}

<div class="banner">
  사진 동아리
</div>

.banner {
  height: 120px;
  background-image:
    url("images/kimchi.svg");
  background-size: cover;
}

3. 플로우 카페 메뉴 페이지의 폴더입니다. assets/css/menu.css 안에서 원두 그림 images/bean.svg를 배경으로 깔려면 url()에 어떤 주소를 적어야 할까요?

cafe/
  menu.html
  images/
    bean.svg
  assets/
    css/
      menu.css

• ① images/bean.svg
• ② ../images/bean.svg
• ③ ../../images/bean.svg

컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요. 1절 폴더대로 recipe-note/에 index.html · css/style.css · images/kimchi.svg를 둡니다. index.html에는 class="hero" 상자 하나와 css/style.css를 잇는 link 줄을 넣고, 그림 파일은 아래에서 받습니다. style.css의 .hero에 높이 150px과 url("images/kimchi.svg") 배경을 적었을 때와 ../images/kimchi.svg로 고쳤을 때 무엇이 보일지 먼저 적고, 저장하고 새로고침해 맞춰 봅니다.

• kimchi.svg 받기