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

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

https://frontdevpark.tistory.com/entry/HTML5-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EB%A7%81%ED%81%AC-%EB%8B%A4%EB%A3%A8%EA%B8%B0img%ED%83%9C%EA%B7%B8-a%ED%83%9C%EA%B7%B8

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

 

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

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

 

첫번째는 이미지를 삽입 html 기본적으로 다루는 방법이죠

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

두번째 배경을 넣을때 쓰는 방법입니다. (background , background-image)

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

하지만 

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

<PICTURE> 태그를 사용해보세요.

많은 사람들이 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 태그

• SEO 친화적 이미지
• 접근성 친화적 이미지 (alt="" 속성 사용)
• CMS-generated 이미지, CDN과 함께 잘 동작함

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

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

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