CSS background 관련 속성, <img>와 다른 점

250x250

Notice

Recent Posts

Recent Comments

Link

Github

« 2024/05 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

HyunJun 기술 블로그

CSS background 관련 속성, <img>와 다른 점 본문

CSS

CSS background 관련 속성, <img>와 다른 점

공부 좋아 2023. 6. 9. 09:14

728x90

1. CSS background

css background는 배경 화면(background)을 표현할 수 있고, 배경화면에 쓰이는 이미지를 어떠한 형식으로 표현할 것인지 설정할 수 있다.

1) 이미지 파일 준비하기

일단 가로로 긴 이미지 파일과, 세로로 긴 이미지 파일을 저작권 무료 이미지 파일로 구한다.

2개의 파일을 다운로드하여 실습할 html 파일이 있는 동일한 위치에 저장하면 된다.

2) background-image

요소 내의 뒷 배경 화면 이미지를 선택하여 표현할 수 있다.

파일을 직접적으로 가지고 오려면 background-image: url(image-name.jpg);를 사용하면 되고,

https://.... url을 사용하여 web 상에 있는 이미지도 가지고 올 수 있다.

실습을 하기 위한 기본 세팅으로 가지고 온 가로 이미지, 세로 이미지를 넣어 보자.

기본적으로 이미지의 가로, 세로의 정확한 값을 알아내고

아래처럼 정확한 size를 설정해 주면 div의 background image가 정확히 나온다.

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      .width-image {
        background-image: url(stockholm-1576558.jpg);
        width: 1600;
        height: 1200px;
      }

      .height-image {
        background-image: url(big-apple-1056753.jpg);
        width: 1704;
        height: 2272;
      }
    </style>
  </head>
  <body>
    <div class="width-image"></div>
    <div class="height-image"></div>
  </body>
</html>

하지만 실제 이미지의 크기가 크기 때문에 일반적인 환경에서의 브라우저로 접속하면 브라우저 상에서 아래처럼 나온다.

아래는 브라우저를 축소한 결과이다.

이것을 실제 웹 문서에서 사용하기에는 무리가 있어 보이지 않는가? 이것을 지정하기 위해 많은 속성들이 존재한다.

일단은 기본 설정을 이미지들이 한눈에 들어오도록 다시 바꿔 보았다.

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      div {
        width: 800px;
        height: 800px;
        display: inline-block;
      }
      .width-image {
        background-image: url(stockholm-1576558.jpg);
      }

      .height-image {
        background-image: url(big-apple-1056753.jpg);
      }
    </style>
  </head>
  <body>
    <div class="width-image"></div>
    <div class="height-image"></div>
  </body>
</html>

브라우저를 축소하거나 확대하지 않은 결과물이다. 하지만 실제 이미지가 매우 크기에, 이미지의 좌측 상단에 맞추어 width:800px, height:800px이 적용된 걸 확인할 수 있다.

3) background-size

그렇다면 상식적으로 봤을 때 이미지를 일단 축소시켜야 한다. 이럴 때 사용하는 것이 background-size이다.

이제부터는 코드가 길기 때문에 기존의 베이스 코드에서 수정된 부분만 올리도록 하겠다.

contain.

기존의 div 태그 선택자에 있던 내용들은 놔두고, background-size: contain;이라는 속성만 추가해 주었다.

  div {
    background-size: contain;
  }

그 결과, 이미지들이 아래처럼 구현된다. 특징을 간단하게 보자면

div의 width, height에 맞게 이미지들이 축소되어 들어간다.
- 가로의 이미지는 가로가 길기에 가로에 맞추어 div를 꽉 채웠다.
  - 당연히 div의 height 부분이 남고, 이 부분은 이미지로 다시 채운다.
- 세로의 이미지는 세로가 길기에 세로에 맞추어 div를 꽉 채웠다.
  - 당연히 div의 width 부분이 남고, 이 부분도 이미지로 다시 채운다.

cover.

cover를 사용하게 되면, background-image를 사용하는 요소의 크기에 맞게 이미지가 해당 요소 안에 전부 채워지게 보이게 된다. 또한 이미지를 요소에 전부 채워지도록 맞추기 때문에 남는 가로 부분이나 세로 부분은 잘리게 된다.

div {
  background-size: cover;
}

4) background-repeat

그렇다면 현재 설정한 div 크기 내에서 하나의 이미지를 잘리지 않게 보이게 하려면 어떻게 해아 할까?

div에 맞게 이미지를 다 채우기 위해 contain을 사용하고, 이미지 반복을 제거하기 위해 background-repeat를 사용한다.

  div {
    background-size: contain;
    background-repeat: no-repeat;
  }

5) background-position

그리고 div의 가운데에 맞추어 표현하고 싶다면 background-position을 사용한다.

div {
    background-color: bisque;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

정사각형의 사이즈를 가진 요소 안에 가로가 긴 이미지나 세로가 긴 이미지를 꽉 차게 삽입하려고 하면 원본 비율이 달라지기 때문에 이미지가 깨지게 된다.

2. img 태그와 다른 점

SEO에 있어서 background-image보다 <img>가 유리하다.
<img>는 alt 텍스트를 활용하여 어떠한 이미지인지를 명시하거나, 이미지를 불러오지 못했을 경우 표기할 수 있지만
- background-image는 이미지를 불러오지 못했을 경우 아무것도 보이지 않는다.

기본적으로 background-image는 이미지로 인식하지 못하여 이미지를 다운로드하는 등의 행위가 불가능하다.