# sticky

21개의 포스트

position : sticky

position : sticky는 스크롤 시 화면에 고정되는 요소를 만들 수 있는 css 속성입니다. position : fixed는 항상 화면에 고정되는 요소를 만들때 사용하는데 이 둘이 무슨 차이가 있냐면,position : sticky는 스크롤이 되어시 이 요소가

6일 전
·
0개의 댓글
post-thumbnail

position property

position css 에서 position 이란? 요소들을 배치하기 위해 사용되는 방법을 지정하며 5가지의 값이 있습니다. static relative fixed absolute sticky 요소들은 위, 아래, 좌, 우 속성들을 사용하여 배치됩니다. 그러나, 이

2022년 4월 26일
·
0개의 댓글
post-thumbnail

2022 04 25 CSS

sticky는 부모 안에서 포지션이 지정이 된다.스크롤을 내리면 지정된 위치에서 고정이 된다.다른 것들에는 영향을 주지 않는다.부모와 상관없이 지정된 위치로 이동한다.sticky는 있던 그 자리에서 스크롤링이 고정fixed는 기존에 문서에서 나와서 포지션이 결정똑같이

2022년 4월 25일
·
0개의 댓글
post-thumbnail

[CSS] Position

absoluterelativefixedtop, left, right, bottomz-index▶️ box3의 부모 = html 이므로 화면 맨윗부분 왼쪽에서 밑, 오른쪽으로 30px씩 떨어진 부분에 위치.▶️ box2(absolute)의 부모 = box1(relativ

2022년 4월 12일
·
0개의 댓글

TIL - position : Fixed, sticky

fixed 스크롤에 관계없이 특정 박스가 고정되어 움직이지 않음페이지가 스크롤 되어도 중요한 정보(nav bar)를 화면에 노출하기 위해 사용sticky고정된 상태를 유지하다가 스크롤 되는 가장 가까운 부모 요소에 달라붙음! 요소를 일반적인 문서 흐름에 따라 배치하고

2022년 4월 11일
·
0개의 댓글

[CSS] position : fixed VS sticky

position 속성은 문서 상에 요소를 배치하는 방법을 지정!값으로는 top, right, bottom, left 등이 있다.static : 기본값relative : 요소를 일반적인 문서 흐름에 따라 배치하고 자기 자신을 기준으로 top, right, botto, l

2022년 4월 11일
·
0개의 댓글
post-thumbnail

CSS - position : sticky가 안될 때

스띠끼 스띠끼

2022년 4월 3일
·
0개의 댓글

[CSS-layout] position 속성

position 속성 - relative, absolute, fixed

2022년 3월 2일
·
0개의 댓글
post-thumbnail

css - (position) 속성 공부

\-static따로 값을 주지 않으면 기본적으로 적용되있는 값 그러기 때문에top,right,bottom,left 속성들을 사용할 수가 없다입력을 해도 변화가 없음을 알수있다. no startic/pngstartic/pngtop,right,bottom,left : 속

2022년 2월 15일
·
0개의 댓글
post-thumbnail

WIL-CSS [Position]

💡 position은 '위치'란 뜻으로 요소들의 위치를 지정해주는 속성이다.이 속성을 이용해 페이지의 레이아웃을 결정할 수 있다.1\. Static & relative & absolute 💡 static은 position의 기본값이다. 기본적으로 특정한 positi

2021년 11월 6일
·
0개의 댓글
post-thumbnail

CSS_position

css를 그림판처럼 자유롭게 이용하려면 꼭꼭꼭 필요한 css_position! 아직도 헷갈리는 부분은 있지만 아는 만큼만 우선 정리해보기로 position 📕웹페이지에서 태그들의 위치를 지정할 때 사용 한다. 1.static 기본값 기본적으로 아무것도 없을 때 사

2021년 11월 5일
·
0개의 댓글
post-thumbnail

Position, z-index

CSS position 속성은 문서 상에 요소를 배치하는 방법을 지정한다. top, right, botton, left 속성이 요소를 배치할 최종 위치를 결정한다.일반적인 문서 흐름에 따라 요소를 배치한다. top, right, botton, left, z-index

2021년 10월 12일
·
0개의 댓글
post-thumbnail

💅 CSS :: Position, Display, Float에 대해 알아보기

각 요소의 배치, 레이아웃을 표현하며 CSS의 뼈대를 형성해주는 CSS position, display, float에 대해 알아봅니다🤓

2021년 5월 25일
·
0개의 댓글
post-thumbnail

[TIL 02] CSS Layout: Position

CSS의 position 속성은 HTML 요소들의 위치를 설정하는 데 사용됩니다.position 속성의 값으로는 static, relative, absolute, fixed, sticky 이렇게 다섯 가지가 있습니다.요소를 배치하는 방법의 유형이며, 각 유형에 따라 t

2021년 5월 13일
·
0개의 댓글
post-thumbnail

TIL 48 | 좌표구하기 1. Window sizes and scrolling

sticky 헤더를 자바스크립트로 구현해보기 위하여 현재 스크롤 상태 값을 가져오는 연습을 하고 있다. 이 과정에서 접하게된 브라우저 창의 너비/높이를 표현하는 방식과 스크롤을 제어하는 방법을 정리해두려 한다. Width/height of the window win

2021년 4월 7일
·
0개의 댓글
post-thumbnail

StickyUI

CSS스크롤하기 위해서 높이를 길게 준다.position:sticky 효과로 스크롤시 고정하도록 한다.이때, 반드시 위치좌표 속성도 같이 줘야한다. (top:200px)JS높이(650~1150)가 변경됨에 따라 opacity속성이 변해야 한다.650~1150까지 스크롤

2021년 3월 28일
·
0개의 댓글
post-thumbnail

[css] position

위코드 2일차 layout에 대해 공부하면서 position,inline,inline-block,block,float 속성에 대해서 공부한 것들을 정리합니다.css position 속성은 문서 상에 요소를 배치하는 방법을 지정합니다. top, right, bottom,

2021년 2월 16일
·
0개의 댓글
post-thumbnail

24. Sticky Nav

수동으로 CSS의 position: sticky와 같은 효과 구현하는 내용offsetTopscrollYcss position 속성을 fixed로 변경하면, 원래 차지하던 공간을 차지하지 않게되어 공간 변형이 일어나므로 유의

2020년 12월 18일
·
0개의 댓글
post-thumbnail

sticky. position의 fixed같은 프로퍼티.

div를 고정시키고자 한다면 자주 쓰던 position:fixed가 있다.하지만 fixed는 뷰포트를 기준으로 하기에 어떠한 경우 불편할 경우가 있다.맨위에 있는 nav바가 아니라 sidebar나 중간 content에 있는 어떠한 div요소라던지... 이럴 때 쓰는게

2020년 5월 9일
·
0개의 댓글

모바일 Safari에서 레이어의 부분적 렌더링 오류 해결

모바일 Safari에서 sticky 내비게이션을 구현할 때나 position: fixed를 선언하여 레이어를 만들 때, 해당 레이어가 부분적으로 렌더링이 되지 않아 뚫려보이는 오류가 발생한다. 오류를 해결하기 위해서는 아래 css를 추가하고, 탭 이벤트시 이벤트 방지를 선언해 주어야 한다. css js

2019년 8월 14일
·
0개의 댓글