div

• div : 영역의 개념 / CSS와 같이 사용함으로써 시너지를 일으킴
• background-color : 배경색 지정 가능
  • #, RGB, 원색 선택 다 가능

background-image / background-repeat

• background-image : 이 속성을 사용하면 배경이미지 지정 가능

  <aside> 🥕 url을 속성값으로 넣어줘야함

  </aside>

• background-repeat : 속성을 사용하여 배경의 반복을 지정할 수 있음

  <aside> 🥕 repeat : 반복 O (기본값)

  no-repeat : 반복 X

  repeat-x : x축 반복

  repeat-y : y축 반복

  </aside>

아무것도 안써서 기본값 = repeat

no-repeat

repeat-x (x축으로 반복)

repeat 안 쓴거(기본이 repeat)

no repeat

repeat-x 오른쪽으로 반복 / y 하면 세로로 반복

background-size / background-position

• background-size : 속성을 이용해서 배경 이미지 크기 지정 가능

  • px , % 둘 다 가능

  <aside> 🥕 왼쪽 입력 : 가로 크기 오른쪽 입력 : 세로 크기

  </aside>

왼쪽 입력 300px 오른쪽 입력 270px

• background-position : 속성을 이용해서 배경의 위치 지정 가능

  • px , % 둘 다 가능

  <aside> 🥕 왼쪽 입력 : 왼쪽 벽에서 떨어진 길이 / left(왼쪽 딱붙), center(가운데로), right(오른쪽 딱붙) 사용 가능

  오른쪽 입력 : 위쪽 벽에서 떨어진 길이 / top(맨위 딱붙), center(가운데로) , bottom(맨아래 딱붙) 사용 가능

  → ?? 왼쪽 오른쪽 순서가 이상함 top center이랑 center top이랑 결과가 똑같음! → 사실 순서는 상관 없었다….

  </aside>

좌우 가운데로

맨위에 붙고 좌우 가운데로

50% 50% 하면 왼쪽에서 50% 위에서 50% 떨어진 위치

• body 전체 크기 요소와 이미지의 간격이 맞지 않아서 height 높이 간격 지정

background-attachment

• background-attachment : 속성을 사용하여 배경 이미지를 고정할 것인지 원하는 위치에만 놔둘 것인지 선택 가능

  <aside> 🥕 fixed : 스크롤에 따라 화면에 고정되는 형태 (스크롤 해도 계속 그 자리에 고정)

  scroll : 원본 화면에 위치해 놓고 움직이지 않는 형태 (한 자리에 사진이 위치하고 스크롤로 볼 수 있음)

  </aside>

fixed 고정

scroll scroll 해야 볼 수 있음