18. background

이번 포스팅에서는 background 속성에 대하여 다뤄보겠습니다.

background 속성은 요소의 배경을 스타일링하는 기능을 가지고 있기 때문에 자주 사용되니 많이 연습해 보시는 것을 권해드립니다.

 

1. background-color

background-color 속성은 배경의 색상을 지정하는 역할을 하는데요.

다른 색상 지정 속성들과 마찬가지로 속성 값을 사용하여 배경 색상을 지정할 수 있으며, 기본 값은 transparent 입니다.

 

div {
    background-color: red;
}

2. background-image

background-image 속성은 배경에 사용할 이미지의 경로를 불러오는 역할을 하는데요.

경로를 지정하는 url에는 상대 경로와 절대 경로를 모두 사용할 수 있으며, 기본 값은 none 입니다.

 

div {
    background-image: url(../img/bg.png);
}

3. background-position

background-position 속성은 배경으로 사용하는 이미지의 위치를 지정하는 역할을 하는데요.

x축과 y축을 기준으로 이미지를 위치시킬 수 있으며, x축과 y축은 콤마(,)로 구분합니다.

 

div {
    background-position: 10px, 20px;
}

 

기본 값은 0,0 이며, 속성 값으로 고정 값, 퍼센트(%), 키워드가 있습니다.

고정 값은 기준으로부터 선언한 고정 값만큼 이동한 지점에 위치시키며, 퍼센트(%)는 기준으로부터 선언한 퍼센트(%) 값만큼 이동한 지점에 위치시킵니다.

키워드로는 top, right, bottom, left, center가 있습니다.

4. background-repeat

background-repeat 속성은 배경 이미지의 반복 여부와 방향을 지정하는 역할을 하는데요.

기본 값은 repeat이며, 속성 값으로는 repeat, repeat-x, repeat-y, no-repeat가 있습니다.

 

div {
    background-repeat: repeat-x;
}

 

repeat은 x축과 y축으로 모두 이미지를 반복시키며, repeat-x는 x축으로만 이미지 반복, repeat는 y축으로만 이미지를 반복시킵니다.

no-repeat은 x축과 y축으로 모두 이미지를 반복시키지 않습니다.

5. background-size

background-size 속성은 배경 이미지의 크기를 지정하는 역할을 하는데요.

이미지의 너비와 높이를 직접 지정할 수 있으며, 대체로 이미지의 비율을 유지한 채로 이미지 크기를 조정합니다.

 

div {
    background-size: 100px 200px;
}

 

기본 값은 auto를 가지고 원본 이미지의 크기가 적용됩니다.

속성 값으로는 auto, cover, contain, 고정 값, 퍼센트(%)가 있는데요.

cover는 지정한 요소를 모두 덮도록 이미지를 확대하거나 축소히키며, contain은 지정한 요소 안에 배경 이미지가 모두 들어가도록 이미지를 확대하거나 축소시킵니다.

고정 값으로는 지정한 너비와 높이만큼 이미지의 크기가 결정되며, 퍼센트(%)는 지정한 너비와 높이의 퍼센트(%) 값만큼 이미지의 크기가 결정됩니다.

6. background-attachment

background-attachment 속성은 스크롤에 따른 배경 이미지의 움직임 여부를 지정하는 역할을 하는데요.

기본 값은 scroll이며, 속성 값으로는 scroll, local, fixed가 있습니다.

 

div {
    background-attachment: fixed;
}

 

scroll은 배경 이미지가 요소를 기준으로 고정되어 있으며, 콘텐츠와 함께 스크롤되지 않습니다.

local은 배경 이미지가 요소를 기준으로 고정되어 있으나, 콘텐츠와 함께 스크롤됩니다.

fixed는 viewport(웹페이지 영역)를 기준으로 고정되어 있어, 스크롤에 영향을 받지 않습니다.

 

background 속성은 축양형으로 선언이 가능하며, 모든 속성을 표기하지 않아도 됩니다.

다만, 별도로 표기하지 않은 속성은 기본 값이 적용됩니다.

 

div {
    background: background-color background-image background-repeat background-position / background-size background-attachment;
}

div {
    background: #000 url(../img/bg.png) no-repeat 10px 20px / 10px 20px fixed;
}

 

여기까지 background 속성에 대하여 알아보았는데요.

실무에서도 background 속성은 다양한 형태로 많이 사용되니, 충분히 개념을 숙지하신 후 축약형 사용법도 많이 연습해보시길 바라겠습니다.

오늘도 읽어주셔서 감사합니다.

좋은 하루 보내세요! :)