우당탕탕 개발일기
[CSS] position 본문
📓 fixed와 sticky 차이
📍 https://ordinary-code.tistory.com/106
[css] 레이아웃 구성 시 position fixed 와 sticky 차이 알아보기
스마트폰이 요즘 많이 보급되면서 PC 홈페이지의 레이아웃 중 스크롤이 강조된 레이아웃들이 많이 등장하고 있다. 그중 스크롤을 내리면서 나타나는 애니메이션 효과도 점점 발전하고 있다. 오
ordinary-code.tistory.com
📓 relative와 absolute의 차이
- 태그의 위치를 살짝 변경하고 싶을 때 position: relative를 사용합니다. 이제 top, right, bottom, left 속성을 사용해 위치 조절이 가능. 각각의 태그가 기존 static이었을 때의 위치를 기준으로 top, right, bottom, left 방향으로 주어진 픽셀만큼 이동한다.
- absolute는 position: static 속성을 가지고 있지 않은 조상을 기준으로 움직입니다. 만약 조상 중에 포지션이 relative, absolute, fixed인 태그가 없다면 가장 위의 태그(body)가 기준이 됩니다.
📍 https://www.zerocho.com/category/CSS/post/5864f3b59f1dc000182d3ea1
(CSS) CSS 포지션(position) - static, relative, absolute, fixed
안녕하세요! 이번 시간에는 지난 시간에 다루지 못했던 포지션에 대해 알아보겠습니다! 양이 조금 많고, 중요한 내용이기 때문에 따로 뺐습니다. 포지션이란 이름처럼 태그들의 위치를 결정하
www.zerocho.com
'What I Learned > HTML&CSS' 카테고리의 다른 글
| [CSS] 가로 비율 맞는 직사각형 그리기 (0) | 2023.01.05 |
|---|---|
| [CSS] 기본 css 초기화 하기 (reset.css) (0) | 2023.01.04 |
| [HTML] JSX에서 공백(띄어쓰기) 넣기 (0) | 2022.03.15 |
| [CSS] background-image로 사진 넣을 때 비율 맞추기 (0) | 2022.02.08 |
| [CSS] 도형 중앙에 텍스트 오게하기 (0) | 2022.02.07 |
