웹프로그래밍 css(10) 속성 - background

🔥오늘의 목표🔥

속성의 배경값을 설정할 수 있는 속성들에 대해서 알아보자

📕 배경속성

• 배경을 설정하는 css속성은 다양하게 있는데, 보통 맨 마지막에서 설명한 background 속성을 사용하고 값을 지정한다. 값은 공백으로 구분해서 지정한다.

div { background: no-repeat center/80% url("../img/image.png"); }

위의 코드는 여러 값을 background를 이용해 지정한 것이다. 어떤 뜻인지는 더 살펴보자.

📖 background-color

• 배경의 색상을 지정하는 속성이다.
  앞에서 배웠던 색상값을 이용해 지정할 수 있다.

background-color =rgb(255,34,1)

📖 background-image

• 배경에 이미지를 삽입할 때 이미지의 경로를 지정하는 속성이다.
  url( "" )의 형태로 값을 지정한다.

div { background-image: url("https://via.placeholder.com/100x50"); }

📖 background-repeat

• 이미지 반복 설정을 위한 속성이다.

📒 값

• repeat : x축 y축 방향으로 반복
• repeat-x : x축 방향으로만 반복
• repeat-y : y축 방향으로만 반복
• no-repeat : 반복하지 않는다.

div:nth-of-type(2) { background-repeat: repeat-x; }

📖 background-position

• 배경 이미지가 어디에 위치할 것인지를 결정한다.

📒 값

• n% : left top값인 기준으로부터 % 만큼 떨어진 지점과 이미지의 % 지점이 일치하는 곳에 위치시킵니다.
  - 0% 0% = left top
  - 50% 50% = center
  - 100% 100% = right bottom
  두가지중 한가지만 지정하면 나머지는 50%이 자동적용된다.

• px : 픽셀 기준 (이미지의 left top값이 기준점이 되어 작용)

• 키워드 : top, left, right, bottom, center
  - x축 left, right
  - y축 top, bottom
div:last-of-type { background-position: center; }

background-position: 10% 100px;

-> 왼쪽에서 10%, 위쪽에서 100px에 배경이미지를 배치한다.

📖 background-size

• 배경이미지의 크기를 결정한다.

📒 값

• auto : 유지한다. 기본값으로 설정되어있음.
• length : 가로크기지정 세로크기지정 , 지정안하면 자동으로 정해짐 (백분율값도 사용가능)
• cover : 배경을 전체 다 덮도록 원본 비율을 유지하면서 확대,축소한다.
• contain : 배경을 벗어나지 않는 크기로 원본 비율을 유지하면서 확대,축소한다.
• initial : 기본값으로 설정합니다.
• inherit : 부모 요소의 속성값을 상속받습니다.

📖 background-attachment

• 스크롤시 배경이미지의 위치 변화 여부를 결정함.

📒 값

• fixed : 스크롤되더라도 고정됌
• scroll : 스크롤되는 위치에 지정된다. (스크롤을 따라간다.)

div:last-of-type { background-attachment: fixed; }

📖 background

• 위에서 배운 속성값을 아우르는 속성이다.

background: [-color] [-image] [-repeat] [-attachment] [-position];

🔥오늘의 헷갈리는 점🔥

❓이미지크기와 이미지 위치 설정 구분을 어떻게 하지?

👉이미지 위치/이미지 사이즈로 순서를 설정한다.
값은 바로 뒤에만 위치할 수 있으며 '/' 문자로 구분해야 합니다. 예를 들면 "center/80%" 처럼 사용합니다.

✍️예시코드

background: no-repeat center/80% url("../img/image.png");  

👉배경이미지를 다음 url으로 설정하고 반복없이 이미지위치를 center에 놓고 크기를 80%로 줄인다.

🔥오늘의 배운 점🔥

  그냥 넘어 갈 수 있었던 부분을 자세히 공부해서 뿌듯하다!! 앞으로도 시간이 좀 더 걸리더라도 
  헷갈리는 부분들은 짚어가면서 탄탄한 실력을 쌓아야겠다.