[CSS] CSS 변수(Variables)를 사용하여 응답성(반응형)을 매우 단순하게 만드는 방법

2018년 반응형 웹 사이트를 만드는 방법에 대한 간단한 튜토리얼 입니다.

이전에 CSS 변수에 대해 들어 보지 못했다면, CSS를 사용하면 스타일 시트(stylesheet)에서 변수 설정을 할 필요없이 새로운 기능을 사용할 수 있습니다.
기본적으로, CSS 변수를 통해 다음과 같은 기존 스타일 설정 방식을 건너뛸 수 있습니다.
h1 { font-size: 30px; }
navbar > a { font-size: 30px; }
…이 점에 찬성합니다.
:root { --base-font-size: 30px; }
h1 { font-size: var(--base-font-size); }
navbar > a { font-size: var(--base-font-size); }
구문(syntax)이 다소 이상하게 보일 수도 있지만, 이것은 --base-font-size 변수만 변경하여 전체 앱에서 글꼴 크기를 변경할 수 있다는 명백한 이점을 제공합니다.
CSS 변수를 올바르게 배우고 싶다면 Scrimba에서 my free and interactive CSS Variables course 를 확인하십시오.
presentation
이 과정에는 8개의 interactive screencasts가 포함되어 있습니다.
또는 코스에 대해 더 알고 싶다면 아래 기사에서 배울 내용을 읽어보십시오.
이제는 반응형 웹 사이트를 구축 할 때 이 새로운 기술이 어떻게 당신의 삶을 편하게 만드는지 보도록하겠습니다.

설정

우리는 다음과 같은 포트폴리오 웹 사이트에 반응성을 추가 할 것입니다.
presentation
데스크톱에서 볼 때 멋지게 보입니다. 그러나 아래 왼쪽 이미지에서 볼 수 있듯이이 레이아웃은 모바일에서 제대로 작동하지 않습니다.
presentation

presentation
상단 : 모바일에서 처음에는 어떻게 보입니까? 하단 : 어떻게 보길 원하는지.
상단 이미지에서 모바일에서 더 잘 작동하도록 스타일에 대한 몇 가지 사항을 변경했습니다. 여기에 우리가 한 일이 있습니다.
  1. 그리드를 다시 정렬하여 두 개의 세로 막대(columns) 대신 세로(vertically)로 쌓아 올립니다.
  2. 전체 레이아웃을 조금 더 위로 이동했습니다.
  3. 글꼴 크기를 줄입니다.
이렇게하려면 다음처럼 CSS를 변경해야 합니다.
h1 { font-size: 30px; }
#navbar { margin: 30px 0; }
#navbar a { font-size: 30px; }
.grid { margin: 30px 0; grid-template-columns: 200px 200px; }
보다 구체적으로, 우리는 미디어 쿼리 안에서 다음과 같은 조정을 해야 합니다 :
  • h1의 글꼴 크기를 20px로 줄입니다.
  • #navbar 위와 아래의 여백(margin)을 15px로 줄이십시오.
  • #navbar 안의 글꼴 크기를 20px로 줄이십시오.
  • .grid 위의 여백(margin)을 15px로 줄입니다.
  • Change the .grid from from two-columns to one-column
  • .grid를 2 열(two-columns)에서 1 열(one-column)로 변경하십시오.
참고 :이 selectors에는 이 애플리케이션에도 훨씬 많은 CSS가 있습니다. 그러나 이 자습서에서는 미디어 쿼리에서 변경하지 않는 모든 항목을 제거했습니다. 전체 코드를 얻으려면 이 Scrimba playground를 확인하십시오.

기존 방식

CSS 변수가 없으면 이 모든 작업을 수행 할 수 있습니다. 그러나 위의 글 리스트의 대부분은 다음과 같이 미디어 쿼리 내부에 자체 selector가 필요하기 때문에 불필요한 코드가 필요합니다.
@media all and (max-width: 450px) { navbar { margin: 15px 0; } navbar a { font-size: 20px; } h1 { font-size: 20px; }
.grid { margin: 15px 0; grid-template-columns: 200px; }
}

새로운 방식

CSS 변수를 사용하여 이 것이 어떻게 해결 될 수 있는지 살펴 보겠습니다. 우선, 우리는 재사용 할 값을 저장하거나 내부 변수를 변경합니다.
:root { --base-font-size: 30px; --columns: 200px 200px; --base-margin: 30px; }
그런 다음 앱에서 간단히 다음 변수를 사용합니다.
#navbar { margin: var(--base-margin) 0; }
#navbar a { font-size: var(--base-font-size); }
h1 { font-size: var(--base-font-size); }
.grid { margin: var(--base-margin) 0; grid-template-columns: var(--columns); }
이 설정이 완료되면 미디어 쿼리 내부의 변수 값을 간단히 변경할 수 있습니다.
@media all and (max-width: 450px) { :root { --columns: 200px; --base-margin: 15px; --base-font-size: 20px; }
이것은 이전보다 훨씬 깨끗합니다. 우리는 모든 selectors를 지정하는 것이 아니라 : root만을 대상으로합니다.
우리는 미디어 쿼리를 4개의 selectors에서 1줄로, 13개의 라인에서 4줄로 줄였습니다.
그리고 이것은 단지 간단한 예)일뿐입니다. 예를 들어, --base-margin이 앱 주변의 빈 공간을 대부분 제어하는 본격적인 웹 사이트를 상상해보십시오. 복잡한 selectors를 사용하여 미디어 쿼리를 작성하는 것보다 그 가치를 뒤집는 것이 훨씬 쉽습니다.
요약하면, CSS 변수는 확실히 미래의 응답 성입니다. 이 기술을 한 번 배우고 싶다면 free course on the subject on Scrimba를 확인하는 것이 좋습니다.
당신은 곧 CSS 변수 마스터가 될 것입니다 :)
읽어 주셔서 감사합니다! 나는 Perrim Borgen, 프론트 엔드 개발자이며 Scrimba의 공동 설립자입니다. 질문이나 의견이 있으시면 Twitter를 통해 저에게 연락하십시오.

번역글 추천(신청) 받습니다.

PS. 안녕하세요. 일 년 조금 넘게 제가 공부 좀 해보려고 블로깅을 처음 시작했는데, 생각보다 많은 분들께서 제 번역 글들을 보시고 계셔서 놀라기도 하고 좋기도 했습니다.
읽고 싶은 좋은 디자인 관련 해외 글들이 있다면 리뷰에 링크를 달아 주세요. 가능하면 번역해보려고 합니다.
기간은 보통 원작자 허락 구하는데 3일정고 그리고 번역은 1일 정도입니다. 신청하시면 가능한 1주일 내에는 충분히 볼 수 있지 않을까 생각됩니다.

이 글은 번역글입니다. 원본링크입니다.