[CSS] 이미지 적용 및 crop 방법 A to Z

이번 포스팅에서는 CSS 로 이미지를 적용하는 방법과 Crop하는 방법에 대해 알아보겠습니다.

1. background-image 방식

CSS의 background 속성을 사용하여 DOM의 배경으로 이미지를 적용하는 방식

1.1 기본 성질

컨테이너 DOM 사이즈와 이미지 사이즈의 관계

case 1 : 컨테이너 DOM 사이즈 === 이미지의 사이즈
- 기본적으로 컨테이너의 좌측 상단(0, 0)을 기준으로 정렬
- 다른 설정이 없다면 원본 이미지 사이즈로 적용

case 2 : 컨테이너 DOM 사이즈 > 이미지의 사이즈
- 이미지가 반복되면서 컨테이너 DOM의 빈 공간을 가득 채움 ⇒ background-repeat / background-size 속성으로 제어 가능
- background-size: 100% || contain || cover을 줄 경우,
이미지가 컨테이너의 사이즈에 맞게 확대됨 ⇒ 이미지가 bitmap 형식일 경우 픽셀이 깨져보임

case 3 : 컨테이너 DOM 사이즈 < 이미지의 사이즈
- 좌측 상단(0, 0)을 기준으로 컨테이너 DOM 영역을 초과한 부분이 잘림
- <img> 태그와 달리 이미지가 컨테이너를 벗어나지 않음 (마치 overflow: hidden 속성을 적용할 것처럼)
- background-size: 100% || contain || cover을 줄 경우,
이미지가 컨테이너의 사이즈에 맞게 축소됨 ⇒ 레티나 디스플레이 대응 원리

See the Pen Background-image : 컨테이너와 이미지 사이즈 CASE by 이상진 (@sangziii) on CodePen.

1.2 background 속성 정리

background는 요소(Element)의 배경 속성을 설정하기 위한 속성

속성명	설명	초기값	CSS 버전
background-color	엘리먼트의 배경 색상을 지정	transparent	CSS 1
background-image	엘리먼트의 배경 이미지를 지정	none	CSS 1
background-repeat	배경 이미지를 어떻게 반복시킬 것인지 지정	repeat	CSS 1
background-attachment	배경 이미지를 어떻게 고정시킬 것인지 지정	scroll	CSS 1
background-position	배경 이미지를 엘리먼트 안에서 어디에 위치 시킬건지 offset을 지정	0% 0%	CSS 1
background-size	배경 이미지의 크기를 지정	auto	CSS 3

주의 : css3 속성은 IE 하위 버전 브라우저(6~8)에서 지원하지 않습니다.

1.2.1 지원 브라우저

속성명	Chrome	IE	Firefox	Safari	Opera
background-color	1.0	4.0	1.0	1.0	3.5
background-image	1.0	4.0	1.0	1.0	3.5
background-repeat	1.0	4.0	1.0	1.0	3.5
background-attachment	1.0	4.0	1.0	1.0	3.5
background-position	1.0	4.0	1.0	1.0	3.5
background-size	4.0	9.0	4.0	3.0	10.5

1.2.2 속성 축약

background 관련 속성은 한 줄로 축약하여 사용할 수 있다.

아래 명시한 순서와 다르거나, 값이 누락되어도 무방하지만, 누락된 속성 값에는 기본값 이 적용

background: [background-color || background-image || background-repeat || background-attachment || background-position] | inherit]

해결 방법

IE8 브라우저 대응까지 고려한다면, clip, origin, size 속성은 축약형이 아니라 분리하여 선언

1.3 적용 방법

방법 1 : background-size: cover

이미지 크기 비율을 유지한 상태에서, 컨테이너 영역의 가로 혹은 세로를 맞춤 (초과하는 부분은 crop)

- 장점 : 이미지/컨테이너 비율에 관계없이 모든 경우에 사용 가능
- 단점 : IE8 이하 브라우저 지원 불가

방법 2 : background-size: contain

이미지 크기 비율을 유지한 상태에서 컨테이너 영역에 이미지 전체가 들어가도록 이미지 크기를 조정 (비율에 따라 여백이 생길 수 있음)

- 장점 : 이미지/컨테이너 비율에 관계없이 모든 경우에 사용 가능
- 단점 : IE8 이하 브라우저 지원 불가

방법 3 : background-size: 100% auto

이미지의 크기를 100% auto 혹은 auto 100%를 주어 비율을 유지하면서 부모 요소에 맞추는 방법

속성 값
- 100% 100%: 이미지의 크기가 컨테이너의 width, height로 설정
(컨테이너와 이미지의 비율이 다를 경우, 컨테이너의 비율에 맞추어 보이게 됨)
- auto: 컨테이너 크기와 관계없이 이미지 고유 width, height로 설정
- 값을 하나만 넣을 경우: 나머지 값은 auto로 설정 (이미지 비율 유지)

단점
- 컨테이너/img의 비율에 따라 100%/auto 순서가 바뀌어 분기 처리 필요 → cover/contain에 비해 번거로움
- IE8 이하 브라우저 지원 불가

1.4 적용 예시

2. <img> 태그 방식

HTML의 <img> 태그를 사용하여 이미지를 표현하는 방식

2.1 기본 성질

<img> 태그 사이즈와 이미지 사이즈 관계

<img> 태그에 width, height 사이즈가 선언되어 있지 않다면, <img> 태그는 이미지 원본 사이즈로 설정

See the Pen <img>태그 : 컨테이너와 이미지 사이즈 CASE by 이상진 (@sangziii) on CodePen.

2.2 적용 방법

방법 1 : position 과 transform을 이용한 방법

- 장점: transform: translate() 속성을 사용할 경우, GPU를 통한 하드웨어 가속으로 성능 향상에 도움됨 (모웹 작업 시 적합)
- 단점: IE8 이하 브라우저 지원 불가

방법 2 : position과 margin을 이용한 방법

- 장점 : IE8 이상 모든 브라우저에서 지원 가능
- 단점 : 가로형/세로형 이미지에 따라 분기 적용 필요

방법 3 : object-fit을 이용한 방법

- 장점 : 비율에 따른 별도의 분기 없이 하나로 대응 가능 (background-size: cover와 같은 효과)
- 단점 : IE 모든 브라우저에서 지원 불가

2.3 적용 예시

2.3.1 position과 transform

See the Pen position: absolute / transform: translate(-50%, -50%) by 이상진 (@sangziii) on CodePen.

2.3.2 position과 margin

See the Pen position: absolute / offset: -100% / margin: auto by 이상진 (@sangziii) on CodePen.

2.3.3 object-fit

See the Pen object-fit: cover by 이상진 (@sangziii) on CodePen.

3. IE 하위 브라우저(~8) 대응법

background-size 속성은 IE9 브라우저부터 지원하기 때문에 서비스 스펙에 따라 하위 브라우저 대응이 필요할 수 있음

방법 1 : background-image 방식을 <img> 태그 방식으로 교체

background-image 방식을 하위 브라우저에서는 <img> 태그로 교체하는 방식

참고

- http://wit.nts-corp.com/2015/01/28/3032
- https://css-tricks.com/perfect-full-page-background-image

방법 2 : filter 속성 사용

background-size를 사용하는 부분에 filter 속성을 추가해주는 방법

단점
- 이미지의 비율이 컨테이너의 영역에 맞게 크기가 조절됨(이미지의 비율이 변경될 수 있음)
- inline-style로 background-image를 제어하는 경우, html을 수정해야 돼서 번거로움
- 성능에 악영향을 끼칠 수 있음

방법 3 : htc 파일 이용

MS에서 제공하는 HTML Component 파일로, 하위 브라우저에서 지원하지 않는 속성이 있을 경우 해당 파일을 불러와서 적용

단점
- 한 페이지에서 여러 번 불러올 경우, 한 번만 작동하는 문제
- 타 모듈과의 충돌 이슈
- 로딩 속도가 매우 느림 ⇒ 성능에 악영향

4. svg 파일 이용

4.1 background-image 방식

background-image 방식과 동일한 crop 방식 ⇒ background-size: cover 로 crop

이슈 : IE 브라우저(9~)에서 background-size: cover 적용이 안됨

해결 방법 1

svg코드에 preserveAspectRadtio="xMidYmid slice" 속성 값 적용

해결 방법 2

svg코드에 width/height 값 설정

4.2 <img> 태그 방식

앞서 살펴본 속성이 적용된 svg파일의 경우 다른 css 추가 없이 자동으로 적용

5. 결론

최근 실무에서는 IE8 브라우저는 스펙 아웃되면서 background-image의 cover 속성, 레티나 대응을 위한 svg 포맷을 이용한 방법으로 이미지를 처리하고 있습니다.

하지만 세부적으로는 background 방식은 img태그 방식과 달리 자동으로 SEO 최적화, 접근성 대응이 되지 않아
추가 처리가 필요하기도 해 일부에서는 안티 패턴이라는 주장 (해당 아티클 https://velog.io/@chris/the-css-background-image-property-as-an-anti-pattern) 도 있습니다. 서비스 스펙에 이슈가 없다면 해당 아티클에서 주장처럼 picture > source 구조로 작업해봐도 좋을 듯합니다.

글이 도움이 되셨다면 공감&댓글 부탁드립니다.
글 작성에 큰 힘이 됩니다. 🙂

저작자표시 비영리 변경금지 (새창열림)

'프로그래밍 > HTML&CSS 사전' 카테고리의 다른 글

[CSS] 제일 쉬운 overflow 설명 (2)	2020.12.11
[CSS] word-wrap, word-break 정확하게 알아보기 (0)	2020.12.09
[CSS] cursor 속성 빠르게 알아보기 (0)	2020.12.09
[html/css] HTML 공백 줄바꿈 그리고 white-space (1)	2020.12.09
[CSS] 말줄임(ellipsis)에 관한 모든 것 (0)	2020.12.09