반응형 작업 - media-query 최소화하기

sebinnnnn·2023년 4월 11일
0
post-thumbnail

💡 들어가기 전에

현재 우리가 사용하는 대부분의 웹 사이트는 '반응형 웹'으로 제작되어 있다.
여기서 말하는 반응형 웹이란 무엇일까?
반응형 웹은 쉽게 말해서 디바이스의(화면) 크기에 따라 웹 페이지의 크기가 자동적으로 재조정되어 해당 화면에 최적화된 레이아웃을 제공하는 것을 말한다.
요즘은 태블릿, 핸드폰 등의 다양한 디바이스를 통해서 인터넷을 사용하기 때문에 모바일 웹에 대한 관심이 굉장히 많아지고, 대부분의 서비스들이 모바일 웹에 최적화된 웹 페이지를 제공하기도 한다.

css media-query

반응형 웹은 css의 media-query를 통해서 쉽게 구현할 수 있다.

실제로, MDN 공식 문서에서 '반응형 디자인은 오롯이 미디어 쿼리 때문에 등장할 수 있었습니다.'라고 언급할 정도로 대부분의 반응형 디자인은 media-query를 통해 구성된다고 해도 과언이 아니다.

@media screen and (min-width: 800px) {
  .container {
    margin: 1em 2em;
  }
}

출처https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Responsive_Design

MDN 공식 문서에서 제공하는 위의 예제 코드를 통해 알 수 있듯이, 디바이스 별로 스크린 크기를 지정하고 해당 화면 크기에 적합한 레이아웃을 구성해 디바이스 크기별로 각각 다른 최적화된 화면을 사용자에게 제공할 수 있게 된다.

media-query를 통해 손쉽게 디바이스 별로 화면 크기를 지정해서 반응형 웹을 제작할 수 있지만 굳이, media-query를 사용하지 않고도 반응형 웹을 구성할 수 있는 방법이 있다.


📍css 상대 길이 단위 사용

좀 더 정교한 반응형 웹을 제작할 때는 media-query를 사용하는 것이 좋지만, 만약 media-query 사용하지 않고 유동적인 웹 페이지를 제작하고 싶다면 css의 길이 단위 중에서 rem, em과 같은 상대 길이 단위를 사용하면 된다.

css의 상대 길이 단위
상대 길이 단위는 상위 요소의 글꼴 크기나 뷰포트 크기와 관련이 있는 길이 단위로, 상대 길이 단위를 사용하게 되면 텍스트 혹은 다른 요소 크기가 페이지의 다른 요소들에 비례하여 조정되도록 레이아웃을 구성할 수 있다는 이점이 있다.

  • 대표적인 상대 길이 단위 : rem, em
    rem : rem에서의 r은 root를 의미하는 것으로, rem의 기준값은 html 태그와 같은 최상위 요소에 지정된 font-size가 된다.
    em : em은 rem과 다르게, 현재 지정된 요소 스타일의 font-size가 값의 기준이 된다. 다만, 따로 font-size를 지정하지 않았다면 부모 요소의 font-size를 상속받게 된다.
    👉🏻 MDN css 상대 길이 단위

위에서 언급한 것과 같이 상대 길이 단위를 사용하게 되면 페이지 내의 다른 요소들에 비례하여 유동적으로 조정되는 레이아웃을 구성할 수 있다.

상대 단위가 아닌 절대 단위로 레이아웃을 구성하게 되면 페이지 내의 요소들의 크기가 고정이 되어 디바이스 크기가 바뀌어도 해당 값은 바뀌지 않아 레이아웃이 깨지거나 혹은 콘텐츠들이 옆으로 밀려나게 되는 이슈가 발생한다.
이런 경우를 대비해서, media-query를 통해 화면 크기별로 레이아웃을 재조정하는 것인데 처음 html을 작성할 때부터 상대 길이 단위를 사용할 것으로 예상하고 레이아웃 구조를 구성하게 되면 media-query 사용을 최소화할 수 있게 된다.

단, 상대 단위를 사용하게 되면 부모 혹은 상위 요소를 기준으로 각각의 크기를 결정해야 하기 때문에 다소 복잡한 작업이 될 수 있다.

하지만, 처음부터 상대 길이 단위를 사용할 것으로 예상하고 부모 혹은 상위 요소의 크기를 명시적으로 나타낸 후 각각의 요소들의 크기 변화를 배수로서 표현하게 되면 규칙적으로 상대 길이 단위를 사용할 수 있을 것이다.


참고
https://webdesign.tutsplus.com/ko/tutorials/comprehensive-guide-when-to-use-em-vs-rem--cms-23984

https://www.nextree.co.kr/p8622/

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units

profile
🏠 블로그 이전 중 → https://gksk.tistory.com/

0개의 댓글