프로그래밍/HTML&CSS 사전

[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 속성으로..