목록사이트모작 (7)

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
맥심 리디자인 초반

See the Pen MWaZvvV by yeji (@kimyeji) on CodePen.
사이트모작/맥심커피 리디자인 2020. 5. 20. 14:10
하이트 진로 작업2

See the Pen VwvdvLe by yeji (@kimyeji) on CodePen.
사이트모작/하이트 진로 2020. 5. 11. 22:10
하이트 진로 작업 1

See the Pen abvGeZJ by yeji (@kimyeji) on CodePen. 메뉴바에 로고 빼고 li가 4개 COMPANY 보통 여기서 li에게 relative를 주고 sub-menu에 absolute를 줘서 top:100%; left:0;을 하지만 relative 주지않고 sub-menu에 absolute만 주어도 그 자리에 고대로 있다. Company에 hover했을때 밑으로 나오는 꽉찬 메뉴를 보여주고 싶을 때 left:0; right:0; 을 해주면 양쪽으로 크게 늘어난다.
사이트모작/하이트 진로 2020. 5. 11. 17:03
2020-05-07 앨리스모작 팝업1

See the Pen wvKyZpM by yeji (@kimyeji) on CodePen.
사이트모작/앨리스의원 2020. 5. 7. 21:20
2020-05-07 앨리스모작 메뉴바 완료

See the Pen rNOJbMG by yeji (@kimyeji) on CodePen.
사이트모작/앨리스의원 2020. 5. 7. 21:12
Prev 1 Next