반응형 웹 작업을 할 때, 미디어쿼리를 최소화하여 사용하는 방법들을 알아보겠습니다. 이 방법들은 화면 크기에 따라 스타일이 변경되는 것을 관리할 때, 유용한 기법들입니다.
1. 상대길이 단위 사용하기:
rem, em, vw, vh와 같은 상대길이 단위를 활용하여 스타일을 설정합니다. 이는 화면 크기에 따라 자동으로 조정되기 때문에 미디어쿼리 사용을 최소화할 수 있습니다.
2. grid와 flexbox 활용:
grid를 이용하여 레이아웃을 구성하면 화면 크기에 맞게 자동으로 배치됩니다. 이를 통해 미디어쿼리를 사용하지 않고도 반응형 레이아웃을 쉽게 구현할 수 있습니다.
flexbox를 활용하여 스타일을 변경할 때에도 화면 크기에 따라 유연하게 대응할 수 있습니다.
3. 스타일 변경 시점을 기준으로 미디어쿼리 사용하기:
특정 디바이스 기준이 아닌, 스타일이 변경되는 시점을 파악하여 미디어쿼리를 적용합니다. 이를 통해 디바이스마다의 불필요한 미디어쿼리 작성을 최소화할 수 있습니다.
다만, 프로젝트의 목적과 디자인 요구사항에 따라 디바이스 기준의 미디어쿼리가 필요한 경우도 있으니 적절하게 판단해야 합니다.
이러한 방법들을 활용하면 미디어쿼리를 최소화하면서도 효과적인 반응형 작업을 수행할 수 있습니다.
참고자료
- [CSS] 반응형 웹 작업 시 media-query 최소화로 잡는 방법
https://qorguswp.com/entry/CSS-%EB%B0%98%EC%9D%91%ED%98%95-%EC%9B%B9-%EC%9E%91%EC%97%85-%EC%8B%9C-media-query-%EC%B5%9C%EC%86%8C%ED%99%94%EB%A1%9C-%EC%9E%A1%EB%8A%94-%EB%B0%A9%EB%B2%95- mdn(flexbox의 기본 개념)
https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
고통 속에 무언가 탄생하고 있다:-)