CSS 속성공부 #4 / 배경 속성

CSS 속성공부 #4 / 배경 속성

배경 속성을 사용하면 해당 태그의 배경이미지 or 색상을 지정할 수 있다.

배경 속성 키워드 들은 다음과 같다.

1. background-image: 배경 이미지 지정.

2. background-size: 배경 이미지의 크기 지정.

3. background-repeat: 배경 이미지의 반복 형태 지정.

4. background-attachment: 배경 이미지의 부착 형태 지정.

5. background-position: 배경 이미지의 위치 지정.

6. background: 한 번에 모든 배경 속성(image, size, repeat 등)을 입력할 수 있음.

실전 예제

1. 배경 이미지를 지정하는 속성으로 스타일 값에 URL 단위 or 그레이디언트를 입력한다. 그레이디언트는 이후에 살펴볼 예정이므로 URL 단위를 사용해보자.

div태그의 크기를 지정하였고 배경 이미지를 구글에서 검색한 이미지의 경로로 지정하였다. 그런데 사이즈가 큰 이미지라 잘려서 나오고 있다.

2. 배경 이미지의 크기를 지정하는 속성은 CSS3에 추가된 속성이므로 인터넷 익스플로러8 이하에서는 사용할 수 없다. background-size 속성에는 크기 단위나 키워드를 입력할 수 있다. 크기 단위로는 퍼센트를 많이 사용하고, 각각 너비와 높이를 의미하는 두 개의 값을 입력할 수 있다.

이제 방금 예제에서 size 속성을 추가해보자 첫번째 크기는 width 두번째 크기는 height를 의미한다.

참고로 width와 height를 입력은 띄어쓰기로 구분지어야 한다. 쉼표(,)를 사용하면 여러 이미지를 사용할 때 각 배경에 서로 다른 크기를 입력하라는 것으로 인식한다.

원본 이미지의 width와 height가 div사이즈에 맞춰서 100%로 나오고 있다. 

3. 이제 div의 height를 500px, background-size의 height를 250px로 바꿔보자.

아래와 같이 이미지가 패턴처럼 반복되는 것을 볼 수 있다. 이는 background-repeat의 속성의 기본 키워드가 repeat이기 때문에 나타나는 현상이다. repeat 속성의 키워드들 중 no-repeat를 적용하면 반복되지 않는다.

4. background-attachment 속성은 배경 이미지를 화면에 고정하는 속성이다. 여러 키워드들 중 scroll은 화면 스크롤에 따라 배경이미지가 함께 이동한다. 

5. 마지막으로 background-position 속성은 아이콘(스프라이트 이미지)을 만들 때 자주 사용한다. 보통 크기 단위나 키워드를 다음과 같이 입력한다.

background-position: 키워드;

background-position: x축위치;

background-position: x축위치 y축위치;

물론 background의 모든 속성을 한 행에 모두 입력할 수 있다. 하지만 배경 속성을 한 행에 다 쓰면 복잡하고, 코드의 가독성이 떨어지게 되므로 여러 행으로 입력하길 권장한다.