반응형 프론트엔드10 [HTML/CSS/JS] React를 통해 useState()를 사용해 보자 : 상태를 업데이트 해보자 usdState() 함수는 리액트에서 컴포넌트 요소들의 값을 간편하게 생성하거나 업데이트하는 도구를 제공한다. 아래의 예시를 보자. state라는 변수에 초기값을 0으로 설정 ex) const [state, setState] = useState(0); setState()를 통해 state의 값을 변경할 수 있다. ex) setState(state + 1); 실제 예시를 적용해 보자 See the Pen Untitled by me_in_sk (@sleepyMS) on CodePen. useState() 함수를 왜 사용하는 걸까? 그저 변수를 선언하고 변경할 뿐이라면 useState()를 사용할 필요가 있는지 의문이 들 수 있다. 하지만, 많이 사용하는 기존의 방식대로 let이나 var를 통해 변수를 선언하.. 2023. 8. 13. [HTML/CSS] calc()를 통해 속성값을 계산해 보자 : 사칙연산을 통한 속성값 계산 calc() 함수는 다양한 속성들의 속성값 계산을 가능하게 만들어 준다. 아래 예시를 보자. See the Pen Untitled by me_in_sk (@sleepyMS) on CodePen. 계산 법칙과 우선순위는 사칙연산과 동일하다. 괄호 안을 계산 곱셈과 나눗셈을 계산 덧셈과 뺄셈을 계산 동순위 연산이 2개 이상이면, 왼쪽부터 오른쪽 순으로 계산 계산의 대상으로 px, % 등을 함께 계산하는 것이 가능하다. See the Pen Untitled by me_in_sk (@sleepyMS) on CodePen. calc() 함수를 통해 요소의 너비나 높이 뿐만 아니라 다양한 속성들의 속성값을 계산하는 것이 가능하며, 코드의 확장성을 위해 :root를 통한 변수를 통제하여 일정 값들을 계산하는 것 또한.. 2023. 6. 21. [HTML/CSS/JS] GSAP로 애니메이션을 만들어 보자 : 문장 애니메이션 효과 만들기 이번 포스팅에서는 GSAP을 이용하여 문자열에 애니메이션 효과를 만들어 보자. 다음과 같은 애니메이션을 만들기 위한 GSAP의 사용법이 궁금하다면 아래의 포스팅을 참고하길 바란다. See the Pen Untitled by me_in_sk (@sleepyMS) on CodePen. [HTML/CSS/JS] GSAP로 애니메이션 효과 만들기 : 시간순으로 다양한 애니메이션 효과를 만들어 보자 feat. timeline [HTML/CSS/JS] GSAP로 애니메이션 효과 만들기 : 시간순으로 다양한 애니메이션 효과를 만들어 보자 fe 이번 포스팅에서는 GSAP의 사용법에 대해 알아보는 시간을 가져보도록 하자. GSAP는 보다 다양하고 복잡한 애니메이션을 구현하기 위한 도구로써, 보다 자유로운 애니메이션을 제.. 2023. 6. 14. [HTML/CSS/JS] GSAP로 애니메이션 효과 만들기 : 다양한 애니메이션 기능을 구현해 보자 feat. to, from과 fromTo 이번 포스팅에서는 GSAP의 to, from과 fromTo를 이용해 애니메이션 효과를 만들어 보도록 하자. 다음과 같은 애니메이션을 만들기 위한GSAP의 사용법이 궁금하다면 아래의 포스팅을 참고하길 바란다. See the Pen Untitled by me_in_sk (@sleepyMS) on CodePen. [HTML/CSS/JS] GSAP로 애니메이션 효과 사용하기 : 시간순으로 다양한 애니메이션 효과를 만들어 보자 feat. timeline [HTML/CSS/JS] GSAP로 애니메이션 효과 사용하기 : 시간순으로 다양한 애니메이션 효과를 만들어 보자 이번 포스팅에서는 GSAP의 사용법에 대해 알아보는 시간을 가져보도록 하자. GSAP는 보다 다양하고 복잡한 애니메이션을 구현하기 위한 도구로써, 보다.. 2023. 6. 13. 이전 1 2 3 다음 반응형
