크리스마스에 코딩하고 있는 내 인생이 레전드 같지만 오늘도 달린다..
블로그를 만들면서 포스팅 목록을 보여주는 부분을 작업하고 있는데, 만들면서 보니 내가 반응형 처리에 미숙한 부분이 많다는걸 알게 되어서 다시 처음부터 공부하기 시작했다. 오늘 공부하면서 알게된것들을 정리한다. 😄 🙂
rem단위 사용해라, 그리고 font-size는 100%로 설정하라.
rem단위는 루트엘리먼트의 폰트 사이즈를 기준으로 동작한다. 그렇다고해서 내가 루트엘리먼트인 html태그에 폰트사이즈를 데스크탑에서는 16px 모바일에선 12px 이런식으로 설정해버리면 사용자가 브라우저에 설정한 폰트 사이즈가 뭐든 상관없이 그냥 무조건 개발자가 설정해둔 값으로 오버라이드된다.
따라서 html태그에 폰트사이즈는 100%로 설정하도록 하자. 그러면 사용자가 브라우저에서 폰트사이즈를 20px로 설정하면 html태그에 폰트사이즈가 20px로 설정되고 하위에 rem단위로 설정되어있는 폰트사이즈들도 따라서 바뀌게 된다.
반응형 사이트를 제작할땐 px단위로 먼저 작업하고 비율로 변경하라.
나는 그동안 반응형 사이트를 제작할때는 처음부터 비율단위로 그리드를 짜야 한다고 생각했다. 하지만 그렇게 하다보면 내가 설정하고 싶은 그리드의 정확한 높이와 너비를 계산해서 넣기가 굉장히 힘들어지게 된다. 그래서 계속 조금씩 비율을 수정해가면서 일일이 눈으로 확인해서 수정해야 하는데 굉장히 비효율적이다.
그래서, 우선은 픽셀단위로 퍼블리싱하고 컨테이너의 너비에 상대적인 비율로 각 엘리먼트의 너비를 설정하는것이 좋은것 같다. 실제로 Do it 반응형 웹사이트 제작 책에서도 이런 방식으로 반응형 작업을 하라고 추천하고 있다.
반응형 웹 사이트를 만들때 margin이나 padding을 폰트사이즈에 비례하게 만들면 안되는 이유
크롬에는 폰트사이즈와 화면을 축소/확대할수있는 설정창이 있다. 만약에 우리가 rem단위로 마진이나 패딩을 설정했다고 해보자. 유저는 단지 폰트사이즈만 키우고 싶었을 뿐인데 마진이나 패딩도 rem단위로 설정되어 있기 때문에 화면이 확대되는듯한 효과가 나타난다. 이것은 유저가 의도하지않은 행위를 우리가 미리 짐작하여 잘못 설정하는것이다. 유저가 페이지를 확대하고싶으면 따로 설정창에서 확대를 하면 된다. 우리가 미리 짐작해서 그렇게 만들 필요가 없다.
그리고 더 안좋은 현상이 발생한다.
유저가 브라우저 기본 폰트사이즈를 키웠다고 해보자. 그럼, 개발자가 사이트에 설정한 미디어쿼리의 브레이크포인트가 변경된다. // TODO : 왜 폰트사이즈를 키우는데 브레이크 포인트가 바뀌는지? 알아보자.
이로인해, 데스크탑화면에서 폰트 사이즈를 키웠을뿐인데 갑자기 태블릿의 레이아웃이 보이는 현상이 발생할 수 있다는것이다. 태블릿의 폰트사이즈는 보통 데스크탑보다 작을것이므로 사용자는 폰트사이즈를 키우기 위해서 브라우저 설정을 바꿨는데 오히려 더 작아지는 현상이 발생할 수도 있다는것이다.