CSS를 한 줄 추가하여 반응형 HTML을 만드는 방법(How to make your HTML responsive by adding a single line of CSS)

이 글은 Per Harald BorgenHow to make your HTML responsive by adding a single line of CSS글을 번역했습니다. 저의 모든 글은 허가를 받고 진행 하였습니다


presentation
Photo by TJ Holowaychuk
이 글에서는 CSS 그리드를 사용하여 화면 너비에 따라 열(columns)의 양을 변경하는 아주 좋은 이미지 그리드를 만드는 방법에 대해 설명합니다.
그리고 가장 아름다운 부분은 반응성이 CSS의 한 줄에 추가된다는 것입니다.
즉, HTML을 보기 흉한 클래스 이름(즉, col-sm-4, col-md-8)으로 어수선하게 만들거나 모든 화면 크기에 대한 미디어 쿼리를 만들 필요가 없습니다.
무료 CSS 그리드 강좌도 만들었습니다. 여기를 클릭하여 전체 액세스 권한을 얻습니다.
CSS Grid코스를 가시려면 여기를 클릭하세요
presentation
CSS Grid코스를 가시려면 여기를 클릭하세요
자, 이제 시작합니다!

설정

이 글의 경우, 첫 번째 CSS 그리드 글(my first CSS Grid article)에서 사용한 그리드로 계속 진행합니다. 그런 다음 글 끝에 영상을 추가하겠습니다. 초기 그리드는 다음과 같습니다.
presentation

HTML 소스 입니다 :
<div class="container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div>
And the CSS:
.container { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 50px 50px; }
참고: 이 예에는 약간의 기본 스타일링도 있습니다. CSS Grid와 관련이 없기 때문에 여기에 설명하지 않겠습니다.
이 코드가 헷갈릴 경우 (Learn CSS Grid in 5 minutes) 글을 읽는 것이 좋습니다. 여기서 레이아웃 모듈의 기본 사항에 대해 설명합니다.
먼저 열(columns)에 반응하는 것으로 시작하겠습니다.

분율 단위(fraction unit)를 이용한 기본적인 반응성(responsiveness)입니다.

CSS Grid는 분수 단위(fraction unit)라고 하는 완전히 새로운 값을 제공합니다. 분율 단위는fr처럼 작성되며, 원하는 만큼의 분수로 컨테이너(container)를 분할할 수 있습니다.
각 열(columns)을 단위 너비 1개(one fraction unit)로 변경합니다.
.container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 50px 50px; }
여기서 발생하는 일은 그리드가 전체 폭을 세 부분으로 나누고 각 열이 각각 하나의 단위를 차지한다는 것입니다. 결과는 다음과 같습니다.
presentation
grid-template-columns 값을 1fr 2fr 1fr,로 변경하면 됩니다. 이제 두 번째 열은 두 개의 다른 열보다 두 배 더 넓어집니다. 전체 폭은 이제 4분위수이고, 두 번째 폭은 2분위수이고, 다른 폭은 각각 1분위수입니다. 다음과 같이 보입니다.
presentation
즉, 부분 단위(fraction unit) 값을 사용하면 열(columns)의 너비를 매우 쉽게 변경할 수 있습니다.

전문적인 응답성(responsiveness)

그러나 위의 예는 우리가 원하는 반응성(responsiveness)을 제공하지 않습니다. 이 격자는 항상 세 개의 열 폭을 가지기 때문입니다. 우리는 우리의 그리드가 용기의 폭에 따라 기둥의 양을 변화시키기를 원합니다. 이를 위해서는 세 가지 새로운 개념을 배워야 할 것입니다.

repeat()

We’ll start with the repeat() function. This is a more powerful way of specifying your columns and rows. Let’s take our original grid and change it to using repeat():
repeat() 으로 시작하겠습니다. 이것은 당신의 열과 행을 지정하는 더 강력한 방법입니다. 원래 그리드를 사용하여 repeat()으로 변경합니다.
.container { display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(2, 50px); }
즉, repeat(3, 100px)100px 100px 100px와 동일합니다. 첫 번째 매개 변수는 원하는 열 또는 행의 수를 지정하고, 두 번째 매개 변수는 해당 너비를 지정하므로, 다음과 같은 레이아웃을 사용할 수 있습니다.
presentation

auto-fit

그리고 자동 맞춤(auto-fit)이 있습니다. 고정 열은 생략하고 3을 auto-fit으로 교체합니다.
.container { display: grid; grid-gap: 5px; grid-template-columns: repeat(auto-fit, 100px); grid-template-rows: repeat(2, 100px); }
이로 인해 다음과 같은 동작이 발생합니다.
presentation
이제 그리드는 container의 너비에 따라 열의 양을 변경합니다.
가능한 한 많은 100px 폭의 열을 container에 넣기만 하면 됩니다.
그러나 모든 열을 정확히 100px로 코드화하면 전체 너비가 거의 추가되지 않기 때문에 원하는 유연성을 얻을 수 없습니다. 위의 gif에서 볼 수 있듯이, 그리드는 종종 오른쪽에 흰색 공간을 남깁니다.

minmax()

이것을 고치기 위해 필요한 최종 재료는은 minmax()다. 100px를 minmax(100px, 1fr)로 간단히 교체하겠습니다. 여기 최종 CSS가 있습니다.
.container { display: grid; grid-gap: 5px; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); grid-template-rows: repeat(2, 100px); }
모든 응답(responsiveness)은 CSS의 단일 라인에서 발생합니다.
이로 인해 다음과 같은 동작이 발생합니다.
presentation
보시다시피 완벽하게 작동합니다. minmax() 함수는 최소값보다 크거나 같거나 같은 크기 범위를 정의합니다.
따라서 열은 항상 최소 100px가 됩니다. 그러나 사용 가능한 공간이 더 많은 경우, 열이 100px가 아닌 분수 단위로 변하기 때문에 그리드는 이를 각 열에 균등하게 분배합니다.

이미지 추가

이제 마지막 단계는 이미지를 추가하는 것입니다. 이것은 CSS Grid와 아무 관련이 없지만, 코드를 계속 살펴보겠습니다.
먼저 각 그리드 항목에 이미지 태그를 추가하겠습니다.
<div><img src="img/forest.jpg"/></div>
이미지를 항목에 맞게 하려면 이미지를 항목 자체만큼 넓고 높게 설정한 다음 object-fit: cover;를 사용합니다. 이렇게 하면 이미지가 전체 컨테이너를 덮고 필요한 경우 브라우저에서 잘라냅니다.
.container > div > img { width: 100%; height: 100%; object-fit: cover; }
결국 다음과 같은 결과가 됩니다.
presentation
바로 그겁니다! 이제 CSS 그리드에서 가장 복잡한 개념 중 하나를 알게 되었으니, 여러분 자신을 한 번 격려해 주세요.

브라우저가 지원

종료하기 전에 브라우저 지원도 언급해야 합니다. 이 글을 쓸 당시 전 세계 웹 사이트 트래픽의 77%가 CSS 그리드를 지원하며 상승하고 있습니다.
2018년은 CSS 그리드의 해가 될 것입니다. 그것은 그것의 돌파구를 얻을 것이고, 프런트 엔드 개발자들에게 필수 기술로 바뀔 것입니다. 지난 몇 년 동안 CSS Flexbox에서 일어난 일과 비슷합니다.
또는, 강의 미리 보기(preview of the course)를 확인합니다.
읽어주셔서 감사합니다! 저는 인터랙티브 코딩 스크린캐스트를 만드는 도구인 Scrimba의 공동 창업자 Per입니다. 연락하고 싶으면 Twitter와 Instagram에서 저를 따라오세요.

이 글은 번역 글입니다. 원본 링크입니다.
https://medium.com/free-code-camp/how-to-make-your-html-responsive-by-adding-a-single-line-of-css-2a62de81e431

안녕하세요! Early adopter입니다.
페이스북 [DTF] 디자인 번역 공장 - Design Translation Factory 그룹도 많이 가입해주시길 바랍니다.
"보버"에서 "디자인 번역 공장" 연재를 저와 함께 해주실 분을 찾습니다. 하단 "리뷰" 또는 "페이스북"으로 편하게 메시지 주세요!
PS. 제가 사용하는 블로그 "보버"에 "함께 쓰는 블로그"라는 기능이 요번에 추가됐네요 ㅋ (미디엄에 퍼블리케이션 같은 기능..)
하단 링크 글을 보시면 "디자인 번역 공장"에 어떻게 함께 연재할 수 있는지 자세히 설명되어있습니다. 또는 쉽게 FB 메시지 주세요!
https://bit.ly/2L6WsZp