CSS
![[Java Script & CSS] 페이지네이션 스크롤 인터렉티브 구현! (Pagination, Scroll Animation / Interactive)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FSCuuP%2Fbtq9eDjg2fM%2FbiYRsOKObq2IJrTJc9YzLK%2Fimg.png)
[Java Script & CSS] 페이지네이션 스크롤 인터렉티브 구현! (Pagination, Scroll Animation / Interactive)
js와 css로 페이지네이션, 스크롤 인터렉티브를 만들어보자! 목표 Goal💨 버튼으로 페이지 이동 스크롤로 페이지 이동 네비게이션 요소로 페이지 이동 현재 페이지 표시 페이지 이동시 배경화면, 이미지, 프로그래스바(Progress Bar) 부드럽게 변경(트렌지션) Preview 👍여기 클릭 HTML html은 간단한 태그들로 구성됩니다. 목표에서 설명한 것들을 구현하기 위한 요소들을 생성해줍니다. 이전, 다음 페이지로 이동하는 버튼과 Progress Bar를 작성하고, 그에 맞는 클래스 이름을 지정합니다. section 태그는 각 페이지별로 보여줄 내용을 포함합니다. 페이지 번호(혹은 제목), 내용, 이미지로 구성했습니다. ul태그는 네비게이션 역할을 하기 위해 page수(section수) 와 동일하게..
[Java Script + CSS] js와 css로 간단한 toggle animation 만들기
Vanilla js와 css로 부드럽게 움직이는 toggle button을 만들어보자! Preview On HTML On CSS 뒷 배경, 글자, 버튼 세개가 같은 위치이기 때문에 z-index로 조정한다. 낮을수록 더 뒤(바닥)에 위치하고, 가장 높은 것이 가장 앞에 위치하여 뒤에 있는 요소를 가릴 수 있다. z-index 속성이 동작하려면 반드시 position 속성을 작성해야한다!! absolute로 하면 transform이 먹지 않아서 버튼만 relative로 두었다. 스타일이 변경될 때 휙 휙 변경되는것이 아니라 천천히 변경되어 애니메이션 효과를 주고 싶은 경우 transition 속성을 설정하면 된다!! 지속 시간, 베지어 모양(프리미어나, 에펙 써본 사람은 키프레임에서 베지어 모양 생각하면 ..