background 다채로운 기능 한 눈에 살펴보기

CSS를 다루면서, 가장 빈번하게 사용하면서도 활용도가 매우 높은 속성중 하나는 바로 'background' 속성이 아닐까 싶습니다. background 속성은 배경색상을 적용하는 것은 물론, 배경 이미지도 다양하게 적용할 수 있도록 해주면서도 적용할 이미지의 기준점을 세세하게 컨트롤 할 수도 있습니다. 이미지의 크기나 반복해서 적용하는 것 또한 다양하게 조절할 수도 있구요.

background 속성은 이와 같이 다양한 특성을 조정할 수 있는 특별한 쓰임과 기능을 가지고 있습니다. 모든 특성을 다 외우고 있을 필요는 없겠지만, 실무에서 주로 사용하고 자주 쓰이는 특성들을 위주로 학습을 해 둔다면 매우 강력한 스킬이 되어줄 것입니다.

예제코드

아래 예제코드를 가지고 진행을 해보도록 합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>background</title>
    <style>
        section {
            width: 60%;
            height: 300px;
            background-color: dodgerblue;
            margin: 0 auto; /* 가운데 정렬 */
        }
        h1 {
            font-size: 40px;
            color: white;
        }
    </style>
</head>
<body>
    <section>
        <h1>Subject</h1>
    </section>
</body>
</html>

일단 이 정도로 section을 만들어서 height 값을 주고 박스 형태로 적용을 해보았습니다.

이제 배경에 색상 대신 이미지를 적용해보도록 하겠습니다.

background-image

background-image 속성을 사용하게 되면 다양한 방법으로 배경이미지를 적용할 수 있습니다. 배경에 그라데이션을 넣을 수도 있는데, 실무에서 흔하게 사용되지도 않고 아주 필수 적인 사항은 아니니, 그라데이션은 잠시 스킵하고 지나가 보도록 하겠습니다.

background-image 속성은 url() 과 함께 사용됩니다.

무료 이미지를 제공하는 unsplash.com 사이트의 이미지 경로를 추가하여, CSS를 아래와 같이 수정했습니다.

      section {
            width: 60%;
            height: 300px;
            /* background-color: dodgerblue; */
            background-image:
            url(https://images.unsplash.com/photo-1587502536575-6dfba0a6e017?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxzZWFyY2h8OHx8JUVCJUIwJTk0JUVCJThCJUE0fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60);
            margin: 0 auto; /* 가운데 정렬 */
        }

일단은 배경 이미지가 잘 들어갔습니다. 그런데 오른쪽 편에 보면, 이미지의 가로 사이즈가 끝나는 경우, 반복되어 표시된다는 것을 알 수 있습니다. 브라우저를 가로로 크게 늘여보면 아래처럼 쉽게 확인이 가능합니다.

즉, background-image 속성은 Default가 배경이미지가 반복되는 것이라고 볼 수 있겠습니다.

background-size

사실 백그라운드 이미지의 크기는 background-size 속성으로 제어하게 됩니다. '크기' 속성이기 때문에, %, px, em, rem 등의 단위를 모두 사용할 수 있지만, 보통은 'contain' 이나 'cover' 그리고 'auto'를 사용하는 게 일반적입니다.

contain은 사용된 이미지의 잘림없이 최대한 꽉 차게 해당 영역에 표시됩니다. cover 또한 비율을 유지하면서 꽉 차게 이미지가 표시된다는 점은 비슷하지만, 비율에 맞추다 보니 비율 이외 영역에 대한, <이미지 잘림 현상>이 존재합니다.

이 두 가지 옵션을 비교해보도록 하겠습니다.

먼저, background-size: cover;의 결과입니다. 박스 크기에 맞게 이미지가 최대한의 크기로 표시되지만, 박스 크기를 넘어가게 되면 이미지의 사이즈를 자동으로 줄여서 표현합니다.

다음으로는 background-size: contain;을 적용한 결과입니다. 적용된 이미지의 비율이 바뀌거나 잘리는 일은 없지만 일반적으로 배경이미지로 반복되는 현상을 쉽게 만나게 될 수 있습니다. 예제에서는 세로 방향으로 길쭉한 이미지(portrait) 형태이다보니, 반복되는 현상이 더 잘 확인되는 것 같습니다.

그래서인지 실무에서는 대체적으로 contain 보다 cover를 더 많이 사용하고 있습니다. 큰 이미지를 이용해서 적당히 덮어 버리는 게 보다 자연스럽기 때문일 것입니다.

background-repeat

사실, 백그라운드가 반복되는 현상은 background-repeat 속성으로 제어할 수 있습니다. 대체로 아래와 같은 제어 옵션을 가지고 있습니다.

background-repeat: no-repeat; → 반복하지 않음
background-repeat: repeat; → 반복함
background-repeat: repeat-x; → x축(가로) 방향으로만 반복
background-repeat: round; → 둘러싸는 형식으로 반복

background-repeat 속성은 단순하게 배경 이미지로 사용하는 경우에는 반복되는 기능이 다소 불편하게 느껴질 수도 있겠지만, '패턴'처럼 배경 이미지를 사용하는 경우에는 매우 유용하게 활용될 수 있는 기능이 되어줍니다.

background-position

이 속성은 배경 이미지의 시작점을 지정해 줄 때 사용하는 속성입니다. margin 또는 padding을 적용하는 방식으로 기억하면 사용하기에 큰 어려움은 없을 것입니다.

background-position: top; → 이미지의 상단부를 기준으로 적용
background-position: left; → 이미지의 좌측부를 기준으로 적용
background-position: center; → 이미지의 중심부를 기준으로 적용
background-position: bottom; → 이미지의 하단부를 기준으로 적용
background-position: left center; → 이미지의 좌측부 + 중심부를 기준으로 적용
background-position: left top; → 이미지의 좌측부 + 상단부를 기준으로 적용
그 밖에 다양한 조합도 가능합니다.

section에 다음과 같이 CSS를 적용해보겠습니다.

      background-size: cover;
      background-position: bottom;

이미지의 하단부를 기준으로 꽉(cover) 채워진 것을 확인할 수 있습니다.

background 속성 하나로 제어하기

위에서 살펴본 내용들은 사실 background 속성 하나를 이용해서 복합적으로 활용할 수도 있습니다. 이와 같은 방식을 short hand 기법이라고 말합니다. margin이나 padding도 숏핸드 방식으로 주로 사용되는 대표적인 속성들이죠.

한 가지 미리 알아두면 좋을 내용은, 속성들을 적용하는데 순서(order)는 중요하지 않다는 사실입니다.

위에서 살펴보면서 적용한 것들을 주석처리하고, background 속성 하나로 묶어서 적용해보겠습니다.

      section {
            width: 60%;
            height: 300px;
            /* background-color: dodgerblue; */

            /* background-image:
            url(https://images.unsplash.com/photo-1587502536575-6dfba0a6e017?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxzZWFyY2h8OHx8JUVCJUIwJTk0JUVCJThCJUE0fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60);
            background-size: cover;
            background-position: bottom; */

            background: no-repeat bottom url(https://images.unsplash.com/photo-1587502536575-6dfba0a6e017?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxzZWFyY2h8OHx8JUVCJUIwJTk0JUVCJThCJUE0fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60);

            margin: 0 auto; /* 가운데 정렬 */
        }

결과는 아래와 같습니다.

그런데, 여기서 아주 중요한 한 가지 주의사항이 존재합니다.

background-position + background-size를 쓸 때는 "/"를 사용한다

위 예제에서는 background-size를 결정하는 cover 또는 contain을 적용하지 않았습니다. 한번 직접 적용을 해보세요. 아마 화면에 아무것도 표시되지 않는 에러가 발생할 것입니다.

/* 이렇게 사용하면 빈화면으로 표시될걸요? */
background: no-repeat bottom cover url(https://images.unsplash.com/photo-1587502536575-6dfba0a6e017?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxzZWFyY2h8OHx8JUVCJUIwJTk0JUVCJThCJUE0fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60);

저도 처음에는 잘 몰랐고, 이해가 되지 않던 내용이긴 한데요... 외워버리는 거죠 뭐.

position 뒤에 size를 오게하면서 중간에 "/(슬래시)"를 넣어줘야 제대로 동작합니다. 바로 이렇게요.

background: no-repeat bottom/cover url(....)  /* 제대로 동작할걸요? */

background: no-repeat bottom / cover url(....)  /* 띄어 써도 제대로 동작할걸요? */

background: no-repeat cover/bottom url(....)  /* 요건 안될걸요? 희합니다. 거참... */

이젠 이미지가 제대로 표시되는군요. 거참 이상한 구석이 있는 부분입니다.

어찌되었든 background를 short-hand로 사용할 때는 위치(position)값 뒤에 크기(size)값이 오되, 슬래시(/)를 중간에 두어야 한다는 사실을 반드시 기억해주세요.

왜 이따구로 만들어 놓았는지는 저도 잘 모르겠습니다.^^;

마치며

이번 포스팅에서는 background 속성의 다양한 특성에 대해서 정리해보았습니다.

컬러, 이미지, 사이즈, 위치 그리고 반복 여부 등을 살펴보았고, 미 모든 특성들을 한번에 적용할 수 있는 숏핸드(short-hand) 표기법에 대해서도 살펴보았습니다.

background는 매우 빈번하게 활용되는 CSS 속성이니 이 참에 좋은 공부가 되었기를 바라겠습니다.

즐거운 코딩생활, 즐코딩.

KINcoding.

저작자표시 비영리 변경금지

'HTML+CSS' 카테고리의 다른 글

비슷한 듯 다른 동작 방식, Alpha Channel과 Opacity의 차이점 (0)	2023.04.06
Hover 버튼을 폼 나게 만들기 (transition + transform 적용) (0)	2023.04.03
Transform - rotate(), scale(), translate(), skew() (0)	2023.03.29
Interactive의 시작, transition 속성 2/2 - timing function (0)	2023.03.24
Interactive의 시작, transition 속성 1/2 - duration, delay (0)	2023.03.23

즐코딩 - KINcoding

background 다채로운 기능 한 눈에 살펴보기