- 이전 방식의 핵심 의도 요약
.container { height: 100vh; background-size: contain; }:
브라우저 화면 높이를 꽉 채우되, 이미지가 잘리는 것(cover)을 방지하고 이미지의 전체 요소(캐릭터, 꽃 등)가 화면 안에 다 들어오게 하려는 의도였습니다.
imageAreaGuide: 이름(nameOverlay)과 하단 정보(informationOverlay)를 묶어서 이미지 내부의 특정 위치(예: 하트 장식 옆)에 배치하기 위한 기준점(Anchor) 역할을 수행하려 했습니다.
- 왜 문제가 발생했었나?
이론적으로는 맞지만, 실제 브라우저에서는 다음과 같은 "공간의 불일치"가 일어났습니다.
박스의 크기 ≠ 이미지의 크기: container 박스는 항상 화면 꽉 차게(100vh) 그려지지만, 그 안의 background-image는 contain 설정 때문에 실제로는 박스보다 작아져서 위아래에 빈 공간(여백)이 생겼습니다.
기준점의 이탈: imageAreaGuide가 container를 기준으로 위치를 잡다 보니, 화면이 긴 폰에서는 글자가 이미지(그림) 위가 아니라 이미지 바깥의 빈 공간(회색 여백)으로 밀려 나갔던 것입니다.
아래와 같은 방식으로 수정을 했습니다.
지금은 <img> 태그와 aspect-ratio를 사용함으로써, 이미지 그 자체의 크기가 곧 박스의 크기가 되도록 했습니다. bottom: 19% 같은 수치가 "화면 전체"가 아니라 "진짜 이미지 높이"를 기준으로 계산되어 기종마다 일정하게 나오는 것입니다.
또한 아래와 같이 postion을 통해서 bottom의 위치를 고정 시켰습니다.
-
position: relative (부모: imageAreaGuide)
이 설정이 없으면 자식인 nameOverlay는 이미지를 기준으로 움직이지 않고, 브라우저 전체 화면을 기준으로 움직이려고 합니다.
역할: "이제부터 이 이미지 박스 안이 너(글자)의 세상이야"라고 기준점을 선언하는 것입니다. -
position: absolute (자식: nameOverlay, informationOverlay)
이 설정이 있어야 글자가 이미지의 일반적인 흐름(위에서 아래로 나열되는 방식)에서 벗어나, 이미지 위에 둥둥 떠서 원하는 곳으로 이동할 수 있습니다.
역할: 부모 박스의 왼쪽 위(0,0)를 기준으로 bottom: 19.5% 같은 좌표를 찍어 정확한 위치에 안착하게 합니다.
