positon 속성과 배치방법
position 속성은 문서 상에 요소를 배치하는 방법을 지정합니다.
- static : 요소를 일반적인 문서 흐름에 따라 배치합니다.
- relative : static + 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용합니다.
- absolute : 요소를 일반적인 문서 흐름에서 제거하고, 가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치합니다.
- fixed : 요소를 일반적인 문서 흐름에서 제거하고, 뷰포트의 초기 컨테이닝블록을 기준으로 삼아 배치합니다. (바뀌지 않는 위치에 지정)
- sticky : static + fixed 특징을 동시에 가집니다.
용어 공부
오프셋(offset) : top, left, right, bottom 값을 의미하고 기준이 되는 곳으로부터 얼마만큼 떨어져있는지를 나타내기 위한 필요한 속성입니다.
뷰포트(viewport) : 화면에서 실제 내용이 표시되는 영역으로 데스크톱은 사용자가 설정한 해상도가 뷰포트 영역이 되고, 스마트 기기는 기본으로 설정되어 있는 값이 뷰포트 영역이 됩니다.
컨테이닝블록 : 요소의 위치와 크기를 지정하는데 사용하는 블록을 의미합니다. 상대적인 값이나, 요소의 위치를 지정하는 기준이 필요할 때 사용한다는 의미입니다.
참고자료
CSS Position (static, relative, absolute, fixed) : https://mingeesuh.tistory.com/3
CSS Position (static, relative, absolute, fixed)
본 포스트는 예전에 다른 블로그에 올렸던 포스트를 수정해서 다시 올렸습니다 Position 속성은 html문서내 요소를 배치하는 방법을 지정해주는 속성으로 static, relative, absolute, fixed 그리고 IE에서는
mingeesuh.tistory.com
뷰포트 (viewport) : https://masssal.tistory.com/34
뷰포트 (viewport)
viewport는 화면에서 실제 내용이 표시되는 영역으로, 데스크톱은 사용자가 설정한 해상도가 뷰포트 영역이 되고, 스마트 기기는 기본으로 설정되어 있는 값이 뷰포트 영역이 됩니다. 그런데 스마
masssal.tistory.com
컨테이닝 블록 : https://velog.io/@1-blue/%EC%BB%A8%ED%85%8C%EC%9D%B4%EB%8B%9D-%EB%B8%94%EB%A1%9D
🤔 컨테이닝 블록
컨테이닝 블록 정리 및 예시
velog.io