모바일 사용자가 점점 늘어나면서 반응형 브라우저의 중요성이 날로 커지고 있다. 반응형 웹 작업을 할 때에는 CSS 미디어 쿼리가 필수인데, 미디어 쿼리 작성 방법에도 종류가 있다. 어떤 디바이스를 우선으로 할 것이냐에 따라서 크게 나뉘는데 각 방법을 알아보고 상황에 맞게 작성하는 것을 추천한다. 목차 뷰포트 Viewport 모바일 퍼스트 Mobile first 데스크탑 퍼스트 Desktop first Overriding(덮어쓰기) 없이 해상도마다 지정 뷰포트 Viewport 우선 반응형 웹페이지를 작업하기 전에 꼭 준비해야 하는 사항이 있는데, 바로 Viewport이다. head 태그 사이에 meta viewport 태그를 넣어주어야 한다. Viewport를 작성하는 이유는 웹 페이지를 여러 디바이스 크..
요즘은 대부분 반응형 브라우저이기 때문에 반응형에서 사용되는 단위를 사용해야 할 것이다. 그중에서도 가장 많이 사용되는 단위가 rem과 em, 그리고 % 인데 도대체 언제 어떤 걸 사용해야 하는 걸까? 이번 기회에 제대로 알고 제대로 사용해보자. 목차 em과 rem의 공통점 em과 rem의 차이점 em과 rem 언제 쓸까? 반응형에서 무조건 rem을 써야 할까? 마치며 em과 rem의 공통점 두 단위 모두 폰트 사이즈에 따라 변하는 가변 단위이다. 같은 방식이지만 어떤 엘리먼트이 폰트 사이즈가 기준이냐에 따라 나뉜다. 비율에 따른 가변 단위이지만 브라우저 상에는 픽셀 단위로 표현된다. em 계산 상위 엘리먼트 폰트 사이즈 * em값 = 픽셀값 (상위 엘리먼트 폰트 사이즈가 18일 때) 1em = 18 *..