웹 디자인을 변화시키는 새로운 CSS 기능

웹 디자인이 단조롭던 때가 있었습니다. 디자이너와 개발자는 같은 종류의 웹사이트를 계속해서 만들었습니다. 그래서 우리 업계에서는 두 가지 종류의 웹사이트만 만들었다는 이유로 조롱을 받았습니다.

두 개의 가능한 웹사이트 중 현재 디자인하고 있는 웹사이트는 무엇입니까? pic.twitter.com/ZD0uRGTqqm

— Jon Gold(@jongold) 2016년 2월 2일

이것이 우리의 "창조적인" 마음이 달성할 수 있는 한계입니까? 이 생각은 내 마음에 제어할 수 없는 슬픔의 고통을 보냈습니다.

인정하고 싶지는 않지만 그것이 당시 우리가 할 수 있는 최선이었을 것입니다. 창의적인 디자인을 할 수 있는 적절한 도구가 없었을 수도 있습니다. 웹의 요구 사항은 빠르게 진화하고 있었지만 우리는 플로트 및 테이블과 같은 고대 기술에 갇혀 있었습니다.

오늘날 디자인 환경은 완전히 바뀌었습니다. 우리는 창의성을 발휘하는 데 사용할 수 있는 새롭고 강력한 도구(예: CSS 그리드, CSS 사용자 정의 속성, CSS 모양 및 CSS writing-mode )를 갖추고 있습니다.

CSS 그리드가 모든 것을 바꾼 방법

그리드는 웹 디자인에 필수적입니다. 당신은 이미 그것을 알고 있었다. 그러나 주로 사용하는 그리드를 어떻게 설계했는지 자문해 본 적이 있습니까?

우리 대부분은 그렇지 않습니다. 업계 표준이 된 12열 그리드를 사용합니다.

• 그런데 왜 같은 그리드를 사용합니까?
• 그리드가 12개의 기둥으로 구성된 이유는 무엇입니까?
• 그리드의 크기가 동일한 이유는 무엇입니까?

동일한 그리드를 사용하는 이유에 대한 한 가지 가능한 대답은 다음과 같습니다. 수학을 하고 싶지 않습니다 .

과거에는 float 기반 그리드를 사용하여 3열 그리드를 생성하려면 각 열의 너비, 각 거터의 크기, 각 그리드 항목의 위치를 ​​계산하는 방법이 필요했습니다. 그런 다음 HTML에서 클래스를 생성하여 적절하게 스타일을 지정해야 했습니다. 꽤 복잡했습니다.

일을 더 쉽게 하기 위해 그리드 프레임워크를 채택했습니다. 처음에는 960gs 및 1440px와 같은 프레임워크를 사용하여 8, 9, 12 및 16열 그리드 중에서 선택할 수 있었습니다. 나중에 Bootstrap은 프레임워크 전쟁에서 승리했습니다. Bootstrap은 12개의 열만 허용하고 이를 변경하는 것이 힘들었기 때문에 결국 12개의 열을 표준으로 결정했습니다.

그러나 우리는 Bootstrap을 비난해서는 안됩니다. 당시로서는 최선의 방법이었다. 최소한의 노력으로 작동하는 좋은 솔루션을 원하지 않는 사람이 누가 있겠습니까? 그리드 문제가 해결되면서 우리는 타이포그래피, 색상 및 접근성과 같은 디자인의 다른 측면에 관심을 돌렸습니다.

이제 CSS 그리드의 출현으로 그리드가 훨씬 단순해 졌습니다. 우리는 더 이상 그리드 수학을 두려워할 필요가 없습니다. 스케치와 같은 디자인 도구보다 CSS를 사용하여 그리드를 만드는 것이 더 쉽다고 주장할 수 있을 정도로 간단해졌습니다.

왜요?

각 열의 크기가 100픽셀인 4열 그리드를 만들고 싶다고 가정해 보겠습니다. CSS Grid를 사용하면 grid-template-columns 선언에 100px 를 4번 쓸 수 있으며 4열 그리드가 생성됩니다.

 .grid { display: grid; grid-template-columns: 100px 100px 100px 100px; grid-column-gap: 20px; } 

12열 그리드를 원하면 100px 를 12번 반복하면 됩니다.

 .grid { display: grid; grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px; grid-column-gap: 20px; } 

예, 코드가 아름답지는 않지만 (아직) 코드 품질 최적화에 관심이 없습니다. 우리는 여전히 디자인에 대해 생각하고 있습니다. CSS Grid를 사용하면 코딩 지식이 없는 디자이너라도 누구나 쉽게 웹에서 그리드를 만들 수 있습니다.

너비가 다른 그리드 열을 생성하려면 grid-template-columns 선언에서 원하는 너비를 지정하기만 하면 됩니다.

 .grid { display: grid; grid-template-columns: 100px 162px 262px; grid-column-gap: 20px; } 

반응형 그리드 만들기

반응형 측면에 대해 이야기하지 않고 CSS 그리드에 대한 논의는 완료되지 않습니다. CSS 그리드를 반응형으로 만드는 방법에는 여러 가지가 있습니다. 한 가지 방법(아마도 가장 인기 있는 방법)은 fr 단위를 사용하는 것입니다. 또 다른 방법은 미디어 쿼리로 열 수를 변경하는 것입니다.

fr 은 분수를 나타내는 유연한 길이입니다. fr 단위를 사용할 때 브라우저는 열린 공간을 나누고 fr 배수를 기반으로 열에 영역을 할당합니다. 즉, 동일한 크기의 열 4개를 생성하려면 1fr 을 4번 작성해야 합니다.

 .grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-column-gap: 20px; } 

4개의 동일한 크기의 열이 생성되는 이유를 이해하기 위해 몇 가지 계산을 수행해 보겠습니다 .

먼저 그리드에 사용할 수 있는 총 공간이 1260px 라고 가정해 보겠습니다.

각 열에 너비를 할당하기 전에 CSS 그리드는 사용 가능한 공간(또는 남은 공간)을 알아야 합니다. 여기에서 1260px 에서 grip-gap 선언을 뺍니다. 각 간격이 20px 이므로 사용 가능한 공간으로 1200px 가 남습니다. (1260 - (20 * 3) = 1200) .

다음으로 fr 배수를 더합니다. 이 경우 4개의 1fr 배수가 있으므로 브라우저는 1200px 를 4로 나눕니다. 따라서 각 열은 300px 입니다. 이것이 우리가 4개의 동일한 열을 얻는 이유입니다.

그러나 fr 단위로 생성된 그리드가 항상 같지는 않습니다 !

fr 을 사용할 때 각 fr 단위는 사용 가능한(또는 남은) 공간의 일부라는 사실을 알아야 합니다.

fr 단위로 생성된 열보다 더 넓은 요소가 있는 경우 계산을 다르게 수행해야 합니다.

예를 들어, 아래 그리드에는 grid-template-columns: 1fr 1fr 1fr 1fr 생성되었지만 하나의 큰 열과 세 개의 작은(그러나 동일한) 열이 있습니다.

1200px 를 4개로 나누고 각 1fr 열에 300px 를 할당한 후 브라우저는 첫 번째 그리드 항목에 1000px 이미지가 포함되어 있음을 인식합니다. 1000px 는 300px 보다 크므로 브라우저는 대신 첫 번째 열에 1000px 를 할당하도록 선택합니다.

즉, 남은 공간을 다시 계산해야 합니다.

새 남은 공간은 1260px - 1000px - 20px * 3 = 200px 입니다. 이 200px 는 남은 분수의 양에 따라 3으로 나뉩니다. 각 분수는 66px 입니다. fr 단위가 항상 동일한 너비의 열을 생성하지 않는 이유를 설명하기를 바랍니다.

fr 단위가 매번 동일한 너비의 열을 생성하도록 하려면 minmax(0, 1fr) 를 사용하여 강제로 적용해야 합니다. 이 특정 예에서는 이미지의 max-width 속성도 100%로 설정해야 합니다.

참고 : Rachel Andrew는 다양한 CSS 값(min-content, max-content, fr 등)이 콘텐츠 크기에 미치는 영향에 대한 놀라운 기사를 작성했습니다. 읽을 가치가 있습니다!

너비가 다른 그리드

너비가 다른 그리드를 만들려면 fr 배수를 변경하기만 하면 됩니다. 아래는 황금비를 따르는 그리드로, 두 번째 열은 첫 번째 열의 1.618배이고 세 번째 열은 두 번째 열의 1.618배입니다.

 .grid { display: grid; grid-template-columns: 1fr 1.618fr 2.618fr; grid-column-gap: 1em; } 

다른 중단점에서 그리드 변경

다른 중단점에서 그리드를 변경하려는 경우 미디어 쿼리 내에서 새 그리드를 선언할 수 있습니다.

 .grid { display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 1em; } @media (min-width: 30em) { .grid { grid-template-columns: 1fr 1fr 1fr 1fr; } }

CSS 그리드로 그리드를 만드는 것이 쉽지 않습니까? 초기 디자이너와 개발자는 그러한 가능성을 위해 죽였을 것입니다.

높이 기반 그리드

뷰포트의 높이를 알 수 있는 방법이 없었기 때문에 이전에는 웹사이트의 높이를 기반으로 그리드를 만드는 것이 불가능했습니다. 이제 뷰포트 단위, CSS Calc 및 CSS Grid를 사용하여 뷰포트 높이를 기반으로 그리드를 만들 수도 있습니다.

아래 데모에서는 브라우저의 높이를 기준으로 격자 사각형을 만들었습니다.

Jen Simmons는 CSS 그리드를 사용하여 네 번째 에지를 설계하는 방법에 대해 설명하는 훌륭한 비디오를 가지고 있습니다. 나는 당신이 그것을 시청하는 것이 좋습니다.

그리드 항목 배치

margin-left 속성을 계산해야 했기 때문에 그리드 항목을 배치하는 것은 과거에 큰 골칫거리였습니다.

이제 CSS 그리드를 사용하면 추가 계산 없이 CSS로 직접 그리드 항목을 배치할 수 있습니다.

 .grid-item { grid-column: 2; /* Put on the second column */ } 

span 키워드로 얼마나 많은 열을 차지해야 하는지 그리드 항목에 알릴 수도 있습니다.

 .grid-item { /* Put in the second column, span 2 columns */ grid-column: 2 / span 2; } 

영감

CSS 그리드를 사용하면 동일한 웹사이트의 다양한 변형을 빠르게 만들 수 있도록 쉽게 배치할 수 있습니다. 한 가지 대표적인 예는 Lynn Fisher의 개인 홈페이지입니다.

CSS Grid의 기능에 대해 자세히 알아보려면 Jen Simmon의 연구실에서 CSS Grid 및 기타 도구를 사용하여 다양한 종류의 레이아웃을 만드는 방법을 살펴보세요.

CSS 그리드에 대해 자세히 알아보려면 다음 리소스를 확인하세요.

• 마스터 CSS 그리드, Rachel Andrew 및 Jen Simmons 비디오 자습서
• Layout Land, Jen Simmons 레이아웃에 대한 일련의 비디오
• CSS 레이아웃 워크샵, Rachel Andrew CSS 레이아웃 과정
• CSS 그리드 배우기, Jonathan Suh CSS 그리드에 대한 무료 과정입니다.
• 그리드 동물, Dave Geddes CSS 그리드를 배우는 재미있는 방법

불규칙한 모양으로 디자인하기

CSS 상자 모델은 직사각형이기 때문에 웹에서 직사각형 레이아웃을 만드는 데 익숙합니다. 직사각형 외에도 삼각형 및 원과 같은 간단한 모양을 만드는 방법도 찾았습니다.

오늘, 우리는 거기에서 멈출 필요가 없습니다. CSS 모양과 clip-path 를 마음대로 사용하면 많은 노력 없이 불규칙한 모양을 만들 수 있습니다.

예를 들어, Aysha Anggraini는 CSS 그리드 및 clip path 를 사용하여 연재 만화에서 영감을 받은 레이아웃을 실험했습니다.

Hui Jing은 텍스트가 Beyonce 곡선을 따라 흐르도록 하는 방식으로 CSS 모양을 사용하는 방법을 설명합니다.

더 깊이 파고 싶다면 Sara Soueidan이 직사각형이 아닌 레이아웃을 만드는 데 도움이 되는 기사를 참조하세요.

CSS 모양과 clip-path 는 디자인에 고유한 사용자 정의 모양을 만들 수 있는 무한한 가능성을 제공합니다. 불행히도 구문 면에서 CSS 모양과 clip-path 는 CSS 그리드만큼 직관적이지 않습니다. 다행히도 Clippy 및 Firefox의 모양 경로 편집기와 같은 도구가 있어 원하는 모양을 만드는 데 도움이 됩니다.

CSS의 writing-mode 텍스트 흐름 전환하기

웹은 주로 영어를 사용하는 사람들을 위해 만들어졌기 때문에 우리는 웹에서 단어가 왼쪽에서 오른쪽으로 흐르는 것을 보는 데 익숙합니다(적어도 그렇게 시작되었습니다).

그러나 일부 언어는 그 방향으로 흐르지 않습니다. 예를 들어 중국어 단어는 위에서 아래로, 오른쪽에서 왼쪽으로 읽을 수 있습니다.

CSS의 writing-mode 는 텍스트가 각 언어 고유의 방향으로 흐르도록 합니다. Hui Jing은 Penang Hokkien이라는 웹사이트에서 위에서 아래로, 오른쪽에서 왼쪽으로 흐르는 중국 기반 레이아웃을 실험했습니다. 그녀의 실험에 대한 자세한 내용은 "The One About Home"이라는 기사에서 읽을 수 있습니다.

기사 외에도 Hui Jing은 타이포그래피 및 writing-mode 에 대해 "동서가 만날 때: 웹 타이포그래피와 어떻게 현대적인 레이아웃에 영감을 줄 수 있는지"에 대해 이야기합니다. 나는 당신이 그것을 시청하는 것이 좋습니다.

중국어와 같은 언어를 디자인하지 않는다고 해서 CSS의 writing-mode 를 영어에 적용할 수 없는 것은 아닙니다. 2016년으로 돌아가서 Devfest.asia를 만들 때 나는 작은 창의력을 발휘하고 writing-mode 텍스트를 회전하기로 결정했습니다.

Jen Simmons의 연구실에는 writing-mode 에 대한 많은 실험도 포함되어 있습니다. 확인해보는 것도 추천합니다.

노력과 독창성은 먼 길을 간다

새로운 CSS 도구가 도움이 되더라도 고유한 웹 사이트를 만드는 데 필요한 도구는 없습니다. 약간의 독창성과 약간의 노력이 도움이 됩니다.

예를 들어 Super Silly Hackathon에서 Cheeun은 전체 웹사이트를 -15도 회전시켜 웹사이트를 읽을 때 바보처럼 보이게 만듭니다.

Darin Senneff는 삼각법과 GSAP를 사용하여 애니메이션 로그인 아바타를 만들었습니다. 암호 필드에 집중할 때 원숭이가 얼마나 귀엽고 눈을 가리는지보십시오. 대화형 로그인 양식과 마찬가지로 JustEat!

내 과정인 Learn JavaScript의 판매 페이지를 만들 때 JavaScript 학습자가 집에서 느낄 수 있도록 요소를 추가했습니다.

마무리

독특한 웹 디자인은 단순히 레이아웃에 관한 것이 아닙니다. 디자인이 콘텐츠와 어떻게 통합되는지에 관한 것입니다. 약간의 노력과 독창성으로 우리 모두는 청중에게 말을 거는 독특한 디자인을 만들 수 있습니다. 오늘날 우리가 사용할 수 있는 도구를 사용하면 작업이 더 쉬워집니다.

문제는 독특한 디자인을 만들 만큼 충분히 신경을 쓰고 있느냐는 것입니다. 니가하길 바래.