Background

background와 관련된 속성

• background-color | 요소의 배경 색 지정
  
  • 기본값 | rgba(0, 0, 0, 0)
  • hex
  • rgb
  • rgba
  • 140 named color
• background-image | 요소의 배경 이미지 지정
  • 무료 이미지 사이트 | unsplash
  • html의 src처럼, url()을 반드시 사용해 주어야 한다
  • background-repeat | backgound-image를 반복해서 출력
    • repeat(기본값), no-repeat
  • background-size | backgound-size를 지정
    • contain | 요소의 크기에 맞춰서, 배경에 이미지 전체가 포함되도록(contain) 한다 
    • cover | 요소의 크기에 맞춰서, 배경에 이미지를 잘라 넣는다
    • 자체적으로 이미지 사이즈를 정할 수도 있다 => background-size: 100% auto; 라고하면 가로를 요소의 너비의 100%로 맞추고, 세로는 자동으로 조절한다는 뜻
  • background-position | x, y축 방향의 값을 지정해서 이미지의 위치 조정
    
    • background-position: center top;  

+) img 태그에서도 cover 기능을 사용 할 수 있다.

 

img {
  width: 110%;
  height: 100%;
  object-fit: cover;
  transform: rotateZ(-5deg) translateY(-4rem) translateX(-1rem);
}

 

​+) overflow: hidden | img 태그를 사용했을 때, 이미지의 사이즈가 컨테이너의 사이즈를 초과하면 그 부분을 보이지 않게 처리할 수 있다. 

+)출처(좌), 출처(우)

 

contain vs. cover(좌) background-position sample(우)

 

<img /> vs. background-image

SEO를 고려했을 때에는 img 태그를 사용하는 것이 더 바람직할 수도 있다. 하지만 다음과 같이 airbnb 사이트가 있고, 호스트가 직접 이미지 파일을 업로드하는 경우에는, 이미지의 사이즈를 예상할 수 없다(업로드할 수 있는 이미지의 규격을 정해두거나, 서버에서 이미지를 crop 처리할 수도 있지만, 지금은 그런 경우는 생각하지 않는다). 이런 경우에는 img 태그를 사용하기 보다는 background-image 속성을 이용하는 것이 좋다.  

뿐만 아니라 아래의 rating 앞에 별모양 아이콘도 background-image 속성을 이용해서 정의할 수 있다. 

 

airbnb card

 

1. background-image 속성을 적용할 html 요소를 따로 만들어서, 이 요소를 원하는 크기로 sizing한다. 
2. 원하는 background 속성을 작성한다. 
3. sample

.image-container {
  width: 18rem;
  height: 12rem; 
  background-image: url("image src");
  background-repeat: no-repeat;
  background-size: cover; 
  background-position: center center;
}

.icon-container {
  width: 1rem;
  height: 1rem; 
  background-image: url("icon src");
  background-repeat: no-repeat;
  background-size: contain; 
  background-position: center center;
}

 

+Color System

• rgb(R, G, B)
  • rgb(0, 0, 0) | black

monitor pixel

왼쪽의 그림은 컴퓨터, tv, 카메라 등의 모니터의 최소 단위인 1 pixel을 나타낸 것으로 R(Red), G(Green), B(Blue)로 이루어져 있다. 세가지 색상은 각각 0-255에 해당하는 값 중 하나를 가질 수 있는데, 0에 가까울 수록 그 색상 값이 희미하다는 것을 의미한다. 세 가지 색의 조합으로 총 256*256*256의 값인 약 17,000,000개의 색을 표현할 수 있다. 

 

색상의 조합

• hex | 각 색상의 0-255에 해당하는 값을 16진법으로 나타낸다. 
  • #ffff00 | red와 green이 최댓값(ff=255), blue가  최소값(0)을 갖는 yellow를 나타낸다. 
    • ff = 15(f)*16 + 15(f) = 255
    • d8 = 13(d)*16 + 8 = 216
  • 16진법 | 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a(10), b, c, d, e, f(15)