[CSS] BACKGROUD - 배경

 

background-color : 배경 색 지정

- 세밀하게 조절하고 싶으면 16진수 사용

- 투명도도 함께 조절하고 싶으면 rgba 사용

- 원색을 사용하고 싶으면 색상 이름 사용

 

background-clip : 배경 적용 범위 조절

- border-box 속성 : 박스 모델의 가장 외각인 테두리(border)까지 적용

- padding-box 속성 : 박스 모델에서 테두리를 뺀 패딩(padding)범위까지 적용

- content-box 속성 : 박스 모델에서 내용 부분에만 적용

 

background-image : 웹 요소에 배경 이미지 넣기

background-image : url('이미지 파일 경로')

 

background-repeat : 배경 이미지 반복 방법 지정

- repeat 속성 : 브라우저 화면에 가득 찰 때까지 배경 이미지를 가로와 세로로 반복

- repeat-x 속성 : 브라우저 창 너비와 같아질 때까지 배경 이미지를 가로로 반복

- repeat-x 속성 : 브라우저 창 높이와 같아질 때까지 배경 이미지를 세로로 반복

- no-repeat 속성 : 배경 이미지를 한 번만 표시하고 반복하지 않음

 

background-size : 배경 이미지 크기 조절

background-size : auto | contain | cover | <크기 값> | <백분율>

- auto 속성 : 원래 비경 이미지 크기만큼 표시

- contain 속성 : 요소 안에 배경 이미지가 다 들어오도록 이미지를 확대 및 축소

- cover 속성 : 배경 이미지로 요소를 모두 덮도록 이미지를 확대 및 축소

- 크기 값 : 너비와 높이 값을 지정

- 백분율 : 배경 이미지가 들어갈 요소를 크기를 기준으로 백분율 값을 지정하고, 그 크기에 맞도록 배경 이미지를 확대 및 축소

 

background-position : 배경 이미지 위치 조절

background-position : <수평 위치> <수직 위치>;
수평 위치 : left | center | right | <백분율> | <길이 값>
수직 위치 : top | center | bottom | <백분율> | <길이 값>

- 백분율 : 주어진 요소의 해당 위치에 배경 이미지의 위치를 백분율로 맞춤

background-position : 30% 60%;

  -> 배경 이미지를 넣으려는 요소의 왼쪽 모서리로부터 가로 30%, 세로 60%의 위치에 배경 이미지의 가로 세로가 30%, 60%인 위치를 맞춤

- 길이(px) : 배경 이미지의 위치를 길이로 직접 지정 가능

background-image : 30px 20px;

  -> 가로 30픽셀, 세로 20픽셀의 위치에 배경 이미지의 왼쪽 상단 모서리를 맞춤

 

background-origin : 배경 이미지 배치할 기준 조절

- border-box 속성 : 박스 모델의 가장 외각인 테두리(border)가 기준이 됨

- padding-box 속성 : 박스 모델에서 테두리를 뺀 패딩(padding)이 기준이 됨

- content-box 속성 : 박스 모델에서 내용 부분이 기준이 됨

 

background-attachment : 배경 이미지 고정

- scroll 속성 : 화면 스크롤과 함께 배경 이미지도 스크롤 됨 (기본 값)

- fixed 속성 : 화면이 스크롤되더라도 배경 이미지는 고정

 

background : 속성 하나로 배경 이미지 제어

- 위에 속성들을 한번에 사용 가능