시안이 PC와 Mobile 2개 뿐이고 모든 해상도를 고려해야 할 때

콘텐츠가 많고 일반적으로 px이나 rem 등으로 고정해야 되는 레이아웃은 논외이다. 이 레이아웃들은 모든 간격이 고정되어 있고 해상도를 줄였을 때 자연스럽게 글자나 콘텐츠들이 아래로 내려오게 grid, flex 등을 활용하면 그만이다.

 

이미지와 적은 글자들이 어우러져 있는 레이아웃은.... 특히, 4k 해상도까지 고려해야 된다면, 아래 방법 밖에 답이 없는 것 같다. 

오늘 내내 고민을 해봐도, 하나의 세션 안에 width와 padding-bottom을 설정하여 영역을 설정한 후

자식 요소들은 position absolute를 기본으로 사용하여 위치를 잡고 그 외 간격들은 %로 처리하며 글자 크기는 vw로 설정한다. line-height는 1.6 등과 같이 단위 없는 비율로 설정하고 em을 활용하여 폰트 크기에 따라 동일한 비율로 증감되도록 할 수도 있다.