CSS를 사용하여 응답 레이아웃을 만드는 방법 - 3가지 다른 방법 설명

양호한 조판은 사이트의 관건적인 요소 중의 하나다.CSS를 사용하여 응답 레이아웃을 만드는 세 가지 방법을 살펴보겠습니다.
이 세 가지 방법은 다음과 같습니다.

미디어 쿼리만 사용하는 응답 식판

CSS 사용자 정의 속성을 2배율의 응답식으로 배열

CSS clamp() 함수를 사용한 응답 식판

TL;박사: 기말고사Codepen with all the methods를 보세요.뷰포트 크기를 조정하여 효과를 봅니다.

왜 응답 식판을 사용합니까?
네트워크는 다양한 화면 크기에 사용할 수 있다.당신의 사이트는 모바일 기기, 태블릿PC, 노트북, 데스크톱, 그리고 기본적으로 둘 사이의 모든 장치에서 일해야 하기 때문에 고려해야 할 것이 많습니다.

All of the method examples below are simplified as they only cover three selectors and one breakpoint.

이 간단한 HTML을 사용하여 이 자습서의 모든 방법을 시도할 수 있습니다.

<h1>How to create responsive typography using CSS</h1>
<p>
  Vestibulum molestie sapien eget orci pellentesque, et aliquam lectus convallis. Phasellus neque velit, ultricies ut lacus at, finibus lobortis dui. Proin eget diam elit.
</p>
<h2>Three different methods explained</h2>
<p>
  Pellentesque sagittis nisl nec rhoncus porta. Quisque luctus turpis nec turpis consequat fermentum et vitae diam.
</p>

우리 시작합시다!

방법 1: 미디어 쿼리만 사용하는 응답 식판
이것은 우리 목록에서 가장 기본적인 방법이다.
쉽게 말하면 텍스트 스타일을 선언하고 브레이크를 사용하여 더 큰 화면에 글꼴 크기를 늘립니다.

/* Declare text styles */
h1 {
  font-size: 2em;
}
h2 {
  font-size: 1.5em;
}
p {
  font-size: 1em;
}

/* Increase font sizes by 1.5x on bigger screens */
@media (min-width: 48rem) {
  h1 {
    font-size: 3em;
  }
  h2 {
    font-size: 2.25em;
  }
  p {
    font-size: 1.5em;
  }
}

이 결과를 검사해 보세요Codepen.뷰포트 크기를 조정하여 효과를 봅니다.
이런 방법을 사용하는 것은 완전히 좋은 것이다. 그것은 아주 잘한다.
단점은 대량의 코드를 작성해야 한다는 것이다.새 선택기를 추가할 때마다 코드 라이브러리는 더욱 커집니다.모든 단점의 선택기마다 스타일을 작성해야 합니다.

In a real world you would probably have text selectors h1, h2, h3, h4, h5, h6, p and at least two breakpoints. At that point, this code is would've already gone from 20 lines to 67 lines. That's 3.35x increase in the amount of code.

다음 방법은 코드의 양을 줄이고 유지보수를 더욱 쉽게 하는 방법을 보여 줍니다.

방법 2: CSS 사용자 정의 속성을 곱셈으로 하는 응답 식판
CSS 사용자 정의 속성(변수)은 매우 강력합니다.앞의 방법에서, 우리는 선택기의 글꼴 크기를 한 번에 수동으로 증가시켰다.현재, 우리는 글꼴 크기에 곱셈 변수를 설명하고, 단점 내에만 곱셈 값을 추가할 것입니다.
코드 예제를 전체적으로 살펴본 다음 분해해 보겠습니다.

/* Declare a font size multiplier variable */
:root {
  --text-multiplier: 1;
}

/* Increase the size of the multiplier on bigger screens */
@media (min-width: 48rem) {
  :root {
    --text-multiplier: 1.5;
  }
}

/* Declare text styles using calc() function and the multiplier */
h1 {
  font-size: calc(2em * var(--text-multiplier));
}
h2 {
  font-size: calc(1.5em * var(--text-multiplier));
}
p {
  font-size: calc(1em * var(--text-multiplier));
}

이 결과를 검사해 보세요Codepen.뷰포트 크기를 조정하여 효과를 봅니다.
첫 번째 단계는 변수를 설명하는 것입니다. 우리는 나중에 그것으로 글꼴 크기를 조절할 것입니다.기본값을 1로 설정합니다.

:root {
  --text-multiplier: 1;
}

두 번째 단계는 단점 내의 곱셈 값을 증가시키는 것이다.CSS 사용자 정의 속성은 SASS 변수와 달리 미디어 질의에서 사용할 수 있습니다.

@media (min-width: 48rem) {
  :root {
    --text-multiplier: 1.5;
  }
}

마지막 단계는 글꼴 크기를 설명하는 것이지만, 이번에는 곱하기 위해calc () 함수를 사용합니다.

h1 {
  font-size: calc(2em * var(--text-multiplier));
}
h2 {
  font-size: calc(1.5em * var(--text-multiplier));
}
p {
  font-size: calc(1em * var(--text-multiplier));
}

보시다시피, 우리는 글씨체의 크기를 한 번만 설명할 수 있습니다.첫 번째 방법과 비교하면 이것은 거대한 개선이다.

Compared to the first method, we only have 17 lines of code compared to 20. If we would add four more selectors and one breakpoint, our code would only increase from 17 lines to 34. Remember that using the first method it would require 67 lines. Almost twice as much.

코드의 감소는 우리가 CSS 사용자 정의 속성을 곱셈으로 사용하는 우아한 방식 때문이다.다른 단점을 추가하려면 세 줄의 코드만 필요합니다. 왜냐하면 글꼴 크기를 수정할 필요가 없기 때문입니다.코드도 유지보수와 수정이 더욱 쉽다.
브레이크를 추가하는 것은 매우 간단합니다.

/* Add more breakpoints */
@media (min-width: 64rem) {
  --text-multiplier: 1.75;
}
@media (min-width: 80rem) {
  --text-multiplier: 2.0;
}

사용자에게 있어서, 이런 방법은 첫 번째 방법과 완전히 같아 보이지만, 코드는 훨씬 좋다.
이제 새 CSS clamp() 함수를 살펴보겠습니다.

메서드 3: CSS clamp() 함수를 사용하여 레이아웃 응답
clamp () 함수가 매우 강력합니다!최소값, 기본설정, 최대값 등 세 가지 매개변수를 사용하여 값을 설정할 수 있습니다.기본적으로 너는 삼합일의 값이 있을 거야!
clamp() 함수를 사용하여 응답 텍스트를 선언하는 예는 다음과 같습니다.

font-size: clamp(2rem, 5vw, 3rem);

이것은 미디어 조회 없이 응답성 있는 레이아웃을 만들 수 있도록 합니다.코드 한 줄만 있으면 최소값 (이동), 최대값 (데스크톱), 기본설정을 설정할 수 있습니다.
글꼴 크기는 항상 최소-최대 범위의 기본설정이기 때문에 원활해집니다.매우 강력합니다!
프레젠테이션에 대한 응답 레이아웃을 설정하려면 다음과 같이 하십시오.

/* Declare text styles */
h1, h2, p {
  /* Font minimum, preferred and maximum value */
  font-size: clamp(var(--min), var(--val), var(--max));
}

/* Font size variables */
h1 {
  --min: 2em; /* minimum value */
  --val: 5vw; /* preferred value = 5% viewport width */
  --max: 3em; /* maximum value */
}
h2 {
  --min: 1.5em;   /* minimum value */
  --val: 4vw;     /* preferred value = 4% viewport width */
  --max: 2.25em;  /* maximum value */
}
p {
  --min: 1em;   /* minimum value */
  --val: 2.5vw; /* preferred value = 2.5% viewport width */
  --max: 1.5em; /* maximum value */
}

이 결과를 검사해 보세요Codepen.뷰포트 크기를 조정하여 효과를 봅니다.
코드를 보면 CSS 사용자 정의 속성과clamp () 함수를 사용하여 모든 텍스트 스타일을 동시에 설명할 수 있습니다. 코드 한 줄만 있으면 됩니다.
이후, 우리는 모든 선택기에 --min, -val과 --max 사용자 정의 속성을 설정하면 완성됩니다!

CSS custom properties can be scoped inside selectors so you can use the same custom properties with multiple selectors just like we have done here with our h1, h2 and p. These custom properties will not clash together even though they have the same name.

이 방법은 18줄 코드를 필요로 하고, 네 개의 선택기와 한 개의 단점을 더하면 38줄이 될 것이다.그래서 두 번째 방법보다 조금 크지만 우리는 유창한 조판을 받았다.
주의:clamp () 함수는 매우 새로운 함수이기 때문에 caniuse.com 브라우저 지원이 있는지 확인해야 합니다.

마무리
CSS는 강력합니다!
많은 상황에서, 예기한 결과에 도달할 수 있는 방법은 한 가지가 아니다.
여기까지 읽어주시면 감사합니다!나는 네가 약간의 새로운 것을 배웠으면 한다.
결승Codepen with all the methods이다.뷰포트 크기를 조정하여 효과를 봅니다.

고마워요🙏
나는 이 문장이 너에게 도움이 되기를 바란다🔥
당신은 더 많은 CSS, 디자인 시스템, Figma 내용을 볼 수 있습니다💪