이미지와 그라데이션 효과로 배경 꾸미기 2 - 배경 이미지 지정하기

배경 이미지는 웹 쇼소에 이미지를 넣거나 목록의 불릿 이미지를 대신하여 아이콘과 같은 이미지를 넣을 때도 사용한다. 배경 이미지를 넣는 여러 속성에 대해서 학습해보기로 하자.

---

 

 

 

 

1. 웹 요소에 배경 이미지를 넣는 background-image 속성

웹 요소에 배경 이미지를 넣을 때 가장 기본으로 알아 둘 속성은 background-image이다. url()에 이미지 파일 경로를 넣어서 사용한다.

background-image: url('이미지 파일 경로')

 

이미지 파일은 jpg, gif, png 형식을 사용하며 파일 경로에는 작은 따옴표나 큰따옴표를 붙인다. 파일 경로는 현재 웹 문서를 기준으로 상대 경로를 지정할 수도 있고 http://로 시작하는 절대 경로를 사용할 수도 있다.

배경을 넣을 때 요소보다 이미지 크기가 작으면 이미지가 가로와 세로로 반복되면서 요소의 배경을 가득 채운다.

 

 

기본적인 배경 이미지 넣기

 

 

이렇게 이미지가 배경에 가득 채워진 것을 볼 수 있다.

---

 

 

 

 

2. 배경 이미지의 반복 방법을 지정하는 background-repeat 속성

배경 이미지를 가로와 세로 중에서 어떤 방향으로 반복할지 지정하거나, 반복하지 않고 한 번만 나타나게 할 수도 있다.

---

 

 

 

 

 

3. 배경 이미지의 위치를 조절하는 background-position 속성

배경 이미지의 수평 위치 또는 수직 위치의 값을 지정할 수 있다.

background-position: <수평 위치> <수직 위치>;
수평 위치: left | center | right | <백분율> | <길이 값>
수직 위치: top | center | bottom | <백분율> | <길이 값>

 

속성값을 2개로 지정한다면 첫번째 값은 수평 위치 의 값이 되고, 두번째 값은 수직 위치의 값이다. 속성값을 하나만 지정한다면 웹 브라우저에서는 지정한 값을 수평 위치값으로 간주하고, 수직 위치값은 50%나 center로 간주한다. 다음은 배경 이미지의 위치를 지정하는 3가지 방법이다.

 

키워드

가장 많이 사용하는 속성값이다. 수평 위치와 수직 위치 중에서 선택할 수 있다.

 

 

백분율(%)

요소가 있는 해당 위치에 배경 이미지의 위치를 백분율로 계산하여 맞춘다는 뜻이다. 예를 들어 background-position: 30% 60%;라면 배경 이미지를 넣을 요소의 왼쪽 모서리로부터 가로 30%, 세로 60%의 위치에 배경 이미지의 가로 세로가 각각 30%, 60%인 위치를 맞춘다.

 

 

크기

길이로 직접 지정할 수도 있다.

---

 

 

불릿 대신 배경 이미지 사용하기

 

---

 

 

 

 

3. 배경 이미지의 적용 범위를 조절하는 background-origin 속성

박스 모델에 패딩이나 테두리가 있다면 배경 이미지를 패딩까지 표시하거나 테두리까지 포함해서 표시할 수 있다.

---

 

 

 

 

4. 배경 이미지를 고정하는 background-attachment 속성

배경 이미지가 있는 웹 문서를 웹 브라우저에서 열고 스크롤 막대를 위아래로 조절하면 문서 전체가 움직이므로 배경 이미지도 함께 이동한다. 하지만 이 속성을 사용하면 배경 이미지를 고정할 수 있다.

 

다음 예제를 통해 background-origin 속성값에 따라 배경 이미지가 어디서부터 시작되는지 살펴보자.

 

배경 이미지 배치하고 고정하기

 

 

스크롤 막대를 내려도 오른쪽의 이미지는 계속 고정이 되고 있다.

---

 

 

 

5. background 속성 하나로 배경 이미지 제어하기

여러 개의 속성을 하나로 묶어서 다음과 같이 쓸 수 있다.

background: url('images/bg4.png') no-repeat center bottom fixed;

 

 

 

 

 

6. 배경 이미지 크기를 조절하는 background-size 속성

배경을 채울 요소 크기에 비해 이미지가 너무 작거나 클 경우 이속성을 사용하여 배경 이미지의 크기를 조절할 수 있다. 이 속성은 화면에 배경 이미지를 가득 채워야 할 경우에도 유용하다.

속성값이 하나라면 그 값은 너비로 인식하고 높이는 원래 이미지의 너비와 높이 비율에 따라 자동 계산한다.

 

 

배경 이미지 크기 조절하기

 

---

 

 

 

 

DO IT 실습 - 문서 전체에 배경 이미지 넣기

 

 

1단계 : 배경 이미지 스타일 추가하기

소스를 추가하고 수정한 파일을 웹 브라우저에서 확인한다.

 

 

---

 

 

 

2단계 : 글자색 바꾸고 그림자 효과 주기

글자색과 그림자 효과 소스를 추가하고 저장한다.

 

 

---

 

 

 

 

학습을 마치고

이렇게 해서 배경 이미지를 넣는 방법을 학습해보았다. 이제 시간이 얼마 남지 않았으니 빠르게 학습을 이어가보자! 새벽 시간이 너무나도 빨리 지나간다.

다음은 그라데이션 효과를 주는 방법에 대해서 학습해볼 것이다.