8 min to read

CSS background 정리글

배경색을 칠하는 여러 방법에 대해서 정리하였습니다.

Featured image

들어가며

HTML(또는 pug)과 CSS(또는 scss)만으로 클론 코딩 연습을 하다가, 아래와 같은 그라데이션 효과를 적용한 div를 만들어야 할 일이 생겼습니다.

여러 자료를 뒤져보면서 linear-gradient와 색 하나를 다른 레이어에 얹어서 하는 방식으로 작성을 할 수 있다는것을 알아냈지만, 이왕 알아본 김에 확실하게 관련 개념들을 정리를 해보고자 이 글을 쓰고자 합니다.

단색 배경 : background-color

background-color 속성은 CSS <color> 자료형을 사용하여 단색 배경을 지정하는데에 사용합니다. 자식 요소 등이 다른 background-color 속성을 명시하고 있지 않은 한, 자식 요소에도 적용이 됩니다.

See the Pen background-color by Huichan Lee (@kasterra-the-bashful) on CodePen.

주의 : background-color 에서는 여러 색을 쓸 수 없습니다!
혹시 색을 반반 쪼개서 넣는 등의 그런 효과들을 원한다면 후에 설명할 background-image부분을 참고 바랍니다.

<color> 자료형

CSS에서 사용하는 단색을 나타내는 자료형 입니다. 사용 가능한 방법에는 다음과 같은것이 있습니다. 사실 background-color 속성을 사용해 본적이 있으면 친숙한 형태들도 많을듯 합니다.

이미지 배경 : background-image

background-image는 CSS에서 <image>자료형을 사용해서 배경으로 지정할 수 있는 문법입니다. <image>자료형은 다음과 같이 정리할 수 있습니다.

박스에 배경 이미지를 적용한다고 할 때, 박스의 크기에 정확히 맞는 이미지만을 사용하지 않을 수도 있습니다. 이럴 경우, 큰 이미지의 경우에는 축소되지 않으므로 이미지의 일부만 표시가 되고, 작은 이미지의 경우는, 박스를 채우기 위해서 바둑판 식으로 배열이 됩니다.

배경 이미지 반복 제어

박스 보다 작은 이미지를 사용하면서, 기본적으로 적용되는 이미지 반복 속성을 원치 않을 수도 있습니다. 이럴 경우에는 background-repeat 속성에 다음 값들을 사용해서 배경 이미지 반복을 제어할 수 있습니다.

배경 이미지 크기 조정

박스 보다 큰 이미지를 사용할 때, 이미지 크기를 좀 줄여서 사용하고 싶을 수도 있습니다. background-size 속성을 통해서 배경 이미지의 크기를 조정할 수 있습니다.

background-size값에 콤마를 넣으면 안되는 이유?
background-color를 제외한 배경 속성에서는, 배경을 여러개 넣을 수 있습니다. 배경 이미지를 여러개 넣었을 때, 각각의 크기를 명시하기 위해서, 콤마로 구분을 해서 사용합니다.

배경의 시작점 지정 background-origin

background-origin 속성을 이용해서, 배경의 시작점을 지정할 수 있습니다. 좌표계의 원점을 설정한다고 생각해도 되겠네요.

background-origin 속성에서는 3가지 값을 사용해서, 배경을 배치할 수 있습니다.

배경 이미지 배치 background-position

background-position 속성을 사용해서, 배경 이미지의 초기 위치를 선정할 수 있습니다. 이 속성값에는 값으로 1개에서 4개까지의 값이 올 수 있습니다.

배경 첨부(attachment) background-attachment

배경이 적용된 컨텐츠에 스크롤이 적용되면 배경은 어떻게 움직여야 할까요? 스크롤이 되어도 고정되길 원할 수 있고, 아니면 스크롤과 함께 움직이길 원할수도 있죠. 그런 속성을 정의하는것이 background-attachment입니다. 배경을 어디다가 붙일건지(attach)를 결정하는 속성이죠.

키워드 값 세 종류를 이용해서 이 속성을 사용할 수 있습니다.

scroll vs fixed : 둘의 차이점은?

https://meyerweb.com/eric/css/edge/complexspiral/demo.html을 봅시다. 페이지를 위아래로 스크롤해도 암모나이트 그림은 움직이지 않아서, body에 배경을 적용해서 고정해두고, content 부분에는 배경을 좀 투명하게 해서 둔것처럼 보입니다. 하지만, 웹 페이지의 코드를 개발자 도구를 사용해서 해체해 보면, content 부분의 배경 색에는 alpha 값이 적용되어 있지 않아 불투명 하여, 배경이 비쳐 보이지 않습니다. 그럼 어떻게 된걸까요?

content의 배경에는 body에 그려진 그림과 동일한 그림에, 이미지 자체적으로 색을 덧씌운 그림이 적용되어 있습니다. 그리고 background-attachment 속성으로 fixed가 적용되어서, 이미지의 기준점이 뷰포트에 맞춰져 있어서, 연속되게 이어져 보이는 것입니다.

body

body에 적용된 배경 이미지 파일

content

content에 적용된 배경 이미지. 이미지의 배경색 빼고 같은 이미지다.
body {background: black url(shell-bg.jpg) 0 0 no-repeat fixed;}
div#content {background: #468 url(shell-blue.jpg) 0 0 no-repeat fixed;}
div#links a {background: transparent url(shell-fade.jpg) 0 0 no-repeat fixed;}
div#links a:hover {background: transparent url(shell-wash.jpg) 0 0 no-repeat fixed;}
해당 페이지의 배경을 결정하는 css

배경이 그려질 위치

background-clip은 배경이 적용될 범위를 명시하는 속성입니다. 적용 가능한 값은 다음과 같습니다.

text

`background-clip`에 `text`가 적용되면 나오는 결과

마치며

css에서 배경을 제어할 수 있는 속성이 이정도로 꽤 방대했다는 사실은 이번 글을 보면서 알게된것 같습니다. 글을 쓰게 된 계기는 분명 그라데이션을 적용한 배경 떄문이었는데 정작 정리한 글은 그라데이션을 제외한 배경에 관한 모든 속성이 된것 같아서 기분이 약간 이상하기는 합니다. 다음 글은 아마 css 그라데이션 속성들의 총 정리일것 같습니다. 제 글을 찾아서 읽어주셔서 감사합니다.

참고한 글들

background-attachment:scroll vs fixed : stack overflow