[디자인] 레이아웃을 구성할때 CSS Grid가 Bootstrap보다 나은 이유

CSS Grid는 웹에 레이아웃을 만드는 새로운 방법입니다. 처음으로 우리는 브라우저에서 기본적으로 사용할 수있는 알맞은 레이아웃 시스템을 사용하여 많은 이점을 얻었습니다.
CSS Grid를 가장 인기있는 프레임 워크, 즉 Bootstrap과 비교하면 이러한 이점이 특히 명확 해집니다. JavaScript를 도입하지 않으면 이전에는 불가능했던 레이아웃을 만들 수있을뿐만 아니라 코드를 유지하고 이해하기가 더 쉬울 것입니다.
이 글에서는 왜 그런지 설명 할 것입니다.
참고 : 저는 무료 CSS 그리드 코스도 만들었습니다. 여기를 클릭하면 전체 내용을 볼 수 있습니다.
또는 과정 전반에 걸쳐 배울 내용을 설명하는 이 글을 확인하십시오.
Want to learn CSS Grid? Here’s my free full-length course. Merry Christmas!
이제 CSS Grid가 부트 스트랩을 능가한다고 생각하는 이유에 대한 세 가지 주요 이유를 살펴 보겠습니다.

마크업이 더 간단해 집니다.

CSS Grid로 부트 스트랩을 교체하면 HTML이 보다 깨끗해질 것입니다. 이것이 가장 중요한 이점은 아니지만 가장 먼저 눈에 띄는 이점입니다.
이것을 예시하기 위해 웹 사이트의 dummy 레이아웃을 만들었으므로 두 버전에 필요한 코드를 비교할수 있습니다.
presentation
참고 : 예제에 약간의 디자인을 부여했습니다. 그러나 이것은 CSS Grid와 Bootstrap의 비교와는 아무런 관련이 없으므로 CSS의 일부분을 코드 예제 외부에 유지할 것입니다.

Bootstrap 부트 스트랩

부트 스트랩에서이 웹 사이트를 만드는 데 필요한 마크 업을 먼저 살펴 보겠습니다.
presentation
우리가 여기서 알아야 할 두 가지가 있습니다.
  1. 각 행(row)은 고유 한 <div> 태그 여야합니다.
  2. 레이아웃 (col-xs-2)을 지정하려면 클래스 이름을 사용해야합니다.
  3. 이 레이아웃이 복잡 해짐에 따라 HTML도 복잡해집니다.
이것이 반응 형 웹 사이트인 경우 태그는 일반적으로 더욱 악화됩니다.
presentation

CSS Grid

이제 CSS 그리드의 방법을 살펴 보겠습니다. HTML은 다음과 같습니다.
presentation
여기서 의미론적 요소를 사용할수 있었지만, div와 비교하여 Bootstrap 예제와 비교하기 쉽도록 선택했습니다.
이 마크 업이 더 간단하다는것을 즉시 알 수 있습니다. 추한 클래스 이름과 각 행에 필요한 추가 div 태그가 없어졌습니다. 이것은 그리드를위한 컨테이너(container)이고, 그 안에있는 items입니다.
그리고 부트스트랩과 달리 이 마크업은 레이아웃이 복잡해지면서 복잡성이 크게 증가하지 않습니다.
그러나 부트스트랩 예제에서는 CSS를 추가할 필요가 없지만 물론 CSS 그리드 예제에서는 이를 요구합니다. 특별히 다음을 추가해야합니다.
presentation
그리고 이것은 어떤 사람들에게는 Bootstrap에 대한 찬성 입장이 될 수 있습니다. HTML에서 레이아웃을 정의하기만 하면 간단한 그리드를 만들기 위해 CSS에 대해 걱정할 필요가 없습니다.
그러나 다음 단계에서 이해할 수 있듯이 마크 업과 레이아웃 간의 이러한 결합은 실제로 유연성면(flexibility)에서 약점이 있습니다.

Much more flexibility 훨씬 더 많은 유연성

화면 크기에 따라 레이아웃을 변경한다고 가정 해 보겠습니다. 예를 들어 모바일에서 볼 때 메뉴를 맨 윗줄까지 당깁니다.
즉, 다음과 같이 레이아웃을...
presentation
이렇게 변경 하십시오.
presentation

CSS Grid

CSS 그리드로 이것을하는 것은 매우 간단합니다. 우리는 단지 미디어 쿼리(media query)를 추가하고 원하는 항목(items)들 사이를 섞습니다.
presentation
HTML을 쓰는 방법에 대해 걱정할 필요없이 레이아웃을 재정렬 할 수 있다는 점을 소스 순서 독립(source order independence)이라고하며 개발자와 디자이너에게는 큰 도움이됩니다.
CSS Grid를 사용하면 HTML이 있어야 할 내용을 HTML로 만들 수 있습니다. 내용의 마크 업. CSS에 속하는 비주얼이 아닙니다.

Bootstrap

부트 스트랩에서 동일한 작업을 원한다면 실제로 HTML을 변경해야합니다. 메뉴(menu)가 두 번째 줄에 갇혀 있으므로 메뉴(menu) 태그를 header 외에 맨 위 행까지 이동해야합니다.
presentation
미디어 쿼리를 기반으로 이를 수행하는 것은 쉬운 일이 아닙니다. HTML과 CSS만으로는 할 수 없으므로 JavaScript로 시작해야합니다.
이 예제는 CSS 그리드에서 지금까지 경험 해본 가장 큰 이점을 보여줍니다.

No more 12 column limitation 12열(column) 제한이 더 이상 없음

이것은 큰 문제는 아니지만 여러번 짜증이 납니다. 부트스트랩 그리드가 12 개의 열로 나뉘어져 있기 때문에 5 열 레이아웃을 원할 경우 문제가 발생합니다. 또는 7. 아니면 9. 아니면 최대 12 개까지 안되는 그외 모든 것.
CSS Grid에서는 그렇지 않습니다. 그리드에 원하는 열의 양을 정확하게 표시 할 수 있습니다. 여기에 7 개의 열 그리드가 있습니다.
presentation
이 작업은 grid-template-columnsrepeat (7, 1fr)로 설정하여 수행 할 수 있습니다.
presentation
이제는 부트스트랩을 해킹하여이 작업을 수행하는 방법이 있을 수 있습니다.
그리고 저는 Bootstrap 4가 Flexbox를 사용하고 있다는 것을 알고 있습니다. 그러나 FlexBox는 여전히 베타 버전일 수도 있습니다.

Browser support 브라우저 지원

끝내기 전에 물론 브라우저 지원에 대해서도 이야기해야합니다. 이 글을 쓰는 시점에서 전세계 웹 사이트 트래픽의 75 %가 CSS Grid를 지원합니다.
presentation
그러나 CSS Grid 사용에 대한 생각을 완전히 없애기 전에 Morten Rand-Eriksen이 이 주제에 관해 언급 한 내용을 들어 보았습니다. CSS Grid는 우리가 이전 버전과의 호환성에 대해 생각하는 방식을 재구성 할 수있는 기회라고 주장합니다.
CSS 그리드는 레이아웃 모듈입니다. 소스 순서를 방해하지 않고 문서의 레이아웃을 변경할 수 있습니다. 즉, CSS 그리드는 순수하게 시각적 인 도구이므로 올바르게 사용하면 문서의 내용을 전달하는 데 아무런 영향을 미치지 않습니다. 이것은 단순하지만 놀라운 진리를 따릅니다. 이전 브라우저에서 CSS 그리드를 지원하지 않아도 방문자의 경험에 영향을 미치지 않아야하며, 경험을 다른 것으로 바꾸어야합니다.
즉, 시각적 콘텐츠와 콘텐츠를 분리했기 때문에 모든 방문자에게 콘텐츠가 제공되지만 결과적으로 CSS Grid는 더 나은 레이아웃을 통해 지원을받는 사람들의 경험을 향상시킵니다. .

Final remarks

마지막으로, 모질라의 개발자 대변인인 Jen Simmons의 말을 인용하고 싶습니다. 그녀는 내가 CSSGrid에 대해 알아 낸 것과 똑같은 느낌을 설명합니다.
CSS 그리드를 많이 사용할수록 그 위에 추상화 레이어를 추가함으로써 얻을 수있는 이점이 없다는 것을 확신합니다. CSS Grid는 레이아웃 프레임 워크입니다. 브라우저에서 바로 실행합니다. - 젠 시몬스
CSS Grid가 미래라고 확신하고 더 많은 것을 배우고 싶다면 여기에서 무료 강의를 확인하십시오.
읽어 주셔서 감사합니다! 내 이름은 Per입니다. 저는 Scrimba의 공동 창립자입니다. 대화 형 코딩 스크린 캐스트를 제작하기위한 새로운 도구입니다. 질문이나 의견이 있으시면 Twitter를 통해 나에게 연락하십시오.

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

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

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