[CSS] TIL5 : 배경(백그라운드) 설정
▣ 배경(Background)
색상(Color), 이미지(Image), 반복(Repeat), 위치(Position), 크기(Size), 부착(Attachment) 등 배경과 관련된 다양한 속성에 대하여 살펴보겠습니다.
□ 배경 색상(Background color)
임의로 작성한 웹 페이지에 아래와 같이 'background-color' 속성을 이용하여 배경 색상을 적용할 수 있습니다. 참고로 서체의 색상은 배경과 어울릴 수 있도록 오렌지색으로 설정했습니다. 자세한 사항은 링크를 참조하기 바랍니다.
<style>
#first-block {
color: orange;
background-color: green;
}
</style>
배경 색상 속성의 값이 'green'으로 설정된 후에 배경 색상이 녹색으로 바뀐 것을 확인할 수 있습니다.
□ 배경 이미지(Background image)
'background-image' 속성과 'url(" ")' 코드를 이용하여 색상이 아닌 이미지를 배경으로 적용할 수도 있습니다. 이때 url()의 문자열 인자는 이미지 파일이 존재하는 경로를 의미합니다. 자세한 사항은 링크를 참조하기 바랍니다.
<style>
#first-block {
color: orange;
background-image: url('img/beach.jpg');
}
</style>
배경 이미지 속성의 값이 " url('img/beach.jpg') "로 설정된 후에 배경 이미지가 적용된 것을 확인할 수 있습니다.
□ 배경 반복(Background repeat)
위와 같이 단락이 길어지면 이미지는 오른쪽과 아래쪽 방향으로 반복하여 사용됩니다. 이런 현상이 나타나는 이유는 'background-repeat'라는 속성의 초기값이 'repeat'로 설정되어 있기 때문입니다. 위와 같은 스타일을 원하지 않는다면 배경 반복 속성의 값을 'no-repeat'로 설정하여 아래와 같이 적용할 수 있습니다.
배경 반복 설정에는 이외에도 X축 또는 Y축 방향 즉, 오른쪽 또는 아래쪽 방향으로만 이미지를 반복하거나 이미지의 잘림 없이 반복하는 설정 등이 있습니다. 자세한 사항은 링크를 참조하기 바랍니다.
<style>
#first-block {
color: orange;
background-image: url('img/beach.jpg');
background-repeat: no-repeat;
}
</style>
배경 반복 속성의 값이 'no-repeat' 로 설정된 후에 배경 이미지가 반복되지 않는 것을 확인할 수 있습니다.
□ 배경 크기(Background size)
위의 결과에서 배경 이미지를 반복하지 않기 위해 배경 반복 속성의 값을 'no-repeat'로 설정했지만 이미지의 크기가 단락의 크기와 맞지 않는 상황이 발생했습니다. 이런 경우에 'background-size' 속성의 값을 'cover'로 설정하여 배경의 크기를 단락의 블럭 크기에 맞출 수 있습니다.
배경 크기 설정에는 이외에도 다양한 단위나 키워드를 이용하는 방법들이 있습니다. 자세한 사항은 링크를 참조하기 바랍니다.
<style>
#first-block {
color: orange;
background-image: url('img/beach.jpg');
background-repeat: no-repeat;
background-size: cover;
}
</style>
배경 크기 속성의 값이 'cover'로 설정된 후에 이미지의 크기가 단락의 블럭 크기에 맞게 늘어난 것을 확인할 수 있습니다.
□ 배경 위치(Background position)
한편 배경 이미지가 충분히 크다면 전체 이미지 중 일부분만 보이게 되는데, 이 때 'background-position' 속성을 이용하여 전체 이미지에서 배경으로 보이는 위치를 바꿀 수 있습니다. 여기서는 아래의 코드와 같이 배경 위치 속성의 값을 'center'로 설정하여 스타일을 적용해 보겠습니다.
배경 위치의 설정은 이외에도 다양한 단위나 키워드를 이용하는 방법들이 있습니다. 자세한 사항은 링크를 참조하기 바랍니다.
<style>
#first-block {
color: orange;
background-image: url('img/beach.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
</style>
배경 위치 속성의 값이 'center'로 설정된 후에 전체 이미지에서 배경으로 보이는 부분이 가운데로 바뀐 것을 확인할 수 있습니다.
□ 배경 부착(Background attachment)
웹 페이지가 길어져 스크롤 기능이 활성화 되면 'background-attachment' 속성을 이용하여 배경 이미지를 브라우저에 고정하거나 웹페이지와 함께 스크롤링 할 수 있습니다. 참고로 이미지의 크기를 최적화하기 위해 'background-size'는 'contain'으로 설정했습니다.
<style>
#first-block {
color: orange;
background-image: url('img/beach.jpg');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
background-attachment: fixed;
}
</style>
배경 부착 속성의 값이 'fixed'로 설정된 후에 배경 이미지가 브라우저에 고정된 것을 확인할 수 있습니다.
마찬가지로 스크롤링 기능이 활성화 되었을 때 이번에는 아래의 코드와 같이 배경 부착 속성을 적용시켜 보겠습니다. 'background-size'는 'contain'으로 설정했습니다.
<style>
#first-block {
color: orange;
background-image: url('img/beach.jpg');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
background-attachment: scroll;
}
</style>
배경 부착 속성의 값을 'scroll'로 설정하면 배경 이미지가 웹 페이지와 함께 스크롤링 되는 것을 확인할 수 있습니다.
□ 단축 문법(Shorthand syntax)
앞서 설명한 서체의 경우와 마찬가지로 배경 설정에도 단축 문법을 적용하여 속성의 값을 작성할 수 있습니다. 다만 작성 순서에 따라 스타일이 적용되지 않을 수도 있기 때문에 익숙하지 않다면 굳이 단축 문법을 쓸 필요는 없습니다.
<style>
#first-block {
color: orange;
background-image: url('img/beach.jpg');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
background-attachment: fixed;
}
</style>
위의 코드는 이제까지 배경 설정시 사용한 속성의 값들을 작성한 것이며, 여기에 단축 문법을 적용하면 아래와 같습니다.
<style>
/* Shorthand syntax */
#second-block {
color: orange;
background: url('img/beach.jpg') no-repeat center / contain fixed;
}
</style>