일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- doctype
- @font-face
- border:none;
- label
- html #display #block #inline
- 시멘틱 태그 #시멘틱 레이아웃
- javacript #javasript 객체 #객체 #배열
- label 태그
- border:0;
- html #fontawesome #폰트어썸
- border
- 인터랙티브 웹 클론 #BBC 코로나19가 바꿀 사무실의 미래 #1분코딩
- Today
- Total
yeji
인터랙티브 웹 클론 Chapter 01 - BBC "코로나19가 바꿀 사무실의 미래" 본문
BBC 인터랙티브 페이지 “코로나19가 바꿀 사무실의 미래” 클론
코로나19 시대, 제주 사는 개발자의 하루 이 페이지는 BBC 비주얼저널리즘 팀에서 제작한 ‘재택근무의 일상화’… 코로나19가 바꿀 사무실의 미래 페이지를 비슷하게 구현해 본 개발 예제입니다
studiomeal.com
이 홈페이지에 나와있는 인터랙티브 페이지를 코딩하였다! (유튜브 1분코딩을 참고해서)
HTML의 코드를 살펴보면... 구성은
header /
section(scroll-content) /
section (normal-content) /
footer
로 나누어져있다.
첫 번째의 section(scroll-content) 에는 이미지를 모아놓은 div(scroll-graphic)과 문구를 모아놓은 div(scroll-text)로 구성되어있다. 클래스 global-width는 폭을 제한하는 클래스이름으로써 max-width와 margin:0 auto;를 지정해줘서 가운데로 오게끔 만들어주었다.
1) 이미지가 화면에 꽉 차고 가운데에서 하나씩 높이에 따라 바뀌어가기 때문에 아래와 같이 코드를 짠다.
display:flex를 해주고 가로에서의 정렬 세로에서의 정렬을 한 다음 스크롤에 따라 해당이미지가 나타나야 하기 때문에 opacity를 0으로 설정해준다.
2) 스크롤 하였을때 header부분은 쭉 내려가고 이미지가 시작되는 부분이 화면위로 탁 걸렸을때 고정되는 것을 볼 수 있다.
이것은 positon:stickey 를 사용한다! 이미지를 포함하고 있는 클래스 scroll-graphic에게 준다. top:0을 주어야 상단에 위치한다. 높이를 차지하고 있지 않기때문에 높이도 지정함! (그러나 sticky는 IE 지원을 하지 않는다)
3) 이렇게까지 하면 말풍선이 아래로 깔려 있게 된다. 말풍선은 현재 position이 지정되어있지 않다.
position속성이 지정되지 않은 블록은 항상 position이 지정된 엘리먼트 이전에 렌더링이 된다.
따라서 position이 지정된 엘리먼트 아래에 보인다.
그래서 말풍선 포함한 클래스 scroll text에 position:relative를 준다. 그렇게 되면 엘리먼트의 position 속성 값과는 상관 없이 HTML 계층 구조대로 쌓인다.
각각의 말풍선에게 style을 지정해준다.
4) 높이가 줄어들면 이미지에도 제한을 주려고 이미지에 max-height:100vh로 준다.
뷰포트 사이즈에 맞게 알아서 사이즈가 맞춰짐
다음에 계속....!
'사이트모작 > 1분코딩' 카테고리의 다른 글
인터랙티브 웹 클론 Chapter 02 - BBC "코로나19가 바꿀 사무실의 미래" (0) | 2021.01.26 |
---|