CSS의 absolute position 작동 메커니즘 이해 | 달레의 웹 프로그래밍
www.youtube.com
CSS의 absolute position 작동 메커니즘 이해
CSS의 `position` 속성은 요소가 브라우저 화면에 어떻게 배치되는가를 결정합니다. 기본값은 `static`이며 `relative`나 `absolute`, `fixed` 등으로 변경이 가능하죠. 이번 시간에는 그 중에서도 가장 다루기 까다로운 `absolute`에 대해서 알아보려고 하는데요.
`position` 속성이 `absolute`로 설정되어 있는 엘리먼트는 웹페이지 상에 배치될 때 다음과 같은 특징을 갖습니다.
부모 요소 내부에 속박되지 않고, 독립된 배치 문맥(positioning context)을 가지게 됩니다. 마치 포토샵 같은 그래픽 툴에서 새로운 레이어를 추가하는 효과에 비슷하다고 생각하시면 됩니다.
따라서, 요소를 기본적으로 브라우저 화면(viewport) 상에서 어디든지 원하는 위치에 자유롭게 배치시킬 수 있으며, 심지어 부모 요소 위에 겹쳐서 배치할 수도 있습니다.
단, 상위 요소 중에 `position` 속성이 `relative`인 요소가 있다면, 그 중 가장 가까운 요소의 내부에서만 요소를 자유롭게 배치할 수 있습니다. 즉, 전체 화면이 아닌 해당 상위 요소를 기준으로 offset 속성(`top`, `left`, `bottom`, `right`)이 적용됩니다.
CSS를 공부하시는 분들이 특히 마지막 특징을 많이 헷갈려하시는데요. 간단한 예제를 통해 absolute position의 작동 메커니즘을 차근차근 설명드리겠습니다.
📺 동영상: https://youtu.be/F2nQDalqOzM
📝 포스팅: https://www.daleseo.com/css-position-absolute/
🧑💻 실습 코드: https://codepen.io/daleseo/pen/NWKwojR
다음 내용이 궁금하다면?
이미 회원이신가요?
2023년 10월 17일 오후 8:44
댓글 0
함께 읽은 게시물
면접 질문: 같이 일해본 동료 중에 가장 힘들었던 사람은 누구였나요?
면접관으로 들어가면 행동양식 질문으로 물어보는 두 가지 질문이 있다. 하나는 임팩트(Impact)에 관한 것이고 다른 하나는 협업(Collaboration)에 관한 것이다. 임팩트에는 관한 것으로 "커리어에서 가장 임팩트있는 프로젝트에 대해 이야기해달라"는 질
... 더 보기⟪🚀 유니콘이라 불리던 그들, 이제 진짜 실력을 보여줄 때⟫
어
... 더 보기
나는 가끔 조합형 한글의 아름다움에 대해 생각한다.
그 아름다움은 단순히 예쁜 글꼴이나 정갈한 종이 위의 자소 배열에서 끝나지 않는다. 진짜 매력은, 정밀한 정보 구조와 이산 수학적 규칙성 속에 숨어 있다.
