Engineering Note

브라우저는 기본적으로 width: 100vw, height: 100vh 크기의 **viewport(화면 전체)**를 가지고 시작한다.그런데 CSS에서 body 태그는 기본적으로width: 100%(== 100vw)height: auto가 적용되어 있다.이 말은, body의 가로폭은 브라우저 전체 너비를 자동으로 차지하지만,세로 높이는 자식 요소들의 높이 합만큼만 설정된다는 뜻이다.예를 들어 태그 하나만 존재한다면, 해당 태그는 약 20px 정도의 높이를 차지하고,이때 body의 높이도 약 20px이 된다.즉, 브라우저의 상단 20px 정도만 실제로 렌더링된 셈이다. 나머지 아래 영역은 body가 차지하지 않는 빈 뷰포트 공간이다.그래서 body 내부의 요소들을 브라우저 전체 기준으로 중앙 정렬하고 싶다..