이미지 CSS로 다루기(background), PICTURE

예전에 이미지를 한번 다룬적이 있는데요.

HTML5 - 이미지, 링크 다루기(<img>태그, <a>태그)

태그 이미지 안에 width와 height 넣을 수 있으나 css로 관리하는 게 더 좋습니다. HTML 삽입 미리보기할 수 없는 소스 태그 구글 태그는 현재창에서 바로 열리는 게 기본값입니다. target="_blank" : 새로

frontdevpark.tistory.com

이번에는 좀 더 CSS로 이미지 삽입 하는 스킬을 공유 하려고 합니다.

일단 이미지를 마크업하는 방법은 두가지가있는데요.

<img src="/img/logo.png" alt="로고">

.main-section {
     background-image: url(/images/bg.png);
     background-size: cover; // 사용하지않으면 바둑판 배열처럼 쭉 나오게됩니다.
}

하지만

CSS background-image 는 단점이 많습니다. 이로써 이걸 커버해주는

많은 사람들이 background-image를 사용하는 가장 큰 이유는 CSS background-size: cover; 속성 때문이라고 생각합니다.

<picture> 태그를 사용하게 되면 object-fit 속성과 함께, background-size: cover;와 동일한 효과를 얻을 수 있습니다. 하지만 아래와 같은 것들 또한 얻을 수 있습니다.

비교를 해보죠 background (url)

<div style="background-image: url('/img/main-logo.png'); background-size: cover;">
</div>

<picture>
  <img
    src="/img/main-logo.png"
    alt="main-logo"
    style="object-fit: cover;"
  />
</picture>

저도 picture 태그를 사용하고 싶은데 습관인지라 <img> 태그를 더 사용하게 되네요.

지식 하나라도 더 알고 가시면 좋을거 같네요.

FrontDevPark