position2 [CSS] Chapter 14. CSS Position(relative, absolute) 한 방에 정리 CSS Position position 속성을 통해 문서 상에 요소를 배치하는 방법을 지정한다. top, right, bottom, left 속성을 통해 요소의 최종 위치를 결정한다. 사용법은 간단하다. 기준을 잡는다. (예- position: relative;) 이동시킨다. (예- top: 50px;) 알아두기 block : 한 줄 모두 차지 (대표 element - , ) inline : 콘텐츠 크기 만큼만 차지 (대표 element - ) Position 속성 요소를 옮기려면 일단 위치를 옮길 기준점을 잡는다. static 기준 없음 (배치 불가능 / 기본값) relative 요소 자기 자신을 기준으로 배치 absolute 부모(조상) 요소를 기준으로 배치 fixed 뷰포트 기준으로 배치 stick.. 2023. 4. 18. [CSS] Chapter 12. Position(static, relative, absolute, fixed, sticky), z-index, overflow position 요소를 어떻게 배치할지 결정하는 CSS 속성 우선 Normal Flow 개념을 이해하는 것이 중요함 Normal Flow란? 요소의 레이아웃을 전혀 제어하지 않았을 때, 브라우저에서 기본적으로 요소가 배치되는 흐름 Remind) 인라인 요소, 블록 레벨 요소 등 특성에 따라 기본적으로 요소가 배치되는 방식이 있음 즉 요소의 특성에 따라 Normal Flow가 정해져 있는 것 코드에 작성된 순서에 맞게 차곡차곡 HTML 요소가 표시된다. positon 속성을 통해 Normal Flow에서 벗어나, 개발자가 원하는 대로 제어하여 배치할 수 있음 position 속성은 top, bottom, left, right 속성과 함께 사용함 position의 종류에 따라 top, bottom, left.. 2023. 1. 6. 이전 1 다음
