반응형 작업 시에 미디어쿼리를 최소화로 잡는 방법
반응형 작업 시에 rem등 단위를 활용하여 미디어쿼리를 최소화로 잡는 방법들에 대해서 작성하기
미디어 쿼리를 최소화하면서, 반응형 웹사이트를 구축하는 방법과 rem 단위의 활용법에 대해 알아보기
미디어 쿼리의 최소화
미디어 쿼리는 반응형 디자인에 필수적인 도구입니다. 이러한 미디어 쿼리를 최소화하면 코드를 간결하게 유지하고 유지 관리를 쉽게 할 수 있습니다.
어떻게 쉽게 관리할 수 있을까요?
Mobile First접근법을 사용하자.
이 방법은 먼저 모바일 화면을 디자인하고, 이후에 더 큰 화면에 맞게 확장하는 방식입니다. 이렇게 하면 미디어 쿼리는 주로 화면이 커질 때 필요한 스타일 변경에만 사용되므로, 미디어 쿼리의 사용을 최소화할 수 있습니다.
/* 모바일 스타일 */
body {
background-color: lightblue;
font-size: 1em;
}
/* 태블릿과 데스크톱 스타일 */
@media (min-width: 600px) {
body {
background-color: lightgreen;
font-size: 1.5em;
}
}화면의 너비가 600px 이상일 때,
body의 배경색을lightgreen으로 변경하고,- 폰트 크기를
1.5em으로 변경합니다.
화면의 너비가600px미만일 때는 모바일 스타일이 적용됩니다.
이런 방식으로 Mobile First 접근법을 사용하면, 미디어 쿼리를 최소화하면서도 다양한 화면 크기에 대응할 수 있는 반응형 웹사이트를 만들 수 있습니다
rem 단위 활용하여 미디어 쿼리 최소화
rem 단위는 반응형 디자인에서 효과적으로 활용될 수 있습니다.
rem은 root em의 약자로, 루트 요소(html)의 폰트 사이즈를 기준으로 삼는 상대 단위입니다. 이를 사용하면 브라우저의 기본 폰트 크기를 기반으로 요소의 크기를 조정할 수 있으므로, 미디어 쿼리를 더욱 간소화할 수 있습니다.
예를 들어, 브라우저의 기본 폰트 크기가 16px라면, 1rem은 16px과 같습니다.
html {
font-size: 16px;
}
.element {
width: 20rem; /* 320px */
height: 10rem; /* 160px */
}
위의 CSS 코드는 .element의 너비를 320px, 높이를 160px로 설정합니다.
화면 크기가 변하더라도 이 요소의 크기는 비율적으로 유지되므로, 미디어 쿼리를 추가로 작성하지 않아도 됩니다.
이렇게 rem은 다양한 화면 크기에서 요소의 크기를 일관되게 유지하면서도, 사용자가 브라우저의 폰트 크기를 조절할 수 있게 해주는 이점이 있습니다.
이렇게 단위를 rem으로 활용하고 미디어 쿼리를 최소화하면, 간결하고 유지 관리하기 쉬운 반응형 웹사이트를 구축할 수 있습니다.
