동백 // 부트스트랩이란???

동백 // 부트스트랩이란???

2021. 11. 9. 17:14ㆍFrontEnd

[Bootstrap] 시작하기, CSS 기능: 그리드 시스템(Grid system)

* 이번에는 Bootstrap으로 반응형 웹을 만드는데 가장 중요한 기능 중 하나인 CSS 기능들에 대해서 살펴볼 것이다. CSS 기능은 말그대로 CSS를 토대로 제공이 되는 기능들로 특정 class 명을 부여함으로

unikys.tistory.com

무료 템플릿 자료 : https://tonhnegod.tistory.com/102

무료 반응형웹 템플릿 사이트 모음

이번 포스팅에서는 무료 반응형웹 템플릿 사이트들을 소개해 드리겠습니다. 직접 사이트들을 찾아보니, 트렌드에 심하게 뒤처지는 것들만 모아놓은 곳도 많이 있었고 광고성으로 무료처럼 해

tonhnegod.tistory.com

웹 디자인 참고 : https://www.cssdesignawards.com/

CSS Design Awards - Website Awards - Best Web Design Inspiration - CSS Awards

AWARDED 2021 NOV 9 Distillerie 3 Lacs is an artisanal micro-distillery in Quebec that produces bold, avant-garde spirits from regional ingredients. Francois Brill Design Director UI 9.5 UX 9 INN 9 9.17 ZHOU Wen Jun Founder & Creative Director UI 9 UX 9.2 I

www.cssdesignawards.com

. 부트스트랩이란?

부트스트랩은 웹 개발자가 디자이너나 퍼블리셔 없이, 혼자 굉장히 좋은 웹페이지를 만들게 도와주는 html, css, js 라이브러리입니다.

. 웹사이트는 빠르게 구축하는 것도 중요하지만, 안정적으로 구축하는게 매우 중요한데 부트스트랩은 빠르고 안정적으로 구축하게 도와줌.-여기서 안정적이라는 뜻은 여러 환경이나, 디바이스에서 동일한 가독성이나 호환성을 유지하는 것이다.

. 반응형웹은 크기가 다양한 디바이스 사이즈에 최적화된 UI를 제공하는 기술을 말함.-부트스트랩은 기본적으로 반응형 웹을 지원해줌. 또한 자주 사용하는 UI를 전부 컴포넌트화를 해서, 가져다가 사용 가능함.

부트스트랩 사이트 주소 : http://bootstrapk.com/

부트스트랩 · 세상에서 가장 인기있는 모바일 우선이며, 반응형인 프론트엔드 프레임워크.

프리프로세서 부트스트랩은 평범한 CSS 로 제공합니다만, 그것의 소스코드는 2개의 인기있는 CSS 프리프로세서인 Less 와 Sass 를 사용합니다. 신속하게 프리컴파일된 CSS 로 시작하거나 소스를 빌드

bootstrapk.com

부트스트랩 매뉴얼 : http://bootstrapk.com/css/

CSS · 부트스트랩

에 약간의 패딩과 수평 구분선이 있는 기본 스타일의 .table 클래스를 추가하세요. 그건 매우 불필요해 보이지만, 캘린더와 날짜선택기 같은 플러그인들을 위해 테이블이 널리 사용되는 것을 감

bootstrapk.com

. 아래 코드를 붙여 넣으면 html에 붙여 넣으면 된다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title>부트스트랩 101 템플릿</title>
    
    <link rel="stylesheet" href="css/bootstrap.min.css">
  </head>
  <body>
 
    <!-- jquery 파일-->
    <script src="js/jquery-3.6.0.min.js"></script>
    <!-- 모든 컴파일된 플러그인을 포함합니다 (아래), 원하지 않는다면 필요한 각각의 파일을 포함하세요 -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

. 콘테이너

부트스트랩은 사이트 콘텐츠를 감싸고 그리드 시스템을 만들 콘테이너 요소가 필요합니다. 당신은 당신의 프로젝트에 2가지 콘테이너 중 하나를 선택할 수 있습니다. 주목할 점은, padding 등의 문제로 어느 것도 중첩할 수는 없다는 것이다.

반응형 고정폭 콘테이너를 위해 .container 를 사용하세요.

<div class="container">
  ...
</div>

당신의 뷰포트 전체폭까지 늘어나는 최대폭 콘테이너를 위해 .container-fluid 을 사용하세요.

<div class="container-fluid">
  ...
</div>

. 부트스트랩은 반응형 웹을 지원하기위해 그리드 시스템을 이용하는데, 12 그리드 시스템을 제공함

. 12 그리드 시스템

http://bootstrapk.com/css/#grid

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=100282&logNo=221526314913

: Bootstrap의 그리드 시스템에서 사용하고 있는 칼럼의 클래스 종류는 기본적으로 4가지가 있으며, 각각의 종류 뒤에는 12칼럼 중 몇개의 칼럼을 사용할지 명시하여 사용하면 된다.

출처: https://unikys.tistory.com/371 [All-round programmer]

.col-xs-*	항상 가로로 배치
.col-sm-*	768px 이하에서 세로로 표시 시작
.col-md-*	992px 이하에서 세로로 표시 시작
.col-lg-*	1200px 이하에서 세로로 표시 시작

예시

    <div class="row">
        <div class="col-xs-6" style="background-color: red;">
            A
        </div>
        <div class="col-xs-2" style="background-color: rgb(255, 238, 0);">
            B
        </div>
        <div class="col-xs-4" style="background-color: rgb(0, 255, 0);">
            C
        </div> 
    </div>

2. 특정 사이즈에 맞게 화면을 바꾸는 방법 // 여러 클래스 종류를 입력해놓음.

    <div class="row">
        <div class="col-lg-3 col-md-4 col-sm-6" style="background-color: red;">
            A
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6" style="background-color: rgb(255, 238, 0);">
            B
        </div>
        <div class="col-lg-3 col-md-4 col-sm-12" style="background-color: rgb(0, 255, 0);">
            C
        </div> 
    </div>

웹 브라우저가 lg사이즈이면 3, 3, 3그리드를 나눠가집니다. // 12-9=3이므로 3 그리드가 남습니다.

웹 브라우저가 md사이즈이면 4, 4, 4그리드를 나눠가집니다.

웹 브라우저가 sm사이즈이면 6, 6, 12그리드를 나눠가집니다.

. 위와 같이 화면 크기에 따라 자동으로 달라지는 것이 반응형 웹이다.

. 매우 편함

소개

그리드 시스템은 당신의 콘텐츠를 보관할 행과 열 시리즈를 통해 페이지 레이아웃들 만드는데 사용되어집니다. 부트스트랩의 그리드 시스템이 어떻게 작동하는지 여기에 있습니다:

행은 반드시 적절한 정렬과 패딩을 위해서 .container (fixed-width) 나 .container-fluid (full-width) 안에 위치해야 합니다.
열들의 수평그룹을 만드는데 행을 이용하세요.
콘텐츠는 열안에 위치해야 합니다. 그리고 열들만이 행의 바로 아래에 올 수 있습니다.
.row 과 .col-xs-4 같은 사전정의된 그리드 클래스들은 간편하게 그리드 레이아웃 만드는 것을 가능하게 합니다. Less 믹스인은 좀 더 시멘틱한 레이아웃을 위해 사용되어질 수 있습니다.
열은 padding 으로 사이 간격을 만듭니다. 패딩은 행 내에서 첫열과 마지막열을 위해 .row 내에 음수 마진으로 offset 되어 있습니다.
음수 마진은 아래의 예제들이 내어쓰기가 되어 있는 이유입니다. 그것은 그리드 열 내의 콘텐츠는 비그리드 콘텐츠와 정렬되기 위함입니다.
그리드 열은 12개의 가능한 열들을 원하는 만큼 명시하는 것으로 만들어집니다. 예를 들면, 같은 크기의 3개 열은 .col-xs-4 를 3개 사용할 수 있습니다.
만약 한 행에 12열보다 더 많이 배치된다면, 남은 열들은, 하나의 유닛으로, 새로운 라인에 감싸집니다.
그리드 클래스는 분기점 크기보다 크거나 같은 너비의 화면을 가진 기기에 적용됩니다. 그리고 보다 작은 기기의 그리드 클래스가 오버라이드 됩니다. 그리하여, 예를 들어 요소에 .col-md-* 클래스를 적용하는 것은 중간 기기에 스타일이 효과가 있는 것뿐만 아니라 .col-lg-* 클래스가 없다면 큰 기기에도 효과가 있게 됩니다.

. 미디어 쿼리

우리는 우리의 그리드 시스템에서 주요 분기점을 만들기 위해 다음의 미디어 쿼리들을 사용합니다.

/* 매우 작은 기기들 (모바일폰, 768px 보다 작은) */
/* 부트스트랩에서 이것은 기본이므로 미디어쿼리가 없습니다. */

/* 작은 기기들 (태블릿, 768px 이상) */
@media (min-width: @screen-sm-min) { ... }

/* 중간 기기들 (데스크탑, 992px 이상) */
@media (min-width: @screen-md-min) { ... }

/* 큰 기기들 (큰 데스크탑, 1200px 이상) */
@media (min-width: @screen-lg-min) { ... }

우리는 가끔 기기들에 CSS 를 좁게 적용하기 위해 미디어쿼리에 max-width 를 포함하여 부연합니다.

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

. 컴포넌트( components )

http://bootstrapk.com/components/

콤포넌트 · 부트스트랩

Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

bootstrapk.com

'FrontEnd' 카테고리의 다른 글

웹 프론트엔드란? (0)	2022.01.03
동백 // 노마드 코더 바닐라JS: TO DO LIST (0)	2021.11.09
동백 // 노마드 코더 바닐라JS: Quotes (0)	2021.11.09
CSS 레이아웃 정리 display, position (0)	2021.11.08

태그

최근글

댓글

공지사항

아카이브

. 콘테이너

. 12 그리드 시스템

소개

. 미디어 쿼리

. 컴포넌트( components )

'FrontEnd' 카테고리의 다른 글

관련글

티스토리툴바