[ch01] 코로나19가 바꿀 사무실의 미래

CSS 레이아웃

index.html

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap" rel="stylesheet">

• google font 사용

<section class="scroll-content">

• scroll되어서 올라가는 부분, global-width 공통인 부분, 화면 전체의 폭을 결정해줌

style.css : 기본으로 적용된 style

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;
}

• box-sizing: border-box : 내부 패딩이나 보더가 width, height 에 포함되도록 한다. 이미지는 기본적으로 반응형으로 잘 동작하도록, 컨테이너가 이미지보다 줄어들었을 때 같이 줄어들 수 있도록 max-width: 100% 로 설정하였다.

Preview on Web Server

vscode extension으로 파일 수정 후 저장하면 바로 반영되도록 한다.

Code Detail

• 1rem = 16px
• 이미지의 투명도가 바뀌면서 바뀌고 있는데 그 이야기는 이미지가 겹쳐있다는 것, position absolute 사용하기

.graphic-item

• position: sticky, top: 0
  sticky가 적용된 element의 위치가 top에 지정한 위치가 될 경우 그때부터 안올라가고 붙어있는 것
• position: sticky 가 적용되면 높이를 차지하지 않고 있기 때문에 높이를 따로 지정을 해주자! (vh를 통해)

.scroll-text

• position의 기본값은 static, 기본값이 아니면 z-index를 가지고 있어서 z-index의 숫자에 따라 조정한다.
• 말풍선을 감싸고 있는 scroll-text가 scroll-content 보다 아래에 있기 때문에 z-index 에서 위로 올라온 것이다.

출처: 1분 코딩님, BBC 인터랙티브 페이지 "코로나19가 바꿀 사무실의 미래"