더북(TheBook)

부모는 높이를 갖고 있지 않은 상태지만(주석 처리) 여전히 노란색 박스가 나타납니다. 이때 노란색 박스의 크기는 파란색 박스와 동일한 크기인 200px입니다. 이처럼 부모는 높이가 없고, 자식은 static 속성값과 높이를 갖고 있다면 자식의 높이가 부모에게 영향을 미칩니다. 즉, 현재 부모는 높이가 없는 0인 상태지만 자식의 높이만큼 부모의 공간이 벌어져 0에서 200px로 바뀐 것입니다.

이러한 특징을 가진 position 속성값을 ‘2차원 특징을 갖고 있다’라고 말합니다. 참고로 모든 HTML 태그는 기본적으로 position: static 상태입니다. 따라서 position: static;을 삭제해도 결과는 동일하게 출력됩니다.

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.