고정된 이미지위로 스크롤 구현하기

사이트를 돌아다니다 보면 이미지가 고정되어 있고 마우스를 스크롤 하면 이미지 위로 여백이나 메뉴등이 덮어지는 사이트를 볼 수 있는데 css를 이용하여 해당 스크롤 이미지를 구현해 보겠습니다.

방법은 아주 간단합니다. 백그라운드로 사용할 이미지 하나만 있으면 됩니다.

먼저 다음과 같이 html기본 구조를 만들어 주고 css를 이용하여 페이지 전체의 여백을 없애줍니다.

그리고 바디 태그에 div태그를 만들고 클래스값을 주고

css를 이용하여 클래스값에 이미지 크기와 이미지 경로를 설정, 배경 이미지를 고정처리 하고 마진값에 많은 값을 줘서 스크롤이 발생되도록 설정한 후 파일을 열면

위와 같이 스크롤 이미지가 적용됩니다.

해당 페이지에서 고정된 이미지 위에 플립을 활용하면 움직이는 이미지박스를 만들 수 있으며, 다음 리뷰 때 플립을 활용하여 구현해 보도록 하겠습니다.