CSS로 이미지 다루기

배경 이미지를 넣는 CSS background-image 속성

background-image는 이미지를 배경으로 깔기 위해 사용되는 CSS 속성입니다.

사용법은 속성값으로 이미지 리소스가 있는 경로를 url로 넣어주면 됩니다.

* 예시코드

/* CSS */
div { 
    background-image: url('https://cdn.pixabay.com/photo/2015/12/04/14/05/code-1076536_1280.jpg'); 
    width:300px; height:300px; }
<!-- HTML -->
<div></div>

* 결과

div 태그의 width와 height 값은 각각 300px입니다. 그리고 배경 이미지를 만들었는데 배경 이미지의 크기가 이 요소의 크기에 들어맞지 않아서 이미지가 잘려서 나옵니다. 그래서 사이즈 조절을 해봅니다.

이미지 크기를 조절하는 background-size 속성

값으로 contain, cover, % 를 사용할 수 있습니다.

contain: 배경 이미지의 원본 비율을 유지하면서 전부 보여줍니다. 따라서 배경이미지와 요소의 가로세로 비율이 맞지 않으면 요소에 여백이 생길 수 있습니다. 혹은 이미지에 repeat 속성이 있으면 반복되는 이미지 패턴이 보이게 됩니다.

cover: 배경이미지의 원본비율을 유지하면서 여백이 없게 빈 공간이 없도록 보여줍니다. 따라서 배경 이미지와 요소의 비율이 맞지 않으면 이미지가 잘릴 수 있습니다.

% % : 가로 세로 영역의 % 값만큼 채워줍니다. 원본 비율은 무시됩니다.

이것을 이용해서 위의 이미지를 수정해보겠습니다.

* 예시 코드

/* CSS */
div { 
    background-image: url('https://cdn.pixabay.com/photo/2015/12/04/14/05/code-1076536_1280.jpg'); 
    width:300px; height:300px; border: 1px solid black; }
    background-size: contain;
<!-- HTML -->
<div></div>

* 결과

contain으로 속성 값을 부여하면 만약 여백이 생길 경우 기본적으로 여백을 반복 이미지로 채워 넣습니다. 반복을 원하지 않으면 background-repeat: no-repeat를 추가해주면 됩니다. repeat 속성에 대해서는 밑에서 설명해드리겠습니다.

위 코드에서 contain대신 cover를 사용한 모습입니다.

이미지의 가로세로 비율과 요소의 가로세로 비율이 안 맞아 이미지의 잘린 부분이 발생하였습니다.

다음으로 %로 비율을 무시하고 영역에 꽉 맞게 넣어보겠습니다.

* 예시 코드

/* CSS */
div { 
    background-image: url('https://cdn.pixabay.com/photo/2015/12/04/14/05/code-1076536_1280.jpg'); 
    width:300px; height:300px; border: 1px solid black; }
    background-size: 100% 100%;
<!-- HTML -->
<div></div>

background-size: 100% 100%; 를 적용하여 요소의 가로 100%, 세로 100%만큼 이미지를 채워 넣기 때문에 정확히 요소의 가로세로 크기만큼 이미지가 채워집니다. 다만 이 경우 요소와 이미지의 가로세로 비율이 일치하지 않으면 이미지의 원본 가로세로 비율이 무너지게 됩니다.

background 관련 그 외 속성들

1. background-repeat

배경 이미지를 요소에 넣었는데 요소에 여백이 생기는 경우 이미지를 반복하며 여백을 채우는 패턴을 형성합니다.

background-repeat 속성 값이 repeat가 default로 설정되어 있기 때문인데요. background-repeat 속성 값을 달리하여 이런 패턴을 바꿀 수 있습니다.

background-repeat 속성 값은 다음과 같습니다.

no-repeat: 반복 안 함

repeat-x: 가로방향으로 반복

repeat-y: 세로방향으로 반복

repeat: 가로, 세로로 반복

2. background-position

이미지의 offset, 즉, 위치를 정하는 속성입니다.

background-position: x-position y-position

단위는 px나 %을 사용합니다.

3. background-attachment

background-attachment: fixed 속성 값을 사용하면 스크롤을 내려도 화면에 이미지가 고정됩니다.

이 속성의 default값은 scroll이고 스크롤을 내리면 이미지는 올라가는 보통의 일반적인 상황을 연출합니다.

주의할 점은 fixed를 사용하면 background-size속성은 그것의 element를 기준으로 size값을 정하지 않고 viewport를 기준으로 size값을 정합니다.

* 예시 코드

<head>
    <style>
        #scroll {
            width:300px; height:300px; margin:10px;
            border: 1px solid black;
            background-image: url('https://cdn.pixabay.com/photo/2017/08/18/08/31/flowers-2654192_960_720.png'); 
            background-size: 100% 100%;
            background-attachment: scroll;
        }
        #fixed {
            background-image: url('https://cdn.pixabay.com/photo/2017/08/18/08/31/flowers-2654192_960_720.png'); 
            background-size: 100% 100%;
            background-attachment: fixed;
        }
    </style>
</head>
<body>
    <div id="scroll"></div>
    <div id="fixed"></div>
    <div style="height: 1000px;"></div>
</body>

* 결과

backgorund-attachment: fixed 가 적용된 요소는 스크롤을 움직여도 가만히 고정되어 있습니다.

background-image와 img 태그의 차이

background-image는 요소의 배경으로 이미지를 삽입하는 것이고 img 태그는 그 자체가 요소가 됩니다.

이미지 자체가 시맨틱하게 존재할 필요가 있으면 img태그를 사용해야 합니다. 또한 img태그는 검색엔진에서 이미지 검색의 대상이 되지만, background-image는 그렇지 않습니다.

img 태그를 원본 가로세로 비율을 유지한 채 부모 요소에 꽉 채우는 방법

img 태그에 max-width와 max-height의 값을 100%로 제약을 주고 width와 height값을 자동으로 주면 원본 비율을 유지하면서 박스를 꽉 채우게 됩니다. 밑의 예시 코드에서 #picture 선택자의 코드를 봐주세요.

* 예시코드

<head>
    <style>
        #picturecell{
			width:360px; height:160px; border:1px solid red;
		}
        #picture{
			max-width:100%; max-height:100%; width:auto; height:auto;
		}
    </style>
</head>
<body>
    <div id='picturecell'>
        <img src='https://cdn.pixabay.com/photo/2017/08/18/08/31/flowers-2654192_960_720.png' id='picture'>
    </div>
</body>

* 결과