부트스트랩과 순수 CSS 그리드: 비교 가이드-CSS 튜토리얼-php.cn

Bootstrap vs. Pure CSS Grid: A Comparison Guide

안녕하세요 여러분, 제 블로그에 다시 오신 것을 환영합니다! ?

소개

부트스트랩이나 순수 CSS 그리드를 선택해야 하는 시기와 이유를 자세히 살펴보겠습니다. 이 기사에서는 웹 프로젝트에 대한 현명한 결정을 내리는 데 도움이 되는 미묘한 차이를 안내하고, 시각적 자료를 제공하고, 실용적인 예를 제공합니다.

이 기사에서 무엇을 배울 것인가?

부트스트랩 기본: 그리드 시스템, 사용자 정의 및 실제 사용법.
순수한 CSS 그리드: 작동 방식, 최신 기능 및 장점.
시각적 비교: 개념을 시각적으로 설명하는 레이아웃 예시
실제 애플리케이션: 사례 연구 및 시나리오
상호작용 요소: 실습을 위한 코드 예제
도구 및 리소스: 자세히 알아보고 지원을 받을 수 있는 곳

부트스트랩을 선택하는 이유는 무엇인가요? ?

속도: 바로 사용할 수 있는 클래스를 통해 반응형 레이아웃을 빠르게 구축할 수 있습니다.
일관성: 다양한 프로젝트에서 통일된 디자인을 유지합니다.
커뮤니티 및 생태계: 광범위한 문서, 튜토리얼 및 타사 확장 기능.

부트스트랩 그리드 시스템

Bootstrap의 그리드는 반응형 중단점이 있는 12열 레이아웃을 기반으로 합니다.

HTML

<div>



<p><strong>Visual:</strong><br>
</p>

<pre class="brush:php;toolbar:false">+---+---+
| 1     |
+---+
| 2 |
+---+

로그인 후 복사

맞춤화

TL-DR: 부트스트랩은 SCSS 변수를 통해 또는 bootstrap-customize 도구를 사용하여 사용자 정의할 수 있습니다. 기본 그리드를 변경하는 방법은 다음과 같습니다.

$grid-columns: 16;
$grid-gutter-width: 30px;

로그인 후 복사

맞춤화에 대해 이미 알고 있다면 다음 부분을 건너뛰고 실제 사용 사례: 전자상거래 템플릿으로 계속 진행하세요.

맞춤 설정 세부정보 :

Bootstrap은 웹사이트의 모양과 동작을 맞춤설정할 수 있는 다양한 방법을 제공합니다.

SCSS 변수

Bootstrap은 변수를 통해 광범위한 사용자 정의가 가능한 SCSS로 구축되었습니다.

색상: 기본 색 구성표, 버튼 및 배경색을 변경합니다.
타이포그래피: 글꼴 크기, 계열, 두께를 조정합니다.
간격: 기본 간격 척도 또는 그리드 여백 너비를 수정합니다.

예:

// _variables.scss

// Change primary color
$primary: #3498db;

// Adjust font size
$font-size-base: 1rem;

// Increase grid gutter width
$grid-gutter-width: 30px;

// Import Bootstrap
@import "bootstrap/scss/bootstrap";

로그인 후 복사

부트스트랩 사용자 정의 도구

SCSS가 익숙하지 않거나 빠른 맞춤화가 필요한 경우:

Bootstrap Customizer를 방문하여 변수를 조정하고, 포함하거나 제외할 구성 요소를 선택하고, Bootstrap의 사용자 정의 빌드를 다운로드할 수 있습니다.

효과적인 맞춤설정을 위한 팁

변수로 시작: 이제 막 시작했다면 프레임워크에 깊이 들어가지 않고도 변수를 변경하는 것이 가장 쉬운 사용자 정의 방법입니다.
빠른 프로토타입을 위한 Customizer 사용: SCSS 파일을 변경하지 않고 다양한 모양을 테스트하는 데 적합합니다.
사용자 정의 빌드 생성: 특정 요구 사항이 있는 프로젝트에서 작업하는 경우 Bootstrap의 사용자 정의 빌드를 생성하면 사용되지 않는 구성 요소를 제거하여 파일 크기를 줄일 수 있습니다.
Sass 부분 파일: Bootstrap은 각 구성 요소에 부분 파일을 사용합니다. 프로젝트에서 동일한 이름을 가진 부분을 직접 생성하여 이를 재정의할 수 있습니다.

이러한 추가 세부 정보를 제공함으로써 독자는 간단한 변수 변경부터 보다 개인화된 Bootstrap 버전 생성에 이르기까지 사용자 정의 프로세스를 더욱 명확하게 이해할 수 있습니다.

실제 사용 사례: 전자상거래 템플릿 ?

<div>



<p><strong>Visual:</strong><br>
</p>

<pre class="brush:php;toolbar:false">+---+---+
| 1     |
+---+
| 2 |
+---+

로그인 후 복사

전체 예제가 있는 여기 Codepen을 확인하세요.

HTML(위의 Codepen 예)은 Bootstrap 클래스를 사용하여 다음을 사용하여 레이아웃을 생성합니다.

고정된 상단 탐색 메뉴
주 콘텐츠 영역을 8열 제품 목록과 장바구니용 4열 사이드바로 분할하는 그리드 시스템입니다.
테두리, 패딩, 배경색과 같은 추가 스타일을 위한 사용자 정의 CSS를 사용하여 제품과 장바구니의 모양을 향상할 수 있습니다.

사용자 정의 스타일은 몇 가지 기본 스타일을 제공하지만 Bootstrap의 기본 스타일은 반응형 디자인 및 구성 요소 스타일 측면에서 대부분의 무거운 작업을 수행합니다. Bootstrap은 사용자 정의가 가능하도록 설계되었으므로 이러한 스타일을 쉽게 수정하거나 SCSS를 사용하여 변수를 변경하여 더욱 맞춤화된 모양을 만들 수 있습니다.

순수 CSS를 선택하는 이유는 무엇인가요? ?

제어: 프레임워크 제약 없이 완전한 디자인 자유를 누리세요.
성능: 파일 크기가 더 작고 외부 종속성이 없습니다.
최신 기능: 서브그리드 및 컨테이너 쿼리와 같은 최신 CSS 기능을 활용하세요.

CSS 그리드 설정: CSS 그리드를 사용하면 최소한의 마크업으로 복잡한 레이아웃이 가능합니다.

$grid-columns: 16;
$grid-gutter-width: 30px;

로그인 후 복사

시각적:

// _variables.scss

// Change primary color
$primary: #3498db;

// Adjust font size
$font-size-base: 1rem;

// Increase grid gutter width
$grid-gutter-width: 30px;

// Import Bootstrap
@import "bootstrap/scss/bootstrap";

로그인 후 복사

최신 CSS 기능

하위 그리드: TLDR 상위 그리드 내에 중첩된 그리드를 정렬하는 데 사용됩니다.
컨테이너 쿼리: TLDR 뷰포트가 아닌 자체 크기에 반응하는 구성 요소용.

서브그리드

벽에 걸린 액자처럼 상자 몇 개를 배치한 큰 격자판이 있다고 상상해 보세요. 이제 큰 상자 중 하나 안에 작은 상자를 넣되 이 작은 상자가 큰 격자선의 선과 완벽하게 정렬되도록 하려고 합니다.

서브그리드는 큰 벽의 그리드 패턴과 일치하는 큰 상자 안에 투명한 그리드 종이를 넣는 것과 같습니다. 이렇게 하면 작은 상자를 배치할 때 큰 상자뿐만 아니라 벽 전체에 맞춰 정렬할 수 있습니다.

예:

<div>



<p><strong>Visual:</strong><br>
</p>

<pre class="brush:php;toolbar:false">+---+---+
| 1     |
+---+
| 2 |
+---+

로그인 후 복사

비주얼 컨셉:

$grid-columns: 16;
$grid-gutter-width: 30px;

로그인 후 복사

컨테이너 쿼리

벽의 각 상자에 벽(뷰포트)의 크기뿐만 아니라 자체 크기에 따라 모양을 결정하는 기능을 제공하는 것과 같은 컨테이너 쿼리를 생각해 보세요.

보통 웹사이트를 반응형으로 만들 때 전체 화면 너비에 따라 변경되도록 지시합니다. 하지만 사이드바와 같은 페이지의 한 부분이 넓어지거나 좁아지면 어떻게 될까요? 컨테이너 쿼리를 사용하면 이 사이드바는 페이지의 나머지 부분에 영향을 주지 않고 자체 내용을 조정할 수 있습니다.

예:

// _variables.scss

// Change primary color
$primary: #3498db;

// Adjust font size
$font-size-base: 1rem;

// Increase grid gutter width
$grid-gutter-width: 30px;

// Import Bootstrap
@import "bootstrap/scss/bootstrap";

로그인 후 복사

비주얼 컨셉:

<div>



<p><strong>Visual:</strong><br>
</p>

<pre class="brush:php;toolbar:false">+--------+--------+
|Product |Cart    |
|List    |Sidebar |
+--------+--------+

로그인 후 복사

즉, 각 구성요소를 독립적으로 조정할 수 있어 디자인을 더욱 모듈화하고 유연하게 만들 수 있습니다.

사례 연구: 개인 블로그 ?

부트스트랩은 다음을 위해 선택될 수 있습니다.

빠른 설정 : 템플릿이나 스타터 키트를 사용하여 빠르게 실행하고 싶은 경우

순수한 CSS 그리드는 다음과 같은 경우에 바람직합니다.

커스텀 디자인 : 부트스트랩의 기본값에 맞지 않는 독특한 레이아웃을 원하는 경우.

Codepen의 예:

(아래 링크를 확인하시고 코드를 받으세요.)

Codepen 예제의 코드는 헤더, 탐색 모음, 기본 콘텐츠 영역, 최근 게시물의 사이드바 및 바닥글이 포함된 기본 블로그 레이아웃을 설정합니다. 레이아웃에 CSS Grid를 사용하고 응답성을 위한 미디어 쿼리를 포함합니다.

각 접근 방식을 선택하는 경우

Bootstrap : 사이트의 다양한 부분에서 디자인 일관성이 중요한 빠른 배포가 필요한 프로젝트 또는 Bootstrap에 익숙한 팀에서 작업할 때 적합합니다.
순수 CSS : 디자인을 완전히 제어하고 싶거나 종속성을 줄이고 싶거나 최신 CSS의 고급 기능을 활용할 준비가 된 경우 이 옵션을 선택하세요.

도구 및 리소스?

부트스트랩

부트스트랩 문서
부트스트랩 커스터마이저
부트스트랩 테마

순수한 CSS 그리드

CSS Grid용 MDN 웹 문서
CSS-Tricks의 CSS 그리드 가이드
예제별 그리드

결론

부트스트랩과 순수 CSS 그리드 중에서 선택하는 것은 어느 것이 더 나은지에 관한 것이 아니라 프로젝트의 요구 사항과 기술 수준에 맞는 것이 무엇인지에 관한 것입니다. Bootstrap은 초보자나 빠른 개발이 필요한 프로젝트에 적합한 구조화된 접근 방식을 제공합니다. Pure CSS Grid는 레이아웃을 정확하고 창의적으로 그리려는 사람들에게 캔버스를 제공합니다.

웹 개발 여정이 성장함에 따라 프로젝트 요구 사항에 따라 두 가지를 혼합하거나 한 가지에서 다른 것으로 전환하는 것이 최선의 선택이라는 것을 알게 될 것입니다.

계속 탐색하고, 배우고, 코딩하세요! ?

? 안녕하세요. 저는 커뮤니티 매니저개발자, 연설가, 콘텐츠 크리에이터

엘레프테리아입니다.

? 이 기사가 마음에 드셨다면 공유해 보세요.

? 모든 링크 | X | 링크드인

위 내용은 부트스트랩과 순수 CSS 그리드: 비교 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!