HTML5 CSS3 배경이미지 사이즈
■ 지난 글에서 웹 문서의 배경이미지를 넣는 방법과 몇 가지 속성을 알아봤었는데요. 거기서 언급하지 않았던 배경이미지의 사이즈 속성에 대해서 알아보겠습니다. 이 속성은 CSS3부터 가능해진 기능인데요. 배경 이미지의 크기를 내가 원하는 대로 조절할 수 있습니다.
■ 먼저 [background-size] 속성값들을 알아볼게요.
1. auto: 이 속성은 삽입한 원래 이미지의 크기대로 표시되는 속성입니다.
2. 크기값: 너비와 높이를 픽셀 등 특정 단위의 크기로 지정해줄 수 있구요. 이때 너비 값만 지정할 경우는 높이 값은 너비 값의 확대 또는 축소된 비율만큼 계산해서 자동으로 변경됩니다.
3. 백분율: 이 값은 원래 삽입된 이미지의 크기를 기준으로 확대 또는 축소할 수 있는 속성입니다.
4. contain: 너비와 높이의 비율을 유지하면서 확대, 축소되는데요. 이미지가 삽입된 요소 (body)의 가로나 세로 폭 중 넓은 쪽에 맞춰서 이미지가 확대 또는 축소됩니다.
5. cover: 바로 위의 contain 속성과 반대로 가로, 세로 중 짧은 쪽에 이미지의 크기가 맞춰지게 됩니다.
예제를 만들어서 속성값을 하나씩 넣어보면서 어떻게 바뀌는지 살펴볼게요.
■ 다음과 같이 body 태그 안에 div 박스를 하나 만들고 크기를 500x400 크기로 지정한 후 배경 이미지를 넣었구요. (참고로 이 이미지의 크기는 300x170픽셀입니다.) 그리고 이미지의 크기가 어떻게 변하는지 확인하기 위해서 배경색을 노란색으로 채워봤습니다. 또한, 기본 설정 값인 'repeat' 값을 반복되지 않도록 [no-repeat]로 변경해줬습니다. (repeat 속성은 이 전 글에서 자세하게 정리 해놨어요. 참고하셔요.)
■ 배경이미지로 사용한 그림이 이렇게 들어가게 되는데요. 이 그림의 사이즈 속성값을 하나씩 조절해보겠습니다. 앞에서 알아본 값들의 특징과 그림을 비교하시면서 보세요.
■ background-size: auto; 로 설정했는데요. 원래 이미지 그대로 출력됩니다.
■ 백분율로 50% 줄인 상태입니다.
■ 사이즈 속성값에 contain을 넣었는데요. 가로와 세로 중 긴쪽.... 이 예제에서는 가로(500px)에 이미지 크기가 맞춰지게 됩니다. 같은 비율로 높이도 변하긴 하지만 다 채워지지는 못하게 됩니다. 이때 그림의 크기가 박스 크기보다 크면 이 박스의 크기에 맞춰서 들어가게 됩니다. 참고하시구요.
■ 다음은 cover 속성인데요. 짧은쪽의 길이에 맞게 이미지의 사이즈가 변하기 때문에 긴 쪽은 그림이 짤리게 됩니다. 그림을 딱 맞게 넣고 싶으면 사이즈가 박스보다 큰 이미지로 준비해서 contain이나 cover 속성을 이용하면 보기 좋게 들어가게 될 거에요.
이렇게 웹 문서의 배경을 이미지로 채울 때는 이 background-size 속성들을 잘 응용해서 사용하시면 됩니다. 수고하셨어요.^^
