가변헤더 (1) 썸네일형 리스트형 [CSS] 스크롤 올리면 변경되는 헤더 create-react-app 으로 만든 프로젝트에서 스크롤을 올림에 따라 변경되는 헤더 만드는 방법을 알아보자. HTML 코드 script 태그 부분이 핵심이다. header 의 offset 을 인지하여 small 클래스를 동적으로 부여 또는 삭제해 준다. CSS 코드 동적으로 부여된 #header.small 부분이 핵심이다. postion 을 fixed로 잡아주고(top: 0, left: 0) height 를 부여해줬다. #header 에서는 transion 부분과 z-index 부분이 핵심이다. transion 은 변경이 부드럽게 보이도록 하고 z-index 는 content 부분이 스크롤되어서 올라와도 header 가 항상 제일 위에 보이도록 설정해 준다. .App { text-align: cen.. 이전 1 다음
