목록사이트모작/1분코딩 (2)

yeji

인터랙티브 웹 클론 Chapter 02 - BBC "코로나19가 바꿀 사무실의 미래"

1편에 이어서~ 각 이미지 (.graphic-item)에게 opacity:0;을 해주었고 각 구간마다 보여주기 위해서 이미지에 .visible이라는 클래스를 주어지게한다! 붙였다 뗐다! 이미지가 나올 부분은 말풍선이랑 맞아야하기때문에 이미지랑 말풍선이 쌍으로 맞아야 한다. => 이미지와 말풍선을 인덱스로 맞춰준다. 이미지 0 = 말풍선 0 이걸 어떻게 하느냐! html 각 이미지와 말풍선에 "data-index"를 넣는다! html코드에 일일히 다 넣어주기 보다는 javascript에서 반복문으로 실행시켜준다. 즉시실행함수를 이용하여 안에 코드를 작성한다! 먼저 각 말풍선, 이미지들을 가져오고 반복문으로 넣어준다 setAttribute로 넣어줄수도 있지만 dataset으로 넣어줄 수도 있다! 스크롤할때의..
사이트모작/1분코딩 2021. 1. 26. 14:27
인터랙티브 웹 클론 Chapter 01 - BBC "코로나19가 바꿀 사무실의 미래"

studiomeal.com/archives/1203 BBC 인터랙티브 페이지 “코로나19가 바꿀 사무실의 미래” 클론 코로나19 시대, 제주 사는 개발자의 하루 이 페이지는 BBC 비주얼저널리즘 팀에서 제작한 ‘재택근무의 일상화’… 코로나19가 바꿀 사무실의 미래 페이지를 비슷하게 구현해 본 개발 예제입니다 studiomeal.com 이 홈페이지에 나와있는 인터랙티브 페이지를 코딩하였다! (유튜브 1분코딩을 참고해서) HTML의 코드를 살펴보면... 구성은 header / section(scroll-content) / section (normal-content) / footer 로 나누어져있다. 첫 번째의 section(scroll-content) 에는 이미지를 모아놓은 div(scroll-graphic..
사이트모작/1분코딩 2021. 1. 24. 21:55
Prev 1 Next