반응형 디자인 작업 시 미디어 쿼리 최소화하는 방법

오늘은 제가 또 궁금해서 가져온 내용이에요

반응형 디자인에서 미디어 쿼리를 최소화하는 방법은 무엇인가

그래서 좀 찾아보니 방법이 몇 가지 있더라구요

그걸 좀 적어볼게요

 

너무 당연한 소리겠지만 코드의 복잡성이 줄어든다면

유지 관리를 간소화하는 데 충분한 도움을 줄 수 있죠

 

4가지 정도의 방법이 대표적인거 같은데 그거 먼저 알려드릴게요

 

1. 상대적 단위 사용

 

상대적 단위(em, rem % 등)를 사용하면 요소의 크기를 부모 요소나 뷰포인트 크기에 맞게 조정할 수 있어요

이 방법은 미디어 쿼리를 사용하지 않고도

레이아웃을 유동적으로 만들 수 있는거죠

 

2. CSS Grid 또는 Flexbox 사용

 

Grid와 Flexbox는 반응형 레이아웃을 만드는데 유용한 아이들이죠

요소의 크기와 위치를 자동으로 조정해서 다양한 화면 크기에 맞게 레이아웃을 재배열해요

이러면 미디어 쿼리를 사용하여 수동으로 레이아웃을 조정하는 것보다 유용해요

 

3. 모바일 우선 접근법 사용

 

이 방법은 제가 이걸 배우면서 거의 신세계다 느낌으로 봤던 거였어요

한 번도 이런 생각을 해본 적이 없어서...

 

이건 모바일 화면 크기의 작은 화면 크기에 맞게 기본설정을 하고

이후에 미디어 쿼리를 사용하여 큰 화면에 필요한 스타일을 설정하는 방법이에요

이러면 미디어 쿼리 사용을 최소화하고, 모바일 사용자에게 더 좋은 경험을 제공하는거죠

 

4. 반응형 이미지 사용

 

이미지는 화면 크기에 따라 다르게 표시되어야 할 수 있어요

이 때 srcset과 sizes 속성을 사용함으로써 브라우저가 현재 뷰포트와 장치 해상도에

가장 적합한 이미지를 자동 선택하도록 할 수 있죠

이러면 미디어 쿼리를 사용하는 것보다 훨씬 효과적인 방법이라고 할 수 있어요

 

많은 피드백 부탁드립니다:)