김평범's OrdinaryCode

  • 홈
  • 태그
  • 방명록

css콘텐츠마다고정되는div만들기 1

[css] 레이아웃 구성 시 position fixed 와 sticky 차이 알아보기

스마트폰이 요즘 많이 보급되면서 PC 홈페이지의 레이아웃 중 스크롤이 강조된 레이아웃들이 많이 등장하고 있다. 그중 스크롤을 내리면서 나타나는 애니메이션 효과도 점점 발전하고 있다. 오늘은 간단한 예시 중 특정 위치에 특정 엘리먼트를 고정할 수 있는 position 속성 중 fixed와 sticky 차이를 알아보려고 한다. 💡 fixed란? position:fixed 위 속성을 적용하게 되면 일반적인 문서 요소 순서에 따라 배치되는 것이 아니라 페이지 화면 내 절대적인 위치에 고정시킬 수 있다. 스크롤과 상관없이 항상 해당 위치에 고정된다. 대표적인 예로 스크롤과 상관없이 계속 위 상단에 고정되는 Header들이 fixed 속성에 해당된다. fixed 예시 코드 Header content .header ..

FrontEnd/css 2021.08.16
1
더보기
  • 분류 전체보기 (203)
    • Diary (4)
    • FrontEnd (109)
      • Javascript (20)
      • Vue.js (34)
      • css (17)
      • React (11)
    • etc. (88)
      • Notion (71)

Tag

노션표, 노션, 노션사용법, 리액트, 노션템플릿공유, JavaScript, 노션수식, 노션템플릿, notion, 노션활용법, Vue, 노션데이터베이스, Notion템플릿공유, CSS, NUXT, 노션유용한템플릿, 노션무료템플릿, 노션가계부, 노션가이드, react,

최근글과 인기글

  • 최근글
  • 인기글

최근댓글

공지사항

페이스북 트위터 플러그인

  • Facebook
  • Twitter

Archives

Calendar

«   2025/05   »
일 월 화 수 목 금 토
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

Copyright © Kakao Corp. All rights reserved.

티스토리툴바