background

선택자 {background: }

background 태그는 태그에 배경을 만들어 주는 태그입니다.
사용자에게 보여주긴 하지만 css이기 때문에 이미지의 의미가 리더기에 읽히지는 않습니다.

정리 내용

background-image는 태그에 이미지를 불러와 배경으로 넣어주는 코드입니다.
url( )을 사용하여 이미지가 있는 경로를 불러와 출력합니다.

선택자 {background-image: url(./images/logo.png);}

bacground-size는 background에 넣은 이미지의 사이즈를 조정해 줍니다.
이미지 사이즈는 태그의 width 값을 기준으로 크다면 이미지가 잘려서 보이고, 작다면 이미지가 반복되어 보이는 현상이 생깁니다.

속성 값은 단위를 사용하여 출력을 하거나 cover, contain이 있습니다.
cover는 태그의 width와 height중 더 넓은 값에 맞춰 비율을 유지합니다.
contain은 태그의 width와 height중 더 짧은 값에 맞춰 비율을 유지합니다.

선택자 {background-size:100px;}

background-repeat은 위에 설명한 background-size가 태그의 width 값보다 작을 때 이미지가 반복되어 보이는 현상을 고치기에 적절한 태그입니다.
background-repeat의 속성값으로 아래와 같이 4개가 있습니다.

선택자 {background-repeat: no-repeat;}

background-position은 배경 이미지의 위치를 조정해주는 코드입니다.

선택자 {background-position:center;}

속성값으로 이미지가 위치할 방향을 적어주는 top, bottom, left, right, center가 있습니다.

방향에 대한 속성값은 2가지를 혼합하여 사용이 가능합니다.
예를 들어 아래의 코드는 오른쪽 위에 이미지를 배치시키는 속성값입니다.

선택자 {background-position:top right;}

또한 방향에 대한 속성값을 혼합한 방식처럼 x축과 y축의 값을 입력해줘서 원하는 곳에 이미지를 위치시킬 수 있습니다.

background-attachment는 스크롤을 했을 때 배경 이미지가 어떻게 보일지 설정을 해주는 코드입니다.
속성값은 scroll, fixed 가 있습니다.
아무 설정도 하지 않으면 기본값으로 scroll이 설정되어 있습니다.

scroll은 이미지가 스크롤을 했을 때 같이 스크롤이 되어 화면에 출력되는 방식입니다.
fixed는 스크롤을 했을 때 이미지는 고정되어 있는 방식입니다.
❕ fixed를 사용하여 웹을 표현하는 방식중에 Parallax Scrolling이라는 기법이 있습니다.

선택자 {background-attachment:fixed;}