HTML 7강. 백그라운드 이미지

이미지를 넣을 때 div박스를 만들어 안에 넣는 것이 좋다.

이미지를 감싸는 박스로 고정되어 있으면

이미지의 크기가 조금만 바뀌어도 이미지가 손상될 일이 없다.

 

박스 안에 이미지를 넣는 방법은 다양하다.

 

우선 div태그 안에 이미지 태그를 사용해서 넣어볼 것이다.

자세히 보면 img_box 박스를 넘어서 이미지가 들어간 것을 볼 수 있다.

 

여기서 여러 가지 속성을 써보자.

overflow:hidden;

박스를 넘어가는 사진을 잘라버리는 css 속성이다.

(overflow:visible; 디폴트)

 

이미지 전체 화면을 넣기 위해 이미지에 클래스를 만들어줘서

width: 100% height : 100% 해주면

박스 크기에 맞게 이미지 크기가 변한다.

하지만 이미지의 비율이 깨지고 손상되기 때문에 좋은 방법은 아니다.

 

이 비율이 유지한 채 크기를 조정하기 위해 속성을 사용해줄 것이다.

 

object-fit: [fill, contain, cover, none] ;

 

fill 이미지 그대로 박스 크기에 맞춰 집어넣는 것, 초기값, 비율 깨짐

contain 비율을 유지한 채로 전체 화면이 들어감, 사진 크기가 작아질 수 있음, 원하는 박스 사이즈에 맞지 않음

cover 좀 삐져나가지만 원래 생긴 대로 전체적인 비율은 맞춰져 있고 가장 많이 사용,

다른 건 거의 안 쓴다고 볼 수 있음

none 있는 그대로 들어감, 박스 사이즈를 넘어가면 잘림

 

속성은 박스가 아닌 이미지에 설정해주어야 한다.

 

이렇게 박스에 이미지 태그를 사용해서 추가해주면

나중에 이미지 위에 버튼이나 글자를 올릴 수가 없어서 좋은 방법이 아니다.

이것은 다음 시간에 position을 배우면 해결 가능하다!

 

position을 배우기 전에도 이미지 위에 다른 요소들을 올릴 수 있는 방법이 있다.

background-image를 사용한다.

 

background를 bg로 많이 줄여 쓴다.

background-image: url(""); 

따옴표 안에 사진의 주소나 상대 경로를 적어주면 된다.

 

백그라운드 이미지는 width나 height로 조절이 불가능하다.

 

그래서 background-size를 사용해 크기를 조절해준다.

object-fit:cover처럼 비율을 유지한 채 박스 크기에 맞는 사이즈로 어떻게 바꿀까?

 

Ctrl + Spacebar(매직키)로 확인해보니

background-size 에도 cover가 있다.

 

근데 위치가 가운데로 예쁘게 지정이 되질 않는다.

이때 background-position을 사용해 위치를 지정해준다.

 

background-position으로 비율을 지정할 수도 있고

center처럼 위치 지정도 가능하다.

background-position은 center 이외에

left top, left center, left bottom 등등

검색해보면 기능이 아주 많다.

 

백그라운드 이미지는 말 그대로 백그라운드 배경색과도 같은 것이라서

다른 요소들이 올라갈 수 있다.

박스에 버튼을 추가해보자.

버튼을 원하는 위치로 옮기는 것도 물론 가능하다.

 

 

 

 

 

[출처]

 

https://cafe.naver.com/metacoding

메타코딩 : 네이버 카페

메타 코딩 유튜브

https://www.youtube.com/c/%EB%A9%94%ED%83%80%EC%BD%94%EB%94%A9

메타코딩