뒤로 가기
홈으로 이동
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를 사용하기 전에 브라우저에서 지원하는지 살펴보는 방법입니다! 여기까지 보셨다면 이제 영상 시청을 종료해주세요 🙌
✔ 학습 완료

이런 러닝패스는 어때요?

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

서원석의 프로필 이미지
서원석
의 학습노트

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

영상 재생 모양 아이콘
Video
⏱ 핵심 스탬프
25
00:01
이 학습노트에서 구현하는 결과물 입니다.(파일 선택기에서 이미지 파일을 고르면 이미지 미리보기)
00:25
코드 살펴보기 시작
👍
2
스크랩
서원석의 프로필 이미지
서원석
의 학습노트

네거티브 마진 negative margins | 코딩가나다 | 빔캠프

영상 재생 모양 아이콘
Video
⏱ 핵심 스탬프
6
04:38
B에 negative margin을 적용하기
05:00
마크업 상에서 아래 쪽에 위치하면 위로 올라갑니다. *negative margin과 상관없는 이야기
👍
6
스크랩
👋 다양한 인사이트를 읽어보고 계신가요?
나만의 학습 기록을 남기고, 관리하고 싶다면!
다양한 전문가의 멤버십 전용 콘텐츠를 보고 싶다면!
나의 학습 내용을 공유하고, 수익을 올리고 싶다면!
3초 회원가입/로그인으로, 런핏의 커뮤니티에 여러분도 함께하세요.
3초 만에 가입하기