반응형 그리드를 만드는 방법을 아는 것은 웹 개발의 필수적인 부분입니다.
사진 작가를 위한 포트폴리오 페이지, 전자 상거래 사이트 또는 랜딩 페이지를 만들 때 모두 그리드 레이아웃을 기반으로 합니다. 그리드는 어디에나 있습니다.
좋은 반응형 그리드 레이아웃을 구축하는 방법을 안다면 즉시 프론트엔드 웹 개발자로 두각을 나타낼 것입니다.
그리드가 무엇인지에 대한 간략한 개요와 함께 바로 들어가 보겠습니다.
그리드 레이아웃이란 무엇입니까?
그리드는 미디어에서 시각적 요소를 구성하는 검증된 방법입니다.
디자이너들은 인쇄 신문과 광고의 초창기부터 그리드를 구현했습니다.
그리드를 사용하면 뇌가 쉽게 받아들이고 이해할 수 있는 미학적으로 즐거운 구성을 만들 수 있습니다. 따라서 웹사이트에서 꼭 사용하고 싶은 것입니다.
그리드 디자인은 영역을 열로 나눕니다. 열 사이에는 공백 또는 거터가 있습니다.
일반적으로 공간을 2 또는 3의 인수로 나눌 수 있기 때문에 총 12개의 열이 필요합니다.
Studiopress 웹사이트 테마에서 이 방법이 적용되는 것을 볼 수 있습니다.
물론 열의 너비가 모두 같을 필요는 없습니다. 일부 열은 두 개의 열에 걸쳐 있고 다른 열은 4개, 6개 또는 그 이상에 걸쳐 있기를 원할 수 있습니다.
페이지의 모든 요소가 열 중 하나에서 시작하고 끝나도록 하십시오.
또한 세로 영역을 여러 영역으로 나눌 수 있으며 각 영역에는 열 너비 조합이 다릅니다.
처음에 들리는 것처럼 복잡하지 않죠? 이제 기본 사항을 알았으니 웹사이트에서 반응형 그리드를 구축하는 가장 좋은 방법은 무엇입니까?
계속 읽고 알아보세요:
반응형 그리드를 만드는 방법
최근에 flexbox와 CSS 그리드 레이아웃에 대해 많은 이야기가 있었습니다.
이러한 새로운 CSS 기술 이전에는 CSS float 속성을 사용해야 했습니다. 몇 가지 부동 열 요소를 만들고 백분율 너비 및 미디어 쿼리를 뿌렸으므로 잘 수행되었습니다.
(그리고 float 그리드 이전에는 HTML 테이블이 유일한 옵션이었습니다. 그러나 우리는 그것에 대해 이야기하지 않습니다 😉 )
프론트엔드 웹 개발을 배울 때 반응형 프레임워크인 Zurb Foundation을 사용하기 시작했습니다. 많은 분들이 Bootstrap을 사용하고 계실 것입니다.
반응형 프레임워크를 사용하면 웹사이트를 훨씬 쉽게 구축할 수 있습니다. 시간을 크게 절약해 줍니다!
그러나 시간을 절약할 수는 있지만 너무 의존하는 것은 좋지 않습니다. 특히 그들이 하는 일을 정확히 모르는 경우에는 더욱 그렇습니다.
프레임워크의 후드 아래에서 기본 스캐폴딩이 어떻게 작동하는지 이해하려고 노력하십시오. 일부 열 클래스를 div에 넣는 것만큼 쉽지는 않지만 CSS 원칙을 더 잘 이해할 수 있을 것입니다.
요점:더 나은 웹 개발자가 될 것입니다.
우리의 미니 프로젝트
다음 세 가지 방법을 사용하여 간단한 2열 그리드를 구축하는 방법에 대해 알아보겠습니다.
- 플로트,
- 플렉스박스,
- 및 CSS 그리드 레이아웃.
코드 조각과 일부 그래픽을 사용하여 각 단계를 설명하겠습니다.
그리드 계획
우리가 만들고자 하는 그리드는 기본 2열 그리드입니다. 많은 웹사이트 디자인과 마찬가지로 기본 콘텐츠 영역과 사이드바가 있습니다.
레이아웃을 구축할 때 가장 먼저 결정해야 할 사항 중 하나는 레이아웃이 어떻게 반응할지 결정하는 것입니다. 즉, 태블릿이나 모바일에서 볼 때와 비교하여 데스크톱에서 볼 때 레이아웃이 어떻게 변경됩니까?
내가 빌드를 시작할 때 사용하는 한 가지 전략은 디자인이 장치 간에 어떻게 변경되는지 기록하는 것입니다. 이 연습에 대한 메모는 다음과 같습니다.
모바일에서 , 우리는 상단에 주요 콘텐츠와 그 아래에 사이드바가 있는 열이 쌓이길 원합니다. 둘 다 너비가 100%입니다.
태블릿에서 , 열을 나란히 놓고 각 열이 너비의 50%를 차지하도록 합니다.
데스크톱에서 , 우리는 기본 콘텐츠 열이 2/3 너비를 차지하고 사이드바가 1/3 너비를 차지하기를 원합니다.
그리고 이것이 각각의 중단점에서 그리드가 표시되기를 원하는 것입니다.
미리 약간의 추가 작업이 필요하지만 이 계획을 사용하면 구축해야 할 항목을 알고 있기 때문에 시간을 절약할 수 있습니다. 이 기술은 더 크고 복잡한 프로젝트에서 작업할 때 특히 유용합니다.
이제 그리드 만들기를 시작하는 데 필요한 기본 정보가 있습니다!
플로트 그리드
flexbox와 CSS 그리드가 인계받고 있기 때문에 우리가 float 그리드를 다루는 이유가 궁금할 것입니다. 특히 구형 Internet Explorer 브라우저에서 float를 알아야 하는 일부 극단적인 경우가 있을 수 있기 때문에 여기에 포함하고 있습니다.
CSS의 float 속성은 원래 이미지 주위에 텍스트가 흐르도록 하는 것과 같은 용도로 사용되었습니다. 이미지에 float:왼쪽 규칙 집합을 지정하면 이미지가 부모 요소의 왼쪽에 정렬되거나 "플로트"됩니다.
플로트로 그리드 만들기
그리드를 만들려면 여러 요소에 float 속성을 부여하면 모든 요소가 오른쪽 또는 왼쪽 한쪽에 정렬됩니다.
.column {
display: block;
float: left;
}꽤 간단해 보이죠?
그러나 float에 대한 한 가지 성가신 측면은 문서의 정상적인 흐름에서 요소를 제거한다는 것입니다.
아래 이미지는 파란색 부동 열이 일반 디스플레이에서 제거될 때 어떤 일이 발생하는지 보여줍니다. 그러면 회색 상위 div는 하위 항목이 없는 경우의 높이로 축소됩니다.
몇 가지 방법으로 이 문제를 해결할 수 있습니다.
display: table을 추가할 수 있습니다. 부모 요소에 대한 규칙 집합입니다. 또는 :after를 추가하여 부동 소수점을 지울 수 있습니다. float를 지우기 위해 다음 스타일을 사용하여 부모에 의사 요소를 추가합니다.
.parent:after
{
clear: both;
content: "";
display: block;
}또 다른 참고 사항은 패딩과 여백(기본적으로 항상 사용)을 사용하는 경우 모든 요소에 box-sizing:border-box를 설정해야 한다는 것입니다.
이 선언에는 요소의 최종 너비와 높이를 계산할 때 패딩과 여백이 포함됩니다. 요소가 페이지를 벗어나지 않도록 합니다.
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Chris Coyier는 여기에서 이 모든 것에 대해 정말 훌륭한 설명을 제공합니다.
미디어 쿼리를 사용하여 그리드 반응형 만들기
그리드를 반응형으로 만들기 위해 미디어 쿼리를 활용합니다. 이를 사용하여 그리드에 특정 장치 너비에서 특정 레이아웃을 갖도록 지시할 수 있습니다.
참고로 우리는 기본 요소와 사이드바 요소가 모두 모바일의 경우 100% 너비가 되도록 하고, 태블릿에서는 50% 너비를, 데스크톱에서는 2/3 및 1/3 너비를 나란히 하기를 원합니다.
HTML에서 우리는 상위 div를 생성하고, 두 개의 하위 열 div에는 클래스가 기본 섹션인지 사이드바 섹션인지를 나타내는 클래스가 있습니다.
<div class="parent">
<div class="column main"></div>
<div class="column sidebar"></div>
</div>모바일:
CSS에서는 모바일 우선 접근 방식을 사용하여 기본적으로 두 열을 모두 100%로 설정합니다.
.column {
display: block;
width: 100%;
}태블릿:
그런 다음 태블릿 이상의 너비의 경우 열을 왼쪽으로 띄우고 너비를 50%로 만듭니다.
@media only screen and (min-width: 641px){
.column {
width: 50%;
float: left;
}
}데스크톱:
데스크톱의 경우 기본 및 사이드바 콘텐츠의 너비를 2/3 및 1/3로 변경하는 또 다른 미디어 쿼리를 추가합니다.
@media only screen and (min-width: 1025px){
.main {
width: 66.66%;
}
.sidebar {
width: 33.33%;
}
}여기에서 내 codepen에서 작동 중인 코드를 확인할 수 있습니다.
CodePen에서 Jessica(@thecodercoder)의 Pen Float Grid를 참조하십시오.
비교적 간단해 보이지 않나요? 수레는 끔찍하지 않습니다. 꽤 오랫동안 우리가 가진 전부였습니다.
하지만 플렉스박스로 넘어가면서 플로트 그리드가 얼마나 해킹되고 플렉스박스가 더 직관적인지 알게 될 것입니다.
Flexbox 그리드
flexbox를 사용하여 반응형 그리드를 생성하기 위해 두 개의 하위 열 div가 있는 상위 div와 함께 위와 동일한 HTML을 사용합니다.
가장 먼저 해야 할 일은 부모가 flexbox를 사용해야 한다고 선언하는 것입니다.
.parent {
display: flex;
}그런 다음 열 div에 flex 속성을 설정합니다.
.column {
flex: 1;
}
flex: 1 선언은 각 열 div가 다른 열과 너비가 동일함을 의미합니다. 일종의 비율입니다.
첫 번째 열이 다른 열의 너비의 두 배로 되기를 원하면 첫 번째 열의 flex를 2로 설정합니다. 그리고 두 번째 열의 flex 값은 그 절반인 1이 됩니다.
이것이 시작하는 데 필요한 전부입니다!
Flexbox는 매우 지능적이며 열의 개수에 관계없이 그리드 공간을 자동으로 균등하게 분할합니다.
위의 CSS를 float 그리드에 사용해야 했던 것과 비교하면 flexbox가 더 간단하다는 데 동의할 것입니다.
플렉스 그리드 만들기
이제 2열 반응형 그리드를 만들기 위해 부동 그리드에 대해 수행한 작업을 수행하고 모바일 우선 기본 스타일을 설정합니다.
모바일:
모바일에서는 flexbox가 필요하지 않고 태블릿과 데스크톱에서만 가능하므로 상위 div에는 display: flex가 필요하지 않습니다. 아직 선언입니다.
열 div가 너비의 100%가 되기를 원합니다. 원하는 경우 열에 width:100% 선언을 명시적으로 설정할 수 있습니다.
또는 너비 스타일을 선언할 수 없습니다. div는 일반적으로 기본적으로 display: block입니다. 자동으로 너비가 100%가 됩니다.
태블릿:
태블릿부터 flexbox에 추가하고 태블릿 너비 이상의 스타일에 대해 미디어 쿼리를 사용합니다.
먼저 flexbox를 만들고 상위 항목이 display: flex를 사용하도록 설정합니다. .
열이 이 너비로 균등하게 배치되기를 원하므로 flex: 1을 사용합니다. 모든 열 div에 대한 선언 1 열이 서로에 대해 동일한 너비가 된다는 것을 의미합니다.
@media only screen and (min-width: 641px){
.parent {
display: flex;
}
.column {
flex: 1;
}
}데스크톱:
데스크탑에서는 기본 콘텐츠가 사용 가능한 너비의 2/3를 차지하기를 원합니다. 사이드바가 나머지 1/3을 차지합니다.
이를 수행하기 위해 기본 열의 flex 값을 2로 증가시킵니다. . 사이드바 플렉스는 1에 유지됩니다. 태블릿에 설정되므로 데스크톱에 대한 다른 선언이 필요하지 않습니다.
@media only screen and (min-width: 1025px){
.main {
flex: 2;
}
}즉, 기본 콘텐츠가 사이드바 너비의 두 배가 됩니다.
두 개의 열이 있기 때문에 기본 콘텐츠는 너비가 2/3이고 사이드바는 너비가 1/3인 절반이 됩니다.
Flexbox는 강력하고 직관적입니다.
CSS flexbox가 얼마나 필요한지 즉시 알 수 있습니다. 그리고 그것이 만드는 그리드는 플로트 그리드와 정확히 동일합니다.
flexbox가 마음에 드는 점은 바로 작동한다는 것입니다. . 직관적입니다.
CSS float와 수년간 씨름한 후 그리드를 만드는 것이 얼마나 미친듯이 쉬운지 믿을 수 없었습니다.
Flexbox에는 다음과 같은 고급 속성도 있습니다.
- 열 항목을 가로 또는 세로로 정렬합니다(예, 세로로!!).
- 항목을 중앙에 배치하거나 그리드 상위 항목의 왼쪽 및 오른쪽 가장자리로 확장되도록 합니다.
- 다른 중단점에서 항목의 순서를 변경합니다.
CSS Tricks and Mozilla에서 이 기사에서 flexbox가 무엇을 할 수 있는지 자세히 알아볼 수 있습니다.
다음은 플렉스 그리드용 코드펜입니다.
CodePen에서 Jessica(@thecodercoder)의 Pen Flex Grid를 참조하십시오.
다시는 float를 사용할 필요가 없습니다. 물론 이미지 주위에 텍스트를 줄 바꿈하지 않는 한.
더 재미있는 시간을 보낼 준비가 되셨나요? 마지막 그리드 메서드로 이동해 보겠습니다.
CSS 그리드 레이아웃
CSS 그리드는 그리드를 구축하는 최신 방법입니다. flexbox와 비슷하지만 매우 다릅니다.
CSS 그리드의 전문가인 Rachel Andrew에 따르면 각각의 강점이 있습니다.
- 플렉스박스 행이나 열의 한 방향으로 배열된 요소에 유용합니다.
- CSS 그리드 행과 열을 포함하는 정렬에 유용합니다.
그녀는 CSS 그리드가 flexbox와 달리 머리글, 바닥글, 콘텐츠 및 사이드바가 포함된 일반적인 웹사이트 레이아웃에 더 나은 이유를 이 기사에서 자세히 설명합니다.
현재 CSS 그리드의 주요 단점은 모든 브라우저에서 보편적으로 지원되지 않는다는 것입니다.
이전 버전의 Chrome, iOS Safari 및 Android에서는 전혀 지원하지 않습니다. 그리고 IE 및 Edge 지원이 불안정합니다.
CSS 그리드를 사용하려면 몇 가지 옵션이 있습니다.
- 이를 사용하고 지원하지 않는 브라우저에 대한 일부 CSS 대체를 포함할 수 있습니다.
- 또는 flexbox를 사용하고 브라우저 지원이 보편화될 때까지 기다릴 수 있습니다.
CSS 그리드 작동 방식
flexbox와 마찬가지로 CSS 그리드는 부모 요소에 표시 속성을 설정해야 합니다. 이 경우 display: grid를 선언합니다. .
그러나 CSS 그리드에는 한 가지 중요한 차이점이 있습니다. 각 자식 요소에 그리드 설정을 지정하는 대신 부모 요소에도 그리드 템플릿을 설정합니다.
그리드 템플릿을 설정하기 위해 원하는 열 및/또는 행의 수와 각각의 크기를 선언합니다.
이를 수행하려면 grid-template-columns를 사용하십시오. 여러 열이 있는 경우 속성 및 grid-template-rows 여러 행에 대해.
속성 다음에 각 하위 요소의 길이 값이 옵니다.
두 개의 열이 있는 그리드의 경우 grid-template-columns만 사용합니다. 재산.
grid-template-columns 그러면 속성에는 각 열에 대해 하나씩 두 개의 값이 있습니다.
.parent {
display: grid;
grid-template-columns: 1fr 1fr;
}도대체 "fr"이 뭐야?!
분수의 줄임말인 "fr"은 새로운 측정 단위입니다. 분수를 나타냅니다. 의 사용 가능한 공간이 그리드의 각 항목에서 사용됩니다.
실제로 flex와 유사합니다. 숫자 – 둘 다 하나의 하위 요소가 다른 요소에 대한 상대적인 너비를 나타냅니다.
CSS 그리드 만들기
모바일 우선 접근 방식에서 다시 한 번 그리드의 스타일을 지정하는 방법은 다음과 같습니다.
모바일:
평소와 같이 하위 열은 모바일에서 스택되므로 CSS 그리드 스타일을 설정하지 않습니다.
태블릿:
태블릿용으로 너비가 같은 두 개의 자식 요소가 필요합니다.
.parent {
display: grid;
grid-template-columns: 1fr 1fr;
}데스크톱:
메인 열이 사이드바 열 너비의 2배가 되도록 유사한 비율을 수행할 것이며, 다시 한 번 2/3 및 1/3로 계산됩니다.
@media only screen and (min-width: 1025px){
.parent {
grid-template-columns: 2fr 1fr;
}
}실제 열에 그리드 스타일을 설정할 필요가 없고 부모만 설정할 수 있다는 점이 정말 좋습니다!
CSS 그리드는 매우 강력합니다.
flexbox와 마찬가지로 CSS 그리드는 2열 그리드를 만드는 것보다 훨씬 더 많은 일을 할 수 있습니다.
CSS 그리드를 사용하여 다양한 너비, 높이 및 배열의 훨씬 더 복잡한 레이아웃을 만들 수 있습니다. CSS 그리드가 할 수 있는 일의 표면을 긁었습니다.
CSS 그리드에 대해 자세히 알아보려면 Rachel Andrew의 웹사이트 Grid by Example 또는 Mozilla 기사 "그리드 레이아웃의 기본 개념"을 확인하세요.
그리고 여기에 내가 만든 코드펜이 있습니다.
CodePen에서 Jessica(@thecodercoder)의 Pen CSS 그리드를 참조하십시오.
마감
어떤 방법이 가장 적합한지 궁금하시다면 개인적으로 현재로서는 flexbox가 가장 좋은 선택이라고 생각합니다.
좋은 브라우저 지원을 제공할 만큼 충분히 오래되었으며 그리드를 생성하는 훌륭하고 효율적인 방법입니다. 또한 CSS 그리드와 함께 잘 작동하는 장점이 있기 때문에 CSS 그리드로 완전히 대체되지 않습니다.
마지막으로 CSS 그리드는 여전히 더 많은 브라우저 지원을 위해 노력하고 있습니다. 하지만 지금이라도 조금이라도 배우기 시작해야 합니다. CSS 그리드가 웹사이트 레이아웃 구축을 위한 업계 표준이 되는 날이 머지 않았습니다.
좋아하는 것이 있습니까? flexbox 또는 CSS 그리드를 배우려고 하다가 막혔습니까? 아래에 자유롭게 의견을 남겨주세요.