LearnFit

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

서원석님의 학습노트

[CSS] position: sticky 후딱 이해하기

#개발자

#프론트엔드

#전체

00:00*해당 학습노트는 이 영상의 position: sticky 부분만 정리한 노트입니다.

00:47(여기서부터 보시고 01:02에서 다음 노트로 넘어가주세요!) 배경화면이 스크롤을 해도 화면 상단에 딱 달라붙어있죠? position: sticky 덕분이랍니다. *이런식으로 화면의 특정 부분에 딱 달라붙게 하는 것은 보통 position: fixed로 구현하지만 position: sticky로 구현할 수 있는지 고민해보는 연습을 해볼까요?

03:31우선 CSS가 적용될 HTML 코드 구조부터 살펴볼까요?(04:57까지 집중해서 들어주세요, 그리고 다음 노트로 넘어가주세요!) HTML 구조는 header, section 2개, footer로 이루어져 있습니다. 첫 번째 section 태그에는 두 가지 파트가 있어요. css class가 scroll-graphic인 div태그(이미지 모음), css class가 scroll-text인 div태그(텍스트 모음) 이렇게 두 개의 div 태그요. 저희가 position: sticky를 적용할 곳은 바로 scroll-graphic이랍니다! 다 읽으셨다면 아래 학습노트로 넘어가주세요. ☺️

07:25이 부분에서 이미지들을 한 곳에 겹쳐놓는데요, 사실 이 부분은 sticky를 이해하는 것과 전혀 상관없는 부분이에요..! 해당 학습노트의 goal은 HTML element를 sticky하게 화면(부모 element) 상단에 붙이는 방법의 이해일 뿐, 영상처럼 똑같이 구현하는 것이 목적이 아니기 때문에 이미지를 겹쳐놓는 이유와 원리는 무시하시고 진행하시면 됩니다!🤩 다 읽으셨다면 다음 노트로 가시죠~

09:24position: sticky의 예시도 보여주고 직접 적용하는 부분이에요. 이 영상의 메인 파트인만큼 집중해서 볼까요?👀 *강의에선 이미지가 여러 개 필요하다보니 겹쳐놓고 겹쳐놓은 곳의 부모 element에 position: sticky를 적용했는데, 이미지 하나에 sticky 적용해도 똑같이 동작하는만큼 다시 한 번 더 이미지를 겹쳐놓는 것은 무시해도 좋다는 말씀 드립니다..! position: sticky 적용 조건 1. target HTML element의 부모 HTML element가 scroll 할 수 있을만큼 크기가 충분해야한다는 것입니다. (이하 scroll box) 2. top(임계점으로 사용할 기준점)등을 필수적으로 지정해야합니다.(top뿐 아니라 bottom, left, right도 가능) top: 0은 target HTML element가 scroll box(부모)의 시작 지점으로부터 0만큼의 거리가 됐을 때부터 sticky처럼 행동한다 라는 의미입니다. 보너스 정보) position: sticky는 target element의 밑부분과 scroll box의 끝 지점이 만나는 지점에서 해제됩니다.

10:52position: sticky를 사용하기 전에 브라우저에서 지원하는지 살펴보는 방법입니다! 여기까지 보셨다면 이제 영상 시청을 종료해주세요 🙌

✔ 학습 완료

취소

작성하기

이런 러닝패스는 어때요?

무료

박어진

의 러닝패스

Adaptive Learning이란 무엇이고 어떤 서비스들이 있나?

서원석님의 다른 노트는 어때요?

서원석

의 학습노트

리액트로 이미지 미리보기 구현(feat. useState, useEffect, useRef, FileReader)

Video

⏱ 핵심 스탬프

25개

00:01

이 학습노트에서 구현하는 결과물 입니다.(파일 선택기에서 이미지 파일을 고르면 이미지 미리보기)

00:25

코드 살펴보기 시작

👍

서원석

의 학습노트

리액트 라우터 버전 6의 리다이렉트는 Navigate로 구현

Video

⏱ 핵심 스탬프

8개

00:00

해당 학습노트에서는 react router 버전6에서 redirect를 어떻게 구현하는지 소개합니다. 공식 문서: https://reactrouter.com/

00:50

react router 버전5에서 redirect를 구현하는 방법입니다. *예상 시나리오: pathname이 '/redirect'인 page 접근 시 pathname '/about'인 page로 전환됨 *특정 pathname에 redirect 로직을 등록하는 이유는 가지각색이겠지만 그 중 대표적인 용도는 로그인 여부 검사입니다. 서비스를 이용하는 유저가 로그인을 했을 경우 특정 pathname에 접근하지 못하도록 사용하는 것이죠.

👍

다시 보지않기