css background-size

■ HTML 웹 문서의 전체적인 분위기를 위해서 주제와 관련된 이미지나 깔끔한 이미지를 배경으로 많이 사용용 하고, 배경을 그림으로 채우는 과정에서 이미지의 사이즈를 조절해서 적용할 수 있는데요. 이번 글에서는 css의 background-size 속성에 대해서 알아보겠습니다.

■ 속성값으로 사용할 수 있는 것들은 auto, 크기값(px), 백분율(%), cover, contain 등이 있는데요. 위 이미지(600X400)를 이용해서 속성값을 바꿔가면서 어떻게 적용되는지 확인해볼게요.

▲ 본문에 700X500 크기의 박스(div)를 만들고 배경색을 노란색으로 설정했습니다. 이 박스의 배경을 이미지로 채워보겠습니다.

먼저 'auto' 속성인데요. auto는 사진의 원본 크기대로 적용이 됩니다.

▲ background-image 속성을 이용해서 이미지를 배경으로 넣었구요. no-repeat 속성을 적용해서 반복하지 않도록 했습니다. 그리고 background-size 속성값을 "auto;"로 설정했는데요 .원본 이미지 크기대로 적용되는지 확인해보겠습니다. 배경의 크기(700X500)와 이미지의 크기(600X400)의 크기를 생각하면서 결과를 출력하겠습니다.

▲ 원본의 크기대로 출력됩니다. auto 속성값을 알아봤구요.

다음은 크기 값을 넣어보겠습니다 .

▲ 너비와 높이의 크기 값을 적용했습니다

▲ 설정한 크기대로 출력되는 걸 확인할 수 있는데요. 여기서 값을 하나만 넣는다고 가정하면 (background-size : 300px;) 이 값은 너비로 인식합니다. 그럼 높이는 어떻게 될까요? 높이는 auto; 로 인식해서 너비가 줄어든 비율만큼 높이도 줄어들게 됩니다. 즉 너비가 [600 ▶ 300]으로 줄었잖아요? 높이도 역시 자동으로 [400 ▶ 200]으로 설정됩니다.

다음은 백분율을 적용해보겠습니다. 백분율은 원래 크기를 기준으로 지정한 만큼 확대 또는 축소되구요. 여기서는 하나만 적용해볼텐데요. 이 역시로 너비로 인식하고 높이는 "auto;" 속성으로 가로의 크기 변화만큼 변하게 됩니다.

다음은 cover와 contain 속성을 적용해보겠습니다. cover는 이미지의 비율을 유지하면서 배경의 너비와 높이 중에서 길이가 짧은 쪽을 기준으로 맞추게 되구요. contain은 반대로 길이가 긴 쪽을 기준으로 이미지의 크기가 맞춰지게 됩니다. 글로 설명하는 것보다 예제에 직접 적용해보겠습니다.