일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
- 버킷리스트
- 반응형 이메일
- 이메일 코딩
- 자바스크립트
- 무료리액트강의
- nomadcoders
- React & Redux로 시작하는 웹 프로그래밍
- 반응형
- REACT강의
- redux
- free react course
- 패스트캠퍼스
- class
- 코딩
- CSS
- react
- 리액트
- JavaScript
- K디지털기초역량훈련
- 노마드코더
- 바이트디그리
- bucket list
- ENFJ포스팅
- 객체지향
- ENFJ
- object-oriented programming
- 내일배움카드
- HTML
- 국비지원
- Today
- Total
미미 공부/취미방
[패스트캠퍼스:4주차] React & Redux로 시작하는 웹 프로그래밍 : react 강의 3/4 본문
4주차.Chapter 3
원근감을 갖고 번갈아 회전하는 도형
- 회전할 두 도형을 동일한 부모 요소 내부에 넣는다.
- position: absolute로 도형 중 1개의 요소를 다른 층으로 옮겨 두 요소가 겹쳐지게 한다.
- 요소 중 1개를 transform : rotateY(-180deg);로 뒤집고 backface-visibility: hidden;으로 보이지 않게 설정한다.
- 두 요소와 동일한 크기로 부모의 크기를 설정한다.(그렇지 않으면 도형 바깥 영역에 hover 했을 때도 tranform이 동작한다.)
- 부모 요소에 perspective를 줘서 회전이 자연스러워 보이게 만든다.
스크롤이 내려가면 나타나는 요소
ScrollMagic은 뷰포트에 특정 지점과 요소를 지정해 놓으면,
지정 요소가 그 지점에 도달했을 때,
적어놓은 코드를 실행해 애니메이션 효과를 준다.
https://cdnjs.com/libraries/ScrollMagic
위의 코드에서 변수에 들어있는 요소만 바꾸면 사용 가능하다. (복수 요소 선택 시 사용하는 코드)triggerHood는 애니메이션 동작 지점(뷰포트 최상단이 0, 최하단이 1로 지정되어 있다.),setClassToggle(요소, 클래스명)는 요소에 클래스명을 toggle(넣었다 뺐다)하는 코드이다.
css의 transition-delay로 요소가 나타나는 순서 조절을 해서 더 자연스러운 느낌을 줄 수 있다.
특수기호
html 문법에 혼란을 줄 수 있어서 특수기호를 넣기 위해서는 HTML Entities로 특수기호를 넣는 걸 추천한다.
구글에 HTML Entitile/Entity라고 검색하면 다양한 사이트가 나온다.
https://www.freeformatter.com/html-entities.html
HTML에서 이모티콘도 사용이 가능하다.
https://www.quackit.com/character_sets/emoji/emoji_v3.0/unicode_emoji_v3.0_characters_all.cfm
img요소의 중앙정렬
img 요소는 크기가 지정되어 있는 걸로 취급돼서
가로, 세로 값을 따로 주지 않아도 margin을 통해 가운데 정렬이 가능하다.
올해 연도 가져오기
new Date().getFullYear()
자바스크립트 날짜 정보를 알아낼 수 있는 생성자함수 (new ...)
페이지 상단으로 이동하는 버튼
애니메이션을 위해 사용한 라이브러리 gsap의 추가 기능으로,
연결해 놓은 gsap에 모든 기능이 들어있으면 너무 무거우니, 사용하고 싶은 기능이 있으면
추가해서 사용할 수 있게 구성되어있고,
ScrollToPlugin이라는 라이브러리가 그중 하나이다.
https://cdnjs.com/libraries/gsap
'to FED' 카테고리의 다른 글
[패스트캠퍼스:5주차] React & Redux로 시작하는 웹 프로그래밍 : react 강의 1/5 (0) | 2022.07.19 |
---|---|
[패스트캠퍼스:4주차] React & Redux로 시작하는 웹 프로그래밍 : react 강의 4/4 (0) | 2022.07.19 |
[패스트캠퍼스:4주차] React & Redux로 시작하는 웹 프로그래밍 : react 강의 1~2/4 (0) | 2022.07.12 |
[패스트캠퍼스:3주차] React & Redux로 시작하는 웹 프로그래밍 : react 강의 5/5 (0) | 2022.07.11 |
[패스트캠퍼스:3주차] React & Redux로 시작하는 웹 프로그래밍 : react 강의 3.5 ~ 4/5 (0) | 2022.07.09 |