px를 rem으로 변환 - 효과적인 워크플로

초급 CSS 개발자는 픽셀 단위를 어디에서나 사용하는 경우가 많으며 아무 문제가 없습니다.

하지만 이 글에서는 px 대신 rem을 사용하도록 설득하려고 합니다. px를 rem으로 변환하면 어떤 이점이 있는지 알게 될 것입니다.

픽셀 작업

글꼴 크기에서 패딩, 여백 및 모든 거리에 이르기까지 모든 것에 픽셀을 사용하는 웹 페이지를 구축했다고 가정해 보겠습니다. 이제 이 페이지를 반응형으로 만들기 위해 모든 크기에 대한 미디어 쿼리를 정의합니다.

예를 들어.

CSS

body {
  padding: 30px;
}

.heading-primary {
  margin-bottom: 60px;
}

.text-primary {
  font-size: 60px;
  letter-spacing: 35px;
}

.text-secondary {
  font-size: 20px;
  letter-spacing: 17px;
}

.btn {
  padding: 15px 40px;
  border-radius: 100px;
  font-size: 16px;
}

미디어 쿼리

@media all and (max-width: 600px) {
  body {
    padding: 15px;
  }

  .heading-primary {
    margin-bottom: 30px;
  }

  .text-primary {
    font-size: 30px;
    letter-spacing: 17px;
  }

  .text-secondary {
    font-size: 15px;
    letter-spacing: 8px;
  }

  .btn {
    padding: 7px 20px;
    border-radius: 100px;
    font-size: 10px;
  }
}

각 글꼴 크기, 패딩, 여백 및 거리에 대한 미디어 쿼리를 작성했습니다. 글쎄요. 하지만 미디어 쿼리 한 줄로 모든 크기 및 길이 관련 항목을 조정 가능하고 반응형으로 만드는 더 좋은 방법을 보여드릴 수 있습니다.

렘과 함께 일하기

rem 단위는 항상 루트 글꼴 크기와 관련이 있습니다. 그리고 루트 글꼴 크기는 HTML 선택기에서 설정됩니다.

예를 들어, 대부분의 브라우저의 기본 루트 글꼴 크기는 16px입니다. 따라서 1rem은 16px, 2rem은 32px, 3rem은 48px 등입니다.

따라서 이제 루트 글꼴 크기를 설정하면 페이지의 다른 모든 측정값을 rem으로 매우 쉽게 변경할 수 있습니다.

px 대 rem 계산을 쉽게 유지하기 위해 루트 글꼴 크기를 10px로 설정합니다. 따라서 이제 10px는 1rem, 20px는 2rem, 35px는 3.5rem입니다.

Formula: rem = px / 10

그에 따라 모든 px 단위를 rem으로 변경합시다.

CSS

html {
  font-size: 10px;
}

body {
  padding: 3rem;
}

.heading-primary {
  margin-bottom: 6rem;
}

.text-primary {
  font-size: 6rem;
  letter-spacing: 3.5rem;
}

.text-secondary {
  font-size: 2rem;
  letter-spacing: 1.7rem;
}

.btn {
  padding: 1.5rem 4rem;
  border-radius: 10rem;
  font-size: 1.6rem;
}

이제 페이지를 반응형으로 만들기 위해 모든 크기 및 길이 관련 항목에 대해 미디어 쿼리를 정의할 필요가 없습니다. 미디어 쿼리 및 붐에서 루트 글꼴 크기를 정의하기만 하면 즉시 적용할 수 있고 반응이 빠른 페이지가 생성됩니다.

미디어 쿼리

@media all and (max-width: 600px) {
  html {
    font-size: 6px;
  }

이 미디어 쿼리를 이전 쿼리와 비교합니다.

그게 다야 모든 크기와 길이는 루트 글꼴 크기에 따라 달라지므로 모든 크기와 길이는 그에 따라 600px 미만으로 줄어듭니다.

루트 글꼴 크기를 %로 정의

루트 글꼴 크기를 px로 정의하는 것은 좋지 않습니다. 루트 글꼴 크기는 항상 %로 정의해야 합니다. 이유를 설명하겠습니다.

때때로 독자(사용자)는 자신의 읽기 편의를 위해 브라우저의 기본 글꼴 크기를 변경할 수 있습니다. 따라서 리더가 기본 글꼴 크기를 20px로 늘리면 사용자가 정의한 루트 글꼴 크기인 10px는 변경되지 않습니다.

이것이 루트 글꼴 크기를 백분율로 정의해야 하는 이유입니다. 따라서 독자가 브라우저의 기본 글꼴 크기를 변경할 때 변경됩니다.

따라서 루트 글꼴 크기 100%는 브라우저의 기본 글꼴 크기인 16px가 됩니다. 그러나 10px가 되기를 원합니다(계산을 더 쉽게 하기 위해). 계산을 해봅시다.

16px = 100%
(16px / 16px ) * 10px = (100 / 16) * 10
10px = 62.5%

자, 루트 글꼴 크기를 10px에서 62.5%로 변경해 보겠습니다.

CSS

html {
  font-size: 62.5%;
  /* Default 100% is 16px. All rem will adapt accordingly if user changes browser font size. */
}

그래서 이번 포스팅은 여기까지였습니다. 모든 px를 rem으로 변경하도록 설득할 수 있기를 바랍니다. 다음은 px 대신 rem으로 구축된 라이브 웹 페이지입니다.

https://woyiv.csb.app


이 게시물을 즐겼다면 분명히 My weekly NewsLetter 을 좋아할 것입니다.

읽어주셔서 감사합니다.