[CSS] background로 배경 꾸미기

✔️ background 속성

📌 단축 속성

background: [color] [image] [repeat] [position/size] [origin/clip];

 

📌 background-color

• 컬러 키워드, transparent나 currentcolor, hex, rgb(a), hsl(a) 값을 이용해 배경 색을 지정합니다.
• 네트워크가 내려가는 등 이미지를 불러올 수 없는 상황에서 배경 색이 대체할 수 있기 때문에 꼭 지정해야 합니다.

 

📌 background-image

• 배경 이미지를 한 개나 여러 개 지정합니다.
  • url("") 을 통해 지정할 수 있으며 콤마(,)로 구분해 여러 개의 이미지를 지정할 수 있습니다.
  • 또한, gradient를 통해 그라데이션을 배경으로 지정할 수 있습니다.

 

📌 background-origin

• 배경의 원점을 테두리 시작점, 테두리 내부, 안쪽 여백 중 하나로 지정합니다.
  • border-box : 배경을 테두리 박스에 상대적으로 배치합니다.
  • padding-box : 배경을 여백 박스에 상대적으로 배치합니다.
  • content-box : 배경을 컨텐츠 박스에 상대적으로 배치합니다.
• background-attachment가 fixed인 경우 무시됩니다.

See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.

 

 

📌 background-position

• 각 배경 이미지의 초기 위치를 설정합니다. (background-origin에 의해 설정된 원점을 기준으로 합니다.)
  • top, bottom, left, right, center : 키워드로 각 키워드에 해당하는 위치로 설정합니다.
  • 25% 75% : 퍼센트에 의한 위치로 설정합니다.
  • 0px 0px : 크기에 의한 위치로 설정합니다.
  • 0 0, center : 여러 개의 이미지는 콤마(,)를 이용해 구분해 설정합니다.
  • bottom 10px right 20px : 모서리 오프셋

See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.

 

📌 background-repeat

• 배경 이미지의 반복 방법을 지정합니다.
  • repeat : 배경 영역을 채울 때까지 이미지를 반복하며 repeat-x, repeat-y를 통해 x, y축에 각각 적용할 수 있습니다.
  • space : 요소가 잘리지 않을만큼 이미지를 반복합니다. 요소의 양쪽 끝부터 각 이미지 사이의 남은 여백을 고르게 분배합니다.
  • round : 이미지의 크기를 줄여 새로운 이미지를 위한 공간을 확보해 꽉 채웁니다.
  • no-repeat : 이미지를 반복하지 않습니다.

See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.

 

📌 background-size

• 요소 배경 이미지의 크기를 설정합니다.
  • contain : 이미지가 잘리거나 찌그러지지 않는 한도 내에서 제일 크게 설정합니다.
  • cover : 이미지가 찌그러지지 않는 한도 내에서 제일 크게 설정합니다.
  • auto : 원본 크기로 유지
  • 50% : 이미지의 너비를 설정합니다. (높이는 auto)
  • 50% 25% : 첫 번째 값은 이미지의 너비, 두 번째 값은 이미지의 높이로 설정합니다.
  • auto, auto : 여러 개의 배경은 콤마(,)로 구분하여 설정합니다.

 

📌 background-attachment

• 배경 이미지를 뷰포트 내에서 고정할지 아니면 컨텐츠와 함께 스크롤될건지를 지정합니다.
  • fixed : 배경을 뷰포트에 대해 고정합니다.
  • local : 배경을 요소 컨텐츠에 대해 고정합니다. 요소에 스크롤이 존재하면 함께 스크롤됩니다.
  • scroll : 배경을 요소 자체에 대해 고정합니다. 요소에 스크롤이 존재해도 배경이 함께 스크롤되지 않습니다.

See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.

 

📌 background-clip

• 요소의 배경이 테두리, 안쪽 여백, 콘텐츠 상자 중 어디까지 차지할지 지정합니다.
  • border-box : 배경이 border 까지 차지합니다. (z축 상 border 아래 위치)
  • padding-box : 배경이 padding 까지 차지합니다.
  • content-box : 배경이 컨텐츠 상자에 맞춰 그려집니다.
  • text : 배경을 텍스트 위에만 그립니다.

See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.

 

✔️ 그라데이션

• linear-gradient
• radial-gradient
• conic-gradient
• repeating-linear-gradient
• repeating-radial-gradient

 

📄 참고

https://developer.mozilla.org/en-US/

https://www.yalco.kr/@html-css