Language/Java Script
![[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수) 와 동일하게..
[Vanilla Java Script] 변수 let, const, var
JS에서의 변수의 종류와 선언, 할당에 대해 알아보자! ECMA Script 6+ 변수 선언 키워드 let const var 재할당 가능 불가능 가능 재선언 불가능 불가능 가능 스코프 블록 스코프 블록 스코프 함수 스코프 js에서 변수 선언 키워드는 let, const, var 3가지가 있다. 과거의 js에서는 모두 var로 통용되었는데 호이스팅*등의 문제로 ES6+로는 let과 const를 사용하는 것을 권장하고 있다. *호이스팅 : 변수 선언 이전에 참조 할 수 있는 현상으로, 선언 전에 사용하면 undifined를 반환 변수 선언 및 할당 변수는 선언 후 할당할 수 도 있고, 선언과 할당을 동시에 할 수 있다. let num1 // 선언 console.log(num1) // undefined num..
[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 속성을 설정하면 된다!! 지속 시간, 베지어 모양(프리미어나, 에펙 써본 사람은 키프레임에서 베지어 모양 생각하면 ..