부트스트랩 Pricing 클론 코딩

김동현·2023년 2월 25일

CSS 클론코딩

개인 프로젝트

목록 보기

3/13

목적

미디어 쿼리를 사용한 반응형 레이아웃을 연습 및 숙달하기 위함.

동기

flex 와 grid 레이아웃은 어느정도 다룰줄 알게 되었지만 반응형 레이아웃 설계는 여전히 막연했다.

미디어 쿼리를 다룬 MDN 문서를 읽고 난 후, 미디어 쿼리의 적절한 사용법과 반응형 레이아웃을 위한 기법들을 알게 되었다.

이를 적용해보고자 부트스트랩의 Pricing 예시를 클론코딩 하게 되었다.

느낀점

기존에는 큰 화면부터 설계하고 작은 화면으로 점차 줄여가며 설계를 했었다.

하지만 MDN에서는 그 반대인 모바일버전의 화면부터 설계하고 큰 화면으로 확장해나가는 방법을 추천해서 (이 방법을 mobile first design이라 한다) 이 방법대로 해보았다.

확실히 모바일 버전의 화면은 컬럼이 1개인 레이아웃이라서 html만 적절하게 짰다면 레이아웃을 위한 CSS는 만질 것이 별로 없어서 편했다.

그 후 화면을 점차 넓혀가면서 디자인했다.

필요하다면 wrapper 태그를 추가했다.

큰 화면부터 설계하면 wrapper 태그가 필요한지 아닌지 미리 먼저 파악을 하고 들어가야 하는데 이 경우엔 화면을 점차 넓혀가며 필요할 때만 wrapper 태그를 추가하는 식이라서 고민거리가 줄었다.

또한, 이전엔 반응형 디자인을 위해 미디어 쿼리를 남발했었지만, 이제는 미디어 쿼리를 위한 적절한 사용 시점을 알게 되었다.

모바일 버전으로 디자인 한 후 화면을 넓혀가면서 1개의 컬럼 레이아웃이 불편해 보일때 breakpoint를 주어서 미디어 쿼리를 사용하면 된다.

어려운 점

MDN 문서에서 미디어 쿼리의 width 를 사용할 때 px 단위보다는 em, rem을 쓰는것이 좀 더 반응형스럽다고 했다.

예전에는 단순히 모바일, 태블릿, PC 버전을 480px, 780px, 960px 정도의 크기로 나눠서 각각 디자인했었는데, 이러면 브라우저의 사용자 설정으로 변경되는 폰트크기에 대응하지 못한다.
(애초에 요즘 장치들은 화면 너비가 너무 다양해서 px과 상관없이 이 방법으로는 한계가 있다.)

하지만 em이나 rem을 사용하면 사용자 폰트 크기에 따라서 breakpoint가 달라지기 때문에 화면 크기뿐 아니라 사용자 폰트 크기에도 반응한다.

이런식으로 적용해 보는것이 이번이 처음이라 어려움을 느꼈다.

그렇지만 페이지가 완성된 후에 브라우저 폰트 크기를 변경해가며 화면을 줄였다 늘렸다 해보니 폰트 크기에 맞춰서 디자인이 바뀌는 것을 보니 뿌듯하다.