웹 페이지 로드 이후 HTML 엘리먼트의 위치가 바뀔 때

개츠비로 포트폴리오를 만들다가 메인이 좀 심심해보여서 이미지를 추가했다.

그런데 웹 페이지가 로딩 되는 동안 (1) 우선 이미지가 보이고,

웹 페이지가 전부 로드된 이후에야 (2) 그 이미지가 제 자리를 찾아가는 현상이 발생했다.

 

div_1
  position: relative;
	div_2
		img
		  position: absoulte;

 

알고보니 img가 두 단계로 중첩돼서 그런 거였다.

 

내 코드를 보면

중첩된 대로 div_1 → div_2 → img 가 차례대로 렌더링이 되고 나서 img의 position: absolute가 적용된다. (div_2는 div의 default position인 static이 적용되기 때문. 이 경우 엘리먼트는 순서대로 렌더링 된다.)

그러면 img는 div_2를 뛰어넘고 position이 relative인 div_1를 기준으로 삼게 되는데 이 때 재배열이 이루어지는 것이 아닌가 추측된다.

 

div_1
  position: relative;
	div_2
	img
	  position: absoulte;

 

해결책은 간단하다. div_2와 img를 같은 중첩 단계로 배치함으로써 형제 엘리먼트로 만들어서 img 엘리먼트의 직계 부모를 position: relative인 div_1로 두면 된다. 그러면 처음부터 원하던대로 렌더링을 하게 된다.

 

사실 개츠비가 정적 파일을 만들어서 렌더링 하는 과정을 아직 정확하게 파악하지 못해서 이게 원인이고 해결책이라는 확신은 없지만 어쨌든 우선은 거슬리는 부분을 해결했다. 애증의 개츠비.

 

 

---

- stackoverflow.com/questions/19058891/elements-are-moving-while-the-page-is-loading