Background property에 대해서 정리를 해보려고 한다. 특히, img element를 사용하지 않고 background property를 사용하는 방법에 대해서 정리하고 기억하고자 한다. ( 특정 이미지를 유저에게 보여주는 경우에 이미지의 크기가 일정하지 않을 수 있다. 또한 다양한 변수에 대처하기 위해서 여러 방법을 알아두면 좋다.)
참고 : 김버그의 CSS는 재밌다

Background

1. Property

background-color hex , rgb , rgba 등으로 배경 색상을 지정할 수 있다.
background-image 이미지를 배경에 넣을 수 있다.

.box{
  background-image: url(./directory/image.jpg);

background-repeat 이미지를 반복할 것인지를 결정할 수 있다.

repeat 이미지를 반복시킨다. (default)
no-repeat 이미지를 반복시키지 않는다.

background-size 이미지의 크기를 설정할 수 있다.

contain 이미지가 요소의 width, height에 포함되도록 조정되어 들어간다. 큰 이미지의 경우에는 비율은 동일하지만 축소되어 들어간다.
cover 이미지가 요소에 꽉 채워지면서 들어간다. 큰 이미지의 경우에는 요소의 width, height를 넘어가는 부분은 짤리게 된다.
custom 위의 두 방식과는 다르게 % , px 등을 입력해서 직접 비율이나 크기를 조정할 수도 있다.

background-position 이미지의 위치를 조정할 수 있다. center를 주로 사용한다.

2. 간단한 예제

<에어비앤비 카드 작성해보기>

해당 이미지는 '김버그의 CSS는 재밌다' 에서 figma를 통해 제공하는 예제의 시안이다. 아래의 상태에서 css를 작성해서 위처럼 만들면 된다.

어떠한 스타일이 들어가지 않았고 간단하게 html만 작성되어 있는 상태이다. 우선, figma를 통해서 폰트를 확인하고 적용시켰다.

* {
  box-sizing: border-box;
  margin: 0;
}

body {
  font-family: "Poppins", sans-serif;
 
}

또한, 필요없는 margin을 없애고 box-size를 border-box로 적용해서 width나 height를 적용하는데 불필요한 일을 줄였다.

.card-image {
  background-image: url(./assets/img-house.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 300px;
  height: 200px;
  border-radius: 6px;
}

본격적으로 스타일을 적용하기 위해서 card-image에 background property를 적용해 주었다. 이미지의 주소를 찾아서 url를 통해 입력했고 반복 없이, 이미지가 요소를 꽉채우도록 조정했다. 위의 그림처럼 테두리에 border-radius 도 6px를 주었다.

👊 중간 결과

.plus-badge {
  display: inline-block;
  font-size: 14px;
  line-height: 1.4285714286;
  font-weight: 500;
  padding: 1px 8px;
  border-radius: 4px;
  color: #fff;
  background-color: #92174d;
  text-transform: uppercase;
  margin-right: 8px;
}

.property-type span,
.property-rate span,
.card-detail {
  color: #7d858f;
}

.property-rate {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-size: 16px;
  line-height: 1.25;
}

.property-rate::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  margin-right: 4px;
  background-image: url(./assets/icon-star.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
}

.card-title {
  font-weight: 400;
  font-size: 20px;
  line-height: 1.6;
  margin-bottom: 16px;
}

.card-detail {
  font-size: 14px;
  line-height: 1.1428571429;
}

.property-detail div:first-child {
  margin-bottom: 8px;
}
.property-detail dd span::after {
  content: " ·";
  maring: 0 6px;
}

.property-detail dd span:last-child::after {
  content: "";
  margin: 0;
}

card-content 에 있는 여러가지 요소들에 스타일을 적용해 주었다. 여기서 살짝 헤맸던 부분은 4.97의 리뷰 점수 앞에 별을 적용하는 부분이었다. 별 보다 4.97이라는 점수가 중요한 것이기 때문에 html의 img 태그를 사용하지 않고 가상 요소(pseudo-element) before을 사용하였다. 처음에는 content property 를 작성하지 않은 것을 발견하지 못하고 한참을 고민하며 검색을 했고, 공식 문서를 뒤져보다가 바보 같은 실수를 했다는 것을 발견했다. content는 빈 내용이더라도 꼭! 추가하자.

.card {
  display: flex;
  width: 840px;
  padding: 24px 24px;
  background-color: #fff;
}

이제 가로 정렬을 위해 card에 display 를 flex 로 설정해주면 된다. 편의성을 위해서 body에는 배경색으로 검은색을, card에는 흰색을 주었다.

👊 중간 결과

/* dt의 내용은 스크린 리더에만 나오도록 바꿔주기 */
.sr-only {
  position: absolute;
  z-index: -100;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}

/* 좋아요 버튼을 추가해서 위치를 조정해주기, 
이 때 card-image에 position : relative 추가해주기 */
.like-button {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #fff;
  background-image: url(./assets/icon-favorite.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 24px 24px;
  border: none;
  cursor: pointer;
}

/* 시안처럼 남은 공간을 card-content가 다 차지할 수 있도록 하기 */
.card-content {
  flex-grow: 1;
}

.card-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

나머지 디테일한 요소들을 스타일 하였다. 인상 깊었던 것은 html에 class로 sr-only 등이 부여된 내용들은 스크린 리더로는 읽히지만 따로 보이지는 않도록 해야한다는 점이었는데, aria-label를 사용할 때와 같이 모든 사용자에 대한 배려를 느낄 수 있는 부분이었다.

👊 최종 결과

기억에 남는 코드 & 생각

처음에는 background-image의 효용성에 대해서 의문이 들기도 했다. 하지만, 에어비앤비 예시를 보면서 굳이 background-image를 img element 대신에 사용하는 이유에 대해서 알게 됐다. 에어비앤비에 올라오는 사진들은 여러 사용자가 찍어서 올리기 때문에 같은 규격으로 올라오지 않는다. 그 때마다 각각 다른 사이즈로 보여진다면 매우 정신이 없을 것이다. 또한, 다른 사이즈의 사진들을 일일히 조절하면서 맞추는 것도 매우 피로한 작업이 될 것이다. 이럴 때 background-image와 여러 background property를 이용하면 피로한 작업을 줄일 수 있게 된다.

이번 공부를 하면서 기억에 남는 코드를 뽑아보자면

.property-rate::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  margin-right: 4px;
  background-image: url(./assets/icon-star.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
}

이것을 뽑으려고 한다. 가상 요소를 사용해서 html의 정보성을 어긋나지 않게 하면서 디자인적으로는 유의미한 것을 만들 수 있었다. content property를 작성하지 않는 실수로 고생을 하기도 했기 때문에 꼭 기억하려고 한다.