8 가지 최신 CSS 기능 (및 사용 방법)

최신 CSS
(이미지 출처 : Getty Images)

CSS는 지속적으로 진화하고 있으며 웹 디자이너의 도구 세트에서 사양을 더욱 강력한 무기로 만들기 위해 흥미로운 새로운 기능이 많이 추가되었습니다.

CSS Grid는 레이아웃을 이전에는 볼 수 없었던 새로운 수준으로 끌어 올리고, 사용자 지정 속성은 변수 개념을 도입하고 기능 쿼리는 브라우저 지원을 확인합니다. 미디어 쿼리는 새로운 접근성 속성으로 한 단계 더 올라갑니다. 가변 글꼴은 최소한의 코드 부풀림으로 최대한의 창의성을 제공하는 반면 스크롤 스냅은 JavaScript가 필요하지 않습니다. 우리의 멋진 것을 확인하십시오 CSS 애니메이션 무엇을 만들 수 있는지 확인하십시오. 또는 코드없이 사이트를 구축하려면 다음을 시도하십시오. 웹 사이트 빌더 .



창의력을 발휘하려는 사람들을 위해 고유 한 레이아웃을위한 CSS Shapes와 Photoshop 스타일 디자인 효과를 도입하기위한 다양한 혼합 모드 및 필터가 있습니다. 최신 빌드에서 이러한 필수 기능을 사용하는 방법을 알아 보려면 계속 읽으십시오. 그러나 복잡한 웹 사이트는 웹 호스팅 당신의 필요를 지원할 수있는 서비스.



01. 사용자 지정 속성

Sass와 같은 전처리 기나 실제로 JavaScript와 같은 프로그래밍 언어를 사용했다면 코드 전체에서 재사용 할 수 있도록 정의 된 값인 변수의 개념에 익숙 할 것입니다. 사용자 지정 속성을 사용하면 전 처리기없이 CSS에서이를 수행 할 수 있습니다. 변수는 : root 수준 (전역 변수 생성)에서 설정하거나 선택기 내에서 범위를 지정할 수 있습니다. 그런 다음 구문을 사용하여 호출 할 수 있습니다. var (-& rsaquo; -myVariableName). 예를 들어 다음과 같은 변수를 설정할 수 있습니다. --primaryColor 이렇게 :

/* On the root element (a global variable) */ :root { -​-primaryColor: #f45942; } /* Scoped to a selector */ .my-component { -​-primaryColor: #4171f4; }

이제 해당 변수를 속성 값으로 사용할 수 있습니다.



h1 { color: var(-​-primaryColor); }

사용자 지정 속성은 상속되므로 매우 유용한 의미가 있습니다. 그중 하나는 테마입니다. 위의 예를 들어 보겠습니다. 글로벌 변수 (# f45942 – 밝은 주황색 빨강)를 정의 할 수 있습니다. --primaryColor 루트 수준에서이 변수를 사용하는 모든 인스턴스는 빨간색이됩니다. 하지만 선택기 내에서 다른 값 (# 4171f4 – 중간 파란색)을 사용하여 동일한 변수를 재정의합니다. 따라서 우리가 사용하는 모든 경우에 --primaryColor 해당 선택기 내에서 변수가 있으면 계산 된 값은 파란색이됩니다.

포토샵에서 한 색상을 다른 색상으로 변경하는 방법

기본값 설정

변수 범위 지정은 훌륭한 기능이지만 가끔 눈에 띌 수도 있습니다! 아직 정의되지 않은 변수를 사용하려고하면 결과 값이 계단식으로 추가 정의 된 변수가 아닌 브라우저 기본값 또는 상속 된 값으로 대체됩니다. 경우에 따라 기본값을 설정하는 것이 적절할 수 있습니다.

h1 { color: var(-​-primaryColor, blue); }

사용자 지정 속성은 전 처리기 변수와 어떻게 다릅니 까?

사용자 지정 속성은 몇 가지 주요 측면에서 전 처리기 변수와 다릅니다. 코드가 브라우저로 전송되기 전에 전 처리기 변수가 컴파일됩니다. 브라우저는 값이 변수라는 것을 알지 못하며 최종 결과 만 볼 수 있습니다. 사용자 지정 속성은 브라우저에서 계산됩니다. 최신 개발자 도구에서 검사하고 변수를 변경하고 해결 된 값을 볼 수 있습니다. 동적 변수이므로 CSS 내에서 또는 JavaScript를 사용하여 런타임에 값을 변경할 수 있습니다.



전 처리기 변수와 달리 맞춤 속성은 선택기 이름, 속성 키 또는 미디어 쿼리 선언 내에서 사용할 수 없으며 CSS 속성 값만 사용할 수 있습니다. CSS 전처리 기는 여전히 많은 이점을 가지고 있으므로 한동안 더 오래 머무를 수 있지만 사용자 정의 속성과 함께 더 자주 사용됩니다.

02. 기능 쿼리

기능 쿼리는 브라우저가 CSS 파일 내에서 특정 CSS 속성-값 조합을 지원하는지 여부를 테스트하는 방법입니다. Modernizr와 같은 기능 감지 라이브러리의 필요성을 사실상 제거합니다. 구문은 미디어 쿼리와 유사합니다. at-rule을 사용합니다. @ 지원 , 속성-값 쌍, 브라우저가 지정된 조건을 충족하는 경우 실행할 코드를 래핑합니다.

기능 쿼리는 최신 브라우저에서 잘 지원되지만 비교적 새롭고 지원을 위해 테스트하려는 일부 브라우저가 기능 쿼리 자체를 지원하지 않을 수 있다는 점이 하나의 '문제점'입니다. 종종이를 처리하는 가장 좋은 방법은 대체 스타일을 먼저 제공 한 다음 (기능 쿼리 외부), 브라우저 지원을위한 개선 사항을 @ 지원 규칙.

기능 쿼리는 드물게 만 사용하면됩니다. CSS의 큰 특징 중 하나는 브라우저가 이해하지 못하는 속성이나 값을 무시한다는 것입니다. 기능 쿼리를 사용하지 않으면 시각적 버그가 발생할 때만 사용하는 것이 가장 좋습니다. 그렇지 않으면 많은 추가 작업을 준비 할 수 있습니다.

CSS 기능 쿼리-caniuse.com

기능 쿼리에 대한 브라우저 지원을 확인하려면 caniuse.com 웹 사이트를 확인하세요.(이미지 출처 : caniuse.com)

기능 쿼리를 사용하는 방법

단일 속성 값의 지원을 테스트하기 위해 먼저 대체를 제공 할 수 있습니다. 이 예에서는 그리드 레이아웃을 지원하지 않는 브라우저를위한 Flexbox 폴백을 제공합니다.

.my-component { display: grid; } @supports (display: grid) { .my-component { display: flex; } }

03. 미디어 쿼리

미디어 쿼리를 사용하여 뷰포트의 너비와 높이, 미디어 유형 (가장 일반적으로 화면 또는 인쇄)을 감지하는 데 익숙 할 것입니다. 레벨 5 미디어 쿼리 사양은 일부 브라우저에서 이미 지원되는 새로운 미디어 기능 (선택 사항)을 테스트합니다. 이는 접근성에 대한 몇 가지 큰 이점을 제공합니다.

전정 장애가있는 사용자와 멀미를 앓고있는 사용자는 애니메이션 및 시차 스크롤링 효과와 같이 움직임이 많은 웹 페이지를 감상하지 못할 수 있습니다. 움직임 감소 선호 미디어 쿼리를 사용하여 움직임 감소 대안으로 옵트 아웃하는 사용자를 제공 할 수 있습니다.

.my-element { animation: shake 500ms ease-in-out 5; } @media (prefers-reduced-motion: reduce) { .my-element { animation: none; } }

웹 사이트에서 대체 어두운 테마를 제공하는 것이 점점 인기를 얻고 있습니다. Prefers-colors-scheme을 사용하면 사용자가 시스템 전반에 대한 기본 설정 (dark, light 또는 no-preference 키워드 사용)을 설정했는지 쿼리하고 그에 따라 적절한 색 구성표를 표시 할 수 있습니다.

/* Media queries 02 */ body { background: linear-gradient(to bottom, #b5faff, #ffe2b4); } @media (prefers-color-scheme: dark) { body { color: white; background: linear-gradient(to bottom, #0c1338, #3e3599); } }

04. 가변 글꼴

가변 글꼴

경험없이 그래픽 디자인을 시작하는 방법
OpenType Variable 글꼴을 사용하는 웹 사이트 Axis-Praxis를 확인하십시오.(이미지 출처 : AxisPraxis)

일반적으로 웹 페이지에 동일한 패밀리의 여러 다른 글꼴을 포함하려면 동일한 수의 글꼴 파일을로드해야합니다. 로드하는 글꼴 파일이 많을수록 페이지에 더 많은 가중치가 추가되어 성능에 영향을 미치므로 일반적으로 최대 3 개 또는 4 개의 글꼴 파일을로드하는 것이 좋습니다 (성능 예산에 따라 다름).

가변 글꼴은 모든 것을 변경합니다. 이를 통해 전체 글꼴 패밀리에 대해 단일 글꼴 파일을로드 할 수 있습니다. 이 파일은 일반적으로 단일 글꼴보다 크지 만 다른 가중치와 스타일을 활용하려면 가변 글꼴이 더 성능이 좋은 솔루션입니다. 전체 글꼴 패밀리를 구입 한 경우 안전하게 보관해야합니다. 클라우드 스토리지 그래서 당신은 당신의 파일을 잃지 않습니다!

변형 축

뿐만 아니라 가변 글꼴을 사용하면 글꼴 두께의 작은 하위 집합에 국한되지 않습니다. 일반 글꼴로 작업 할 때 사용 가능한 글꼴 두께는 100의 배수로 제공됩니다. 일반적으로 400은 일반 두께, 300은 경량, 700은 굵은 두께가 될 수 있습니다. 다른 제품군은 더 많은 가중치를 제공하거나 더 적게 제공합니다. 가변 글꼴에는 글꼴 두께와 같은 속성 값의 범위를 제공하는 변형 축이 있습니다. 글꼴에는 1–900 축이있을 수 있으므로 900 개의 다른 가중치에 액세스 할 수 있습니다!

변화의 축은 무게에만 국한되지 않습니다. 가변 글꼴은 x-height, slant, serif 길이 및 대비에 대해 서로 다른 축을 가질 수 있습니다 (몇 가지 예를 선택하기 위해). 즉, 단일 글꼴 파일로 수백 또는 수천 개의 변형에 액세스 할 수 있습니다! 이러한 속성에 애니메이션을 적용하여 정말 멋진 효과를 얻을 수도 있습니다. 맨디 마이클 ( https://codepen.io/mandymichael )에는 실제로 한계를 테스트하는 창의적인 데모가 많이 있습니다.

가변 글꼴에 대한 브라우저 지원은 매우 훌륭하며, 많은 글꼴 파운드리에서는 지금부터 사용할 수있는 새로운 가변 글꼴을 적극적으로 개발하고 있습니다. 이러한 글꼴은 특히 더 완전한 기능을 갖춘 글꼴 군의 경우 종종 프리미엄으로 제공됩니다. 가변 글꼴을 사용하여 무엇을 할 수 있는지 알아보고 싶다면 다양한 글꼴 놀이터 사이트가 있습니다.

지금 당장 가변 글꼴을 사용하려면 최신 운영체제를 사용하고 있는지 확인해야합니다. 이전 OS에서는 작동하지 않습니다.

글꼴 변형 설정

글꼴 두께를 쉽게 변경할 수 있지만 글꼴 두께 CSS 속성, 글꼴 변형 설정 글꼴의 다양한 변형 축에 대한 전체 액세스 권한을 제공하는 새로운 속성입니다. 여기에는 등록 된 축과 사용자 지정 축이 모두 포함됩니다.

등록 된 축

다양한 CSS 속성에 해당하는 5 개의 등록 된 축이 있습니다. 이들 각각에는 '축 태그'라고하는 것이 있습니다. 등록 된 축은 다음과 같습니다. 우와 (글꼴 두께), wdth (글꼴 늘이기), 아르 (글꼴 스타일 : 경사 / 각도), 음주 (글꼴 스타일 : 기울임 꼴), opsz (글꼴 광학 크기). CSS 속성 또는 글꼴 변형 설정 .

이러한 축은 모든 가변 글꼴에 반드시 모두 포함되는 것은 아니지만 (일부는 하나 또는 두 개의 축만있을 수 있음) 가장 일반적 일 수 있습니다.

사용자 지정 축

사용자 정의 축은 글꼴 디자이너가 포함하는 맞춤형 축이며, 무엇이든 될 수 있습니다. 예를 들어 세리프 길이, x- 높이, 회전과 같이 더 창의적인 (인쇄 상 덜 일반적인) 것을 포함 할 수 있습니다.

두 축 유형 모두 4 자 태그로 표현되어야합니다. 등록 된 축은 소문자 여야하며 사용자 지정 축은 대문자 여야합니다. 둘 다 font-variation-settings 속성에서 결합 할 수 있습니다. Font-variation-settings는 애니메이션이 가능하여 매우 멋진 UI 효과를 허용 할 수 있습니다! 아이콘 글꼴을 사용하여 매우 흥미로운 실험이 만들어졌습니다.

05. 그래픽 효과

CSSgram-Instagram 필터를 다시 만들기위한 작은 라이브러리

CSSgram은 Instagram 필터를 다시 만들기위한 작은 라이브러리입니다.(이미지 출처 : CSSGram)

Photoshop 및 Illustrator와 같은 디자인 도구에 익숙하다면 블렌드 모드와이를 사용하여 이미지에 다양한 효과를 생성하는 방법을 알고있을 것입니다. 혼합 모드가 작동하는 방식은 수학 공식을 사용하여 두 개 이상의 레이어를 혼합하여 각 픽셀의 결과 값을 계산하는 것입니다. 레이어는 이미지, 그라디언트 또는 평면 색상 등 무엇이든 될 수 있습니다. 일부 혼합 모드는 어둡게 (예 : 레이어의 픽셀 값을 곱하는 곱하기) 결과를 생성하고 일부는 더 밝은 결과 (예 : 화면 및 오버레이)를 생성합니다. 그러나 수학을 사용하기 위해 수학을 이해할 필요는 없습니다. 다른 블렌드 모드를 가지고 놀면 다른 레이어와 결합 할 때 원하는 결과를 생성하는 좋은 느낌을 줄 수 있습니다.

CSS 속성 사용 믹스 블렌드 모드배경 혼합 모드 , 브라우저에서 Photoshop과 같은 이미지 효과를 얻을 수 있습니다. 두 속성 모두 동일한 값을 갖지만 약간 다르게 작동합니다.

배경 혼합 모드

배경 혼합 모드 대상 요소의 배경 레이어를 함께 혼합합니다. 우리의 요소는 배경 이미지, 색상 및 그라디언트를 가질 수 있으며 전경 내용에 영향을 미치지 않고 모두 서로 혼합됩니다. 여러 값을 지정할 수 있습니다. 배경 혼합 모드 , 각 배경 레이어에 대해 하나씩.

.my-element { background: url(#myUrl), linear-gradient(45deg, rgba(65, 68, 244, 1), rgba(203, 66, 244, 0.5)), rgba(244, 65, 106, 1); background-size: cover; background-blend-mode: screen, multiply; }

혼합 혼합 모드

혼합 혼합 모드 요소가 전경 및 배경 콘텐츠, 의사 요소를 포함하여 부모 및 형제 요소와 혼합되는 방식에 영향을줍니다. 중첩 된 가상 요소 (:: before 및 :: after)를 혼합하여 흥미로운 창의적인 효과를 얻을 수 있습니다.

.my-element { background: rgb(244, 65, 106); mix-blend-mode: multiply; }

CSS 필터

CSS 필터를 사용하여 눈에 띄는 시각 효과를 만들 수도 있습니다. 필터 속성 및 필터 함수 값. 블렌드 모드와는 달리 대상 요소에 그래픽 효과를 직접 적용하고 요소에 여러 필터를 적용 할 수 있습니다.

회색조로 변환

블렌드 모드에 의존하는 것보다 더 큰 수준의 제어로 요소의 색상을 조작 할 수 있습니다. 필터는 이미지를 그레이 스케일로 변환하고, 밝기, 대비 및 채도를 조정하고, 요소를 흐리게 처리하거나 그림자를 추가 할 수 있습니다. 애니메이션도 가능하며 호버 효과로 멋지게 보입니다.

SVG 필터

CSS 필터는 실제로 SVG 필터의 단순화 된 버전입니다. CSS 필터 속성도 걸립니다 url () 함수를 사용하여 URL을 SVG 필터에 전달할 수 있습니다. SVG 필터는 매우 강력하고 놀라운 이미지 효과를 허용하지만 CSS 필터 기능보다 훨씬 더 복잡합니다! Sara Soueidan은 사용자 정의 SVG 필터를 코딩하는 데 관심이 있다면 Codrops에 대한 멋진 기사 시리즈를 제공합니다. 기사를 확인하십시오. https://tympanus.net/codrops/2019/01/15/svg-filters-101/

클리핑 및 마스킹 : 직사각형 너머

우리는 웹에서 상자를 다루는 데 익숙하지만 모든 것이 직사각형 일 필요는 없습니다! 클리핑과 마스킹은 동일한 동전의 양면이며 요소의 다른 부분을 숨기고 표시하여 배경이 보이도록하는 다른 방법입니다. 이것은 우리의 디자인에 흥미롭고 창의적인 모양을 도입 할 수있는 힘을줍니다.

클립 경로

그만큼 clip-path () 속성을 사용하면 경로를 정의하여 요소를 '잘라낼'수 있습니다. 여러 가지 기본 모양 기능이 필요합니다. inset (), circle (), ellipse () 또는 polygon () , 경로를 정의하기 위해 xy 좌표 쌍을 사용하여 더 복잡한 컷 아웃 모양을 만들 수 있습니다. 또는 다음을 사용하여 SVG 경로를 전달할 수도 있습니다. 통로() 기능 또는 사용 url () SVG 경로 ID를 제공합니다.

경로 내부가 아님

요소를 클리핑하면 정의한 경로 외부의 모든 항목이 클리핑되지만 요소 자체는 여전히 직사각형입니다. 클립 경로의 경계를 벗어나는 내용이있는 경우 해당 내용도 잘려서 모양 내부로 둘러싸이지 않습니다.

큰 부리 새 샘은 어떤 시리얼의 마스코트입니다

마스크 이미지

마스크 이미지 이미지 (SVG 또는 투명 PNG) 또는 그라디언트를 마스크로 사용하여 이미지의 일부를 표시하고 숨길 수 있습니다. 같지 않은 클립 경로 , 마스크 소스가 경로 일 필요가 없으므로 마스킹을 사용하여 이미지에 텍스처를 추가 할 수 있습니다. 이는 투명도를 허용합니다.

06. CSS 도형

CSS Shapes 사양을 사용하면 떠 다니는 기하학적 모양 주위에 텍스트를 감싸서 흥미로운 잡지와 같은 레이아웃을 만들 수 있습니다. 이것은 외형 특성. 비슷하다 클립 경로 ,이 속성에 기본 도형 함수를 제공 할 수 있습니다. circle (), ellipse (), inset (), polygon () 또는 SVG 경로에 대한 URL이며 실제로 두 가지가 조화롭게 잘 작동합니다! 외형 텍스트를 효과적으로 래핑하지만 플로팅 요소에는 영향을주지 않습니다. 텍스트가 이미지 나 떠 다니는 개체를 감싸는 것처럼 보이게하려면 동일한 값을 클립 경로 . 사용하다 모양 여백 모양 경로와이를 감싸는 내용 사이에 공백을 추가합니다. 보세요 물건 및 넌센스 중앙 이미지 주위에 텍스트를 감싸는 데 CSS Shapes를 사용하는 방법을 볼 수 있습니다.

Firefox에는 모양 경로 편집기 복잡한 모양으로 작업 할 때 특히 유용합니다. 그러나주의해서 사용하십시오. 텍스트 단락의 앞쪽 가장자리를 감싸는 것은 예술적 효과에는 좋지만 사용자 경험에는 항상 좋은 것은 아닙니다. 복잡한 들쭉날쭉 한 모양은 텍스트 블록을 읽기 어렵게 만들 수 있습니다. 중요한 콘텐츠의 경우 명확하게 제어 할 수 있습니다.

07. 스크롤 스냅

스크롤 스냅

Michelle Barker의 CodePen이 작동하는 스크롤 스냅 시연(이미지 출처 : CodePen-Michelle Barker)

많은 웹 사이트는 JavaScript 라이브러리를 활용하여 사용자가 스크롤 할 때 콘텐츠가 가리키는 지점에 '스냅'되는 매끄러운 네이티브 앱과 같은 스크롤 경험을 제공합니다. 이제 Scroll Snap 사양을 사용하면 CSS 파일 내에서 바로이 작업을 수행 할 수 있습니다. 페이지를 부풀리기 위해 무거운 JS 모듈을 가져올 필요가 거의 없습니다.

스크롤 스냅을 구현하려면 스크롤 컨테이너 역할을하는 요소가 필요합니다. 컨테이너의 직계 자식은 스냅 될 지점을 지정하며 스냅 영역 내에서 다양한 방식으로 정렬 될 수 있습니다.

스크롤 스냅은 다른 새 CSS 속성 값과 결합하면 훨씬 더 효과적 일 수 있습니다. 위치 : 끈적 . 이 위치 값은 컨테이너 내에서 스크롤하는 동안 요소를 지정된 위치에 '고정'합니다. 이전에는 JavaScript에서만 가능했던 또 다른 동작입니다. 위치와 함께이 스크롤 스냅을 확인하십시오. 고정 및 교차 관찰 서버 예 .

08. CSS 그리드 및 레이아웃

프런트 엔드 개발자는 당시 사용할 수있는 도구가 무엇이든간에 레이아웃을 해킹했습니다. 가장 최근에는 많은 최신 그리드 시스템에서 사용하는 flexbox입니다. 그러나 flexbox는 엄격한 그리드를 구축하도록 설계되지 않았습니다. 그 목적은 유연성입니다!

CSS Grid는 2 차원 레이아웃 용으로 설계된 첫 번째 사양으로, 레이아웃을 구축하고 행과 열 축 모두에 항목을 배치하는 것을 완벽하게 제어 할 수 있습니다. Grid를 사용하여 반응 형 레이아웃을 구축 할 때 calc () 또는 마이너스 여백으로 해킹 할 필요가 없습니다. 비밀 무기는 그리드 전용의 새로운 유닛 인 fr 유닛입니다. fr 단위는 사용 가능한 공간의 비율로 그리드 트랙 (행 및 열)의 크기를 지정합니다. 고정 된 트랙, 거터 및 콘텐츠를 고려한 다음 그에 따라 나머지 공간을 배포합니다. Jen Simmons는 Grid가 안내하는 새로운 웹 레이아웃 시대를 설명하기 위해 'Intrinsic Web Design'이라는 용어를 만들었습니다.

CSS 그리드 사용 방법

그리드에는 그리드 컨테이너로 작동하기 위해 표시 속성 값이 그리드로 설정된 요소가 필요합니다. 그리드 컨테이너의 직계 자식은 그리드에 배치 할 수있는 항목입니다. 우리는 속성을 사용합니다 그리드 템플릿 행그리드 템플릿 열 그리드의 트랙 (행과 열)을 정의하고 열 간격행 간격 거터 (트랙 사이의 간격)를 정의합니다.

.grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 200px); gap: 20px; }

우리는 반복() 롱 핸드의 대안으로 코드를 더 간결하게 유지하는 함수 (예 : grid-template-columns : 1fr 1fr 1fr 1fr ). 이 예에서는 또한 ...에 대한 행 간격열 간격 .

위의 코드는 각각 100px 높이의 4 개의 행 트랙과 fr 단위를 사용하여 사용 가능한 공간의 동일한 비율을 채우는 4 개의 열 트랙을 제공합니다.

이것이 그리드 트랙을 만드는 유일한 방법이 아니라는 점은 주목할 가치가 있습니다. 그리드 항목을 배치하여 암시 적 트랙을 만들 수도 있습니다. Grid를 사용하는 경우 Grid가 다른 조건에서 어떻게 작동하는지 더 깊이 이해하고 레이아웃을 훨씬 쉽게 코딩 할 수 있으므로 이에 대해 조금 읽어 보는 것이 좋습니다.

학위없이 아트 디렉터가되는 방법

각 트랙 사이에있는 숫자 라인 인 그리드 라인 번호를 참조하여 그리드에 항목을 배치 할 수 있습니다. 여기서는 그리드 컬럼그리드 행 ...에 대한 그리드 컬럼 시작 , 그리드 열 끝 , 그리드 행 시작그리드 행 끝 . 이것들은 우리 항목이 각 축에서 시작하고 끝나야하는 라인을 브라우저에 알려줍니다.

.item { grid-column: 1 / 4; grid-row: 2; }

그리드는 항목을 배치하는 다양한 방법을 제공합니다. 대신 그리드 선의 이름을 지정할 수 있습니다.

.grid { display: grid; grid-template-columns: [image-start] 1fr 1fr 1fr [image-start] 1fr; grid-template-rows: 200px [image-start] 200px 200px [image-end] 200px; gap: 20px; }

또는 그리드 템플릿 영역 속성을 사용하면 텍스트로 그리드 레이아웃을 '그릴'수 있습니다.

.grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 200px); gap: 20px; grid-template-areas: ‘. . . .’ ‘image image image .’ ‘image image image .’ ‘. . . .’; }

이러한 방법 중 하나를 사용하여 그리드 항목을 배치 할 때 해당 그리드 영역을 간단히 참조 할 수 있습니다.

.image { grid-area: image; }

이 기사는 원래 크리에이티브 웹 디자인 잡지에 게재되었습니다. 웹 디자이너 . 지금 290 호를 구매하세요.