인터렉티브 웹 - BBC 사이트 따라해보기1

진짜 진짜 오랜만에 회사외 일로 개발을 시도해봅니다.
작년에 마음에 품었던 ArtBook이라는 주제로 개발을 시도해 보고 하는데, 아는 것이 너무 없더라고요...
맨날 C와 리눅스, sql, 서버만 개발 하고 있으니 웹 개발에 대한 모든 것을 잊었답니다.

고로 기초부터 다시!
창조의 어머니는 모방!
이라는 마음으로 따라해볼 강의를 찾아보았어요.

그렇게 고른 것이 1분코딩님 강의 입니다.
1분코딩님의 BBC 인터렉티브 페이지 따라하기

가볍게 따라하기 좋은 강의입니다.
1,2편으로 비교적 짧고, 1분코딩님이 소스 코드를 공유해주신 덕이지요.

-

1편 리뷰

1. 오랜만에 css를 다루니 아주 어색하다. position들 부터 어색.

2. 이번에 다룬 position은 총 3가지
sticky : 한번 해당 위치에 붙으면 다음 컴포넌트가 올때까지는 껌딱지처럼 붙어 있는다.
absolute : 절대위치 지정.
relative : 상대 위치 지정

3. preview on web server의 시작 키는 cntl + shift + l

4. vh라는 단위는 창 기준이다. 100vh면 창 크기 100%

html {
	/* 폰트 연결 */
	font-family: 'Noto Sans KR', sans-serif; 
}
body {
	margin: 0;
}
div, section, header, footer, p, h1, h2 {
	box-sizing: border-box;
}
a {
	color: royalblue;
}
img {
	max-width: 100%;
	height: auto;
}
.global-width {
	max-width: 620px;
	margin: 0 auto; /* 중앙 정렬 */
	padding: 0 1rem;
}
.scroll-graphic {
	position: sticky; /* 여기 붙어 있어라! */
	top: 0; /* top 이라는 것은 화면의 top을 말한다. 고정적 위치 */
	height: 100vh;
}
.graphic-item {
	/* 이미지들을 화면에 꽉 차게 + 중앙 정렬 되도록 만들 것이다. */
	display: flex; /* 화면과 이미지가 상호작용 하도록..? */
	align-items: center; /* 세로 센터 정렬 */
	justify-content: center; /* 가로 센터 정렬 */
	width: 100%;
	height: 100%;
	/* image 들을 겹쳐 놓기 위해서 서로 상대적인게 아니라 절대적 값으로 */
	/* 겹치는 이유는 ? 스크롤이 내려가면서 이미자가 투명해지고 다음 이미지로 바뀌는 효과를 내기 위해*/
	position: absolute; 
	left: 0;
	top: 0;
}.scene-img {
	height: 100vh;
}
.scroll-text {
	position: relative ;
}
.step {
	margin-bottom: 60vh; /* 창 사이즈의 60% */
	padding: 0.5rem 1rem;
	border-radius: 10px;
	background: rgba(225,225,225,0.8);
	box-shadow: rgba(0, 0, 0, 0.3) 0 0 3px;
}