기초가있는 카드 기반 UI를 구축하십시오

Sep 13, 2025

어떻게

카드 기반 웹 사이트 레이아웃 웹을 밟았습니다. Pinterest, Twitter, Facebook 및 Google로 인기로 한 카드는 다양한 사용 사례에 대해 디자인 패턴이되어 있습니다.

왜 보는 것이 어렵지 않습니다. 카드는 완벽하게 작동합니다 반응 형 웹 디자인 ...에 독립적 인 단위로서 다른 콘텐츠 유형과 섞어서 혼합 할 수 있습니다. 또한 모바일 장치의 단일 열에서 대형 디바이스의 멀티 컬럼으로 다른 화면 크기로 쉽게 반응합니다.

완벽한 웹 사이트 레이아웃을 단계별로합니다

Zurb Team은 수년간의 설계 작업에서 카드 기반 레이아웃을 사용했습니다. FrontEnd Framework, Foundation은 다양한 모듈 식 및 유연한 구성 요소를 포함하여 응답하는 웹 사이트를 신속하게 설계하고 빌드하는 데 필요한 도구로 항상 웹 디자이너를 착용해야합니다. 버전 6.3이 빌딩 블록 컬렉션에 추가 된 새로운 Off-Canvas 구현, 응답 성 아코드 / 탭 및 강력한 새 카드 구성 요소를 제공합니다.

이 튜토리얼에서는 재단의 Flexbox 기반 그리드를 활용하여 모든 가능성을 개설하는 반응식 카드 기반 UI를 만드는 방법을 배우고 있습니다.

01. 개발 환경을 설정하십시오

첫 번째 단계는 개발 환경을 설정하는 것입니다. 이 자습서의 경우 노드 기반 개발 환경을 사용하므로 Node.js를 설치해야합니다. 이렇게하기위한 세부 사항은 환경에 따라 다르므로 확인하십시오. 여기 무엇을 해야할지 알아보십시오.

노드가 설치되면 Foundation CLI를 사용하여 설치하십시오. NPM 설치 -g Foundation-CLI 새로운 기초 프로젝트를 쉽게 설정할 수 있습니다.

02. 새 프로젝트를 시작하십시오

Zurb 템플릿을 기반으로 새 프로젝트를 만드겠습니다. 명령을 실행하십시오 Foundation New Net-Magazine-Tutorial. , '웹 사이트 (사이트 재단)', 'Net-Magazine-Tutorial'및 Zurb 템플릿을 선택하십시오. 이렇게하면 시스템 및 개발 서버 빌드가 완료된 Foundation을 기반으로 프로젝트 템플릿을 설정합니다.

템플릿은 샘플 페이지와 함께 제공됩니다 src / pages / index.html ...에 단순화를 위해 샘플을 제거하고 비어있는 상태로 바꿉니다. & lt; 헤더 & gt; & lt; / header & gt; 카드 기반 UI를 건설하는 스크래치에서 시작하십시오. 운영 npm 시작 명령 줄에서 Development Server를 실행하고 카드에 사용할 수있는 Bare HTML 페이지가 표시되어야합니다.

03. 카드를 만듭니다

이제 첫 번째 카드를 만들 때입니다. 지금은 클래스가있는 섹션 안에 똑바로 넣어 봅시다. . 카드 - 컨테이너 ...에 Foundation을 사용하여 카드를 만들 때 다음 세 가지 핵심 클래스가 있습니다. .카드 , .card - 섹션 과 .card-diver. ...에 고급 사용자를 위해 각각의 각각은 SCSS MixIn에 해당합니다 ( 카드 - 컨테이너 , 카드 섹션 과 카드 분배기 짐마자

A simple card with the Foundation Yeti on it, header and footer created using the card-divider class — Card-divider 클래스를 사용하여 생성 된 헤더 및 바닥 글에 대한 재단이 아닙니다.

그러나이 튜토리얼에서는 단순성을 위해 기본 클래스를 사용할 것입니다. 그만큼 .카드 클래스는 컨테이너입니다. 모든 카드는 A에서 살 것입니다 .카드 ...에 이것은 테두리, 그림자 및 기본 색상과 같은 것들을 정의합니다.

그만큼 .card - 섹션 클래스는 내용을 넣을 수있는 확장 가능한 콘텐츠 블록을 정의합니다. .card-diver. 클래스는 바닥 글, 헤더 또는 분배기와 같은 비 확장 블록을 정의합니다. 우리의 첫 번째 카드를 만드는이 모든 수업을 모두 사용해 봅시다.

& lt; 헤더 & gt; & lt; div class = "행 열"& gt; & lt; h3 & gt; 카드는 최고 & lt; / h3 & gt; & lt; / div & gt; & lt; / header & gt; & lt; section class = "카드 - 컨테이너"& gt; & lt; div class = "카드"& gt; & lt; div class = "카드 분배기"& gt; & lt; h4 & gt; YOUTI 헤더 & lt; / h4 & gt; & lt; / div & gt; & lt; div class = "카드 섹션"& gt; & lt; img src = "https:///- assurb.com/sites/docs/assets/img/yeti.svg"& gt; & lt; / img & gt; & lt; / div & gt; & lt; div class = "카드 분배기"& gt; & lt; p & gt; yeti 바닥 글 & lt; / p & gt; & lt; / div & gt; & lt; / div & gt; & lt; & gt;

04. 구성 요소 스타일 추가

우리가 이렇게하면 우리 카드가 거대하고 전체 화면을 채우기 위해 확장됩니다. 우리는 곧 전체 크기를 다룰 것입니다. 그러나 지금은 Zururt 템플릿에 구성 요소 스타일을 추가하는 방법을 배우기위한 변명을위한 변명으로 사용합니다.

파일을 추가하십시오 _card.scss. ...에 src / 자산 / scss / 구성 요소 / A를 지정합니다 최대 너비 : 300px. ...에 대한 .카드 추가하여 메인 CSS에 파일을 포함시킵니다. @import 구성 요소 / 카드; ...에 src / 자산 / scss / app.scss. ...에

05. 카드를 재사용 할 수있게하십시오

여러 장의 카드가있는 반복 가능한 레이아웃을 만들려면 카드를 다시 연결할 수있는 재사용 가능한 구성 요소가되기를 원합니다. 이 자습서에 대해 사용하고있는 Zururt 템플릿은 부분적으로 부분적으로 만들거나 코드의 재사용 가능한 블록을 포함하는 핸들라는 핸들라는 템플릿 언어를 사용합니다.

카드 구현을 부분적으로 옮기고 단순히 잘라내어 붙여 넣으려면 .카드 우리가 파일에 내장 된 구성 요소 src / partials , 말하기 src / partials / basic-card.html. ...에 그런 다음 라인을 추가하여 해당 콘텐츠를 포함시킬 수 있습니다. {{& gt; 기본 카드}} 색인 파일에서.

06. 레이아웃 작성을 시작하십시오

우리는 약간의 다른 카드 유형을 다룰 것입니다. 그러나 먼저 재사용 가능한 기본 카드를 사용하여 카드에 더 크고 반응 형 레이아웃을 만들기 시작합니다. 이렇게하려면 Block Grid라는 Foundation의 개념을 사용할 것입니다.

재단에는 몇 가지 유형의 그리드가 포함되어 있지만 모든 행은 행과 열의 개념에서 시작됩니다. 행은 여러 수직 열을 포함 할 수있는 수평 블록을 만듭니다. 이 기본적인 빌딩 블록은 거의 모든 레이아웃의 핵심을 구성합니다.

With a simple block grid, we already have a beautiful, scalable layout for as many cards as we want to include — 간단한 블록 그리드로, 우리는 이미 포함하고자하는 많은 카드를위한 아름답고 확장 가능한 레이아웃을 가지고 있습니다.

블록 그리드는 똑같이 크기의 열을 만들고 유연성과 자유가 무기한 콘텐츠를 추가하고 동일한 열에 멋지게 배치 할 수있는 단축 방식입니다. 귀하는 연속에 클래스를 추가 한 다음 원하는만큼의 열 구성 요소를 추가하기 만하면됩니다. 기초는 당신을 깔끔하게 그리고 깨끗하게하기 위해 그들을 낳을 것입니다.

우리가 매우 크고 변화하는 카드 수를 기대하기 때문에 우리의 목적에 이상적입니다. 4 열 그리드 에서이 작업을 빠르게 설정하고 수십 개의 카드를 추가합시다. 이제는 큰 화면에 대해서만 걱정할 것입니다. .large-up-4. 행의 클래스.

& lt; 섹션 클래스 = "카드 - 컨테이너"& gt; & lt; div class = "행 큰 -4"& gt; {{#repeat 24}} & lt; div class = "column"& gt; {{& gt; 기본 카드}} & lt; / div & gt; {{/반복}} & lt; / div & gt; & lt; & gt;

07. 반응하도록하십시오

그런 다음 다른 화면 크기로 우리가 일어날 것을 고려해 봅시다. 재단에는 작고 중단 점이 작아 지므로 각 중단 점에 대해 서로 다른 블록 그리드 클래스를 적용하여 주위를 이동할 수 있습니다.

수업을 추가하여 모바일 스크린에 하나의 카드를 모바일 화면에두고 태블릿에 행 당 3 개를 넣으십시오. .mall-up-1. 과 .medium-up-3. 행에. 우리 가이 작업을 수행하고 중소기업을 제거하십시오 최대 너비 우리가 끼는 재산 _card.scss. ...에 우리는 이미 모든 화면 크기에서 잘 보이는 아름답게 반응 형 레이아웃을 가지고 있습니다.

08. 새 카드 유형을 시도하십시오

Combine different styles of card to build your layout — 다른 스타일의 카드를 결합하여 레이아웃을 짓습니다

이제 우리의 카드 세트를 다양 화합시다 다른 유형은 순수한 가장자리 - 가장자리 사진입니다. 카드 섹션 및 카드 분배기에는 기본적으로 패딩이 포함되어 있지만 가장자리 - 가장자리 콘텐츠가 있으므로 이미지를 카드 안에 직접 놓을 수 있습니다. 이것을 A로 추가합시다 photo-card.html. 부분의 src / partials ...에

& lt; div class = "카드"& gt; & lt; img src = "http://foundation.zurb.com/assets/img/foundation-emails/inky-all-devices.svg"/ gt; & lt; / div & gt;

09. FlexBox를 소개합니다

우리가 카드를 함께 사용할 수있는 가능한 한 가지 방법이 있습니다. 영감을 얻으려면 재단을 확인할 수 있습니다. Cardpack 저장소 ...에 그러나 다른 크기의 카드를 가지고있을 때 레이아웃을 어떻게 관리하는지에 계속 나아 갑시겠습니다. 우리가 이전에 한 것처럼 사진 카드 부분을 레이아웃에 번갈아 가면서 레이아웃에 삽입하면, 우리의 높이는 다르기 때문에 우리는 조금 넘는 경험으로 끝납니다. 이것은 괜찮을 수도 있고, 보상하기 위해 레이아웃을 조정할 수 있습니다.

The Foundation card pack gives you a great set of pre-built Flexbox cards to level up your card game — 기초 카드 팩은 카드 게임을 레벨 업 할 수있는 훌륭한 FlexBox 카드를 훌륭하게 세트합니다.

이 자습서에서는 우리가 좋아하는 새로운 CSS 레이아웃 기술 - FlexBox를 사용하여 보상 할 것입니다. 기초에는 그리드를위한 FlexBox 모드가 있습니다. 이를 활성화하려면 단순히 열어야합니다 src / 자산 / scss / app.scss. , 코멘트를 묻습니다 @include foundation-grid; 과 @include foundation-float-classes; 및 주석 처리 @include 재단 - 플렉스 그리드; 과 @include foundation-flex-classes; ...에

10. 카드를 같은 높이로 만드십시오

FlexBox 클래스가 사용 가능한 경우 카드가 동일한 높이가 될 수 있도록 간단합니다. 첫째, 우리는 우리의 열을 부모가 부모를 만들 수 있습니다. .flex-container. 수업. 이것은 그를 추가하기위한 프로토 타이핑 바로 가기입니다 디스플레이 : 플렉스; 그들에게 재산. 우리 가이 작업을 수행하면 모든 카드가 동일한 높이가 될 것이지만 Flex 자식 요소가 기본적으로 축소되므로 일부 카드는 일부 카드가 좁아집니다.

우리는이 요소들을 성장시키는 것을 단순히 말하면서이 문제를 해결할 수 있습니다. 이것은 CSS로 타겟팅하고이를주는 것으로 이루어집니다. 플렉스 - 자라는 : 1; 또는 프로토 타이핑하는 동안 단순화를 위해, 클래스를 추가하여 .flex-child-grow. ...에 이 모든 것이 완료되면 모든 카드가 모두 기둥을 채우고 동일한 높이가 같을 것입니다.

이 기사는 원래 추천되었습니다 그물 잡지 문제 293. 여기 그것을 구입하십시오 또는 여기 Net을 구독하십시오 ...에

이 마음에 들었어? 이것들을 시도해보십시오 ...

원자 설계를 사용해야하는 10 가지 이유
SVG 다각형을 만들고 애니메이션을 작성하십시오
CSS 트릭은 귀하의 레이아웃에 혁명을 일으 킵니다

기초가있는 카드 기반 UI를 구축하십시오

01. 개발 환경을 설정하십시오

02. 새 프로젝트를 시작하십시오

03. 카드를 만듭니다

04. 구성 요소 스타일 추가

05. 카드를 재사용 할 수있게하십시오

06. 레이아웃 작성을 시작하십시오

07. 반응하도록하십시오

08. 새 카드 유형을 시도하십시오

09. FlexBox를 소개합니다

10. 카드를 같은 높이로 만드십시오

어떻게 - 가장 인기있는 기사

당신의 삶의 도면에 에너지를 추가하는 방법

디자인 포트폴리오를 개선하는 방법

고양이를 그리는 방법

앱을 서비스 근로자로 오프라인으로 작업하십시오

수채화 물감에 장난스러운 토끼를 칠하십시오

유화에 필요한 5 가지

Keyshot로 용암 램프를 만드는 방법

Adobe InDesign을 사용하여 인쇄상의 포스터 만들기

카테고리