[ HTML / CSS ] 배경 고정 스크롤

결과물 ▼

다른 웹 퍼블리셔를 꿈꾸시는 웹 포트폴리오에도 스타벅스에도 가보면

위와 같이 되어 있는걸 보고 사람들에게 신박함을 줄 수 있겠다 해서 찾아서 해봤다.

모를때는 진짜... 레이아웃을 여러개 쓴건가? 자바스크립트로 했나? 싶었는데

한줄만 적어주면 되는것...;; ( 너무 허무.. )

background-attachment: fixed;

이 속성 한줄이면 된다...^^...

그래도 처음 보는 속성이니 좀더 자세히 알아봤다.

참고 사이트 : https://www.w3schools.com/cssref/pr_background-attachment.asp

우선 attachment는 영어로 '부착물'이란 뜻을 가지고 있다.

background-attachment는 배경을 어떻게 붙일지, 고정할지 설정 하는 친구다.

위의 사이트에 속성 값이 있는데 기본(default)값이 scroll이라고 되어있어서

우리가 평소에 따로 적어주지 않으면 그냥 스크롤따라 가는것 같다.

위와같이 fixed를 해주면 이미지가 윈도우 창에 상대적으로 위치 되어 스크롤을 해도 이미지가 고정이 되어 있다.

여기서 이미지를 반응형으로 해주고 싶어서 나는 background-size를 100%로 해주었는데

그래도 사진이 어색한 감이 있어 ( 창을 줄이면 이미지가 찌그러 지니까.. :_( )

다른 사이트를 참고해보니 다들 반응형으로 할때는 사이즈별로 사진을 따로 설정해 놨다.

그래서 많은 사이트에서 사용하지 않나 생각이 든다..( 이쁘긴 하지만..ㅠㅠ )