화면의 너비에 따라 아이콘 크기 변경하기

 

"화면의 너비에 따라 아이콘 크기 변경하기"라는 주제로, 화면 크기에 따라 유연하게 아이콘 크기를 조정하는 방법을 정리해보겠습니다. 이 방법은 특히 이미지와의 상호작용이 필요한 경우나, 부모 요소의 너비가 명시되지 않아 % 단위를 사용할 수 없는 상황에서 유용합니다. 주로 네비게이션 아이콘이나 햄버거 메뉴 아이콘처럼 고정된 크기의 아이콘이 아닌, 다양한 해상도에서 크기가 조정되어야 하는 아이콘에 적용할 수 있습니다.

방법 개요

아이콘 크기 조정 시 화면의 max-width가 설정된 경우와 그렇지 않은 경우가 있는데요, 이 글에서는 max-width가 지정된 경우를 다루겠습니다. 가장 작은 화면에서도 동일한 논리를 반대로 적용해 크기를 조정할 수 있습니다.

1. 미디어 쿼리로 기본 크기 설정

먼저, 화면 너비가 640px 이상인 경우 아이콘 크기를 42px로 고정합니다. 이처럼 고정된 크기를 미디어 쿼리로 설정해줍니다.

@media (min-width: 640px) {
  :root {
    --assets-size: 42px;
  }
}

2. 가변 크기 계산식 만들기

이제 640px 미만의 경우에는 calc를 사용해 화면 너비에 따라 아이콘 크기가 유동적으로 조정되도록 합니다. 간단한 비례식을 통해 assets-size 값을 계산할 수 있습니다.

 

640px : 100vw = 42px : --assets-size

 

--assets-size = 100vw / 640 * 42

이를 calc로 적용해 CSS 변수로 지정하면 다음과 같습니다.

 

:root {
  --assets-size: calc(100vw * (42 / 640));
}

3. 변수화하여 이해하기 쉽게 정리

다른 사람이 코드를 읽을 때 640과 42의 의미를 바로 알기 어렵기 때문에, 이 값을 변수로 설정해 가독성을 높입니다.

:root{
    --max-assets-size:42px;   
    --body-max-width: 640px;
    --assets-size: calc(100vw * (var(--max-assets-size) / var(--body-max-width)));
}

@media (min-width: 640px) {
  :root {
    --assets-size: var(--max-assets-size);
  }
}

이렇게 하면 화면 너비에 따라 아이콘 크기가 유연하게 조정되며, 코드 가독성도 높아져 다른 개발자와 협업할 때 이해하기 쉬워집니다.