반응형 디자인에서 미디어쿼리 최소화 및 Rem 단위 활용 방법

인간은 망각의 동물이다. 특정한 행동이나 생각을 자주 하지 않으면 우리 뇌 속에서는 신경의 가지치기 현상이 일어난다고 한다. 우리가 어떤 생각, 기분, 행동을 수행하지 않으면 뇌는 그와 연관된 뉴런들을 발화시키지 않는데, 그 결과 그러한 생각, 기분, 행동이 점점 약해지다가 결국 시들어버리고 잊게 되는 것을 신경 가지치기라고 한다. 그렇기 때문에 우리는 초등학교 시절처럼 리코더를 연주할 수 없는거고, 곡면의 부피를 구하는 적분 공식이나 근의 공식등에 대해 더는 기억하지 못하는 것이다. 쉽건 어렵건 지금 나는 무조건 많이 생각하고 자꾸 써보고 사용해보는 것 밖에 방도가 없다 생각한다.

 

 

 

1. 미디어쿼리 최소화 이유
미디어쿼리는 웹 페이지를 다양한 디바이스와 화면 크기에 맞춰 스타일을 조절하는 데에 사용된다. 그러나 미디어쿼리가 많아지면 CSS 파일의 크기가 증가하고, 다운로드 시간이 길어질 수 있습니다. 이를 최소화하여 성능을 향상시키는 것이 중요하다.

2. Rem 단위 활용 이유
Rem(루트 em) 단위는 폰트 크기를 상대적으로 설정하는 단위로, 루트 요소의 크기에 따라 상대적으로 크기가 조절된다. Rem을 사용하면 화면 크기가 변할 때 유연하게 대응할 수 있으며, 미디어쿼리에서도 효과적으로 활용될 수 있다.

3. 미디어쿼리 최소화 방법
3.1 최소한의 미디어쿼리 정의
필요한 경우에만 미디어쿼리를 사용하여 스타일을 변경하도록 합니다. 불필요한 미디어쿼리를 제거하여 파일 크기를 최소화한다.

/* 불필요한 미디어쿼리 제거 */
@media screen and (min-width: 768px) {
  /* Desktop 스타일 */
}

 

3.2 범용적인 미디어쿼리 활용
가장 일반적인 미디어쿼리를 먼저 정의하고, 그 이후에 더 구체적인 경우를 추가한다. 이렇게 하면 중복된 미디어쿼리를 최소화할 수 있다.

/* 범용적인 미디어쿼리 */
@media screen and (min-width: 768px) {
  /* 태블릿 및 데스크탑 스타일 */
}

/* 추가적인 미디어쿼리 */
@media screen and (min-width: 1024px) {
  /* 더 큰 화면에 대한 스타일 */
}

 

4. Rem 단위 활용 방법
4.1 루트 요소에 기본 폰트 크기 설정

 

html {
  font-size: 16px; /* 브라우저의 기본 폰트 크기 설정 */
}

body {
  font-size: 1rem; /* Rem 단위를 사용한 기본 폰트 크기 설정 */
}

4.2 미디어쿼리에서 Rem 단위 활용

 

/* 미디어쿼리에서 Rem 단위 활용 */
@media screen and (min-width: 768px) {
  /* 폰트 크기를 Rem 단위로 설정 */
  body {
    font-size: 1.2rem;
  }

  /* 기타 스타일 변경 */
}

 

이처럼 미디어쿼리를 최소화하고 Rem 단위를 활용하면 더 효율적이고 유연한 반응형 디자인을 구현할 수 있다. 코드의 가독성과 유지보수성을 고려하여 필요한 미디어쿼리만 사용하도록 주의하며, Rem 단위를 통해 유연하게 크기를 조절하자.