본문 바로가기
css

상위 5개의 CSS 프레임워크

by code-box 2022. 2. 5.
반응형

CSS 프레임워크란?

CSS 프레임워크는 수많은 미리 정의된 스타일을 포함하고 있는 코드 라이브러리이므로 처음부터 모든 스타일을 작성할 필요가 없습니다.

CSS 프레임워크를 사용해야 하나요?

뭐, 나름이지. 프레임워크를 사용한다고 해서 개발력이 떨어지는 것은 아닙니다.
다음과 같은 이유로 사용할 수 있습니다.

 
  • 빨리 필요한 게 있어요. CSS를 쓰는 것은 많은 시간이 걸릴 수 있다. 프레임워크가 있으면 웹사이트를 매우 빠르게 만들 수 있습니다.
  • 아마도 당신은 CSS를 쓰는 것을 좋아하지 않을 것입니다.
  • 넌 디자인엔 서툴잖아

이용할 수 있는 엄청난 양의 CSS 프레임워크가 있다. 여기 맨 위에 있는 것들이 있습니다. 그렇다고 다른 것들이 나쁘다는 뜻은 아니야. 다른 프레임워크도 얼마든지 시도해 보세요.
또한, 저는 여기서 순위를 매기는 것이 아닙니다. 모든 일에는 장단점이 있습니다.

순풍

사용자의 마크업에서 직접 설계를 구성하도록 구성할 수 있는 클래스로 구성된 유틸리티 우선 CSS 프레임워크입니다.
Tailwind CSS는 모든 HTML 파일, 자바스크립트 구성 요소 및 클래스 이름에 대한 다른 템플릿을 검사하여 해당 스타일을 생성한 다음 정적 CSS 파일에 기록함으로써 작동합니다.

Image description

 

런타임 없이 빠르고 유연하며 안정적입니다.

CDN

<head>
      <script src="https://cdn.tailwindcss.com"></script>
</head>

샘플코드

<div
    class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4"
>
          <div class="shrink-0">
                    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo" />
                          </div>
    <div>
                              <div class="text-xl font-medium text-black">ChitChat</div>
        <p class="text-slate-500">You have a new message!</p>
    </div>
</div>
 

Image description

부트스트랩

Image description

부트스트랩을 사용하여 빠르고 응답성이 뛰어난 사이트를 구축합니다.

Sass 변수와 믹스인, 응답성이 뛰어난 그리드 시스템, 사전 구축된 광범위한 구성요소 및 강력한 JavaScript 플러그인을 특징으로 하는 세계에서 가장 인기 있는 프런트 엔드 오픈 소스 툴킷인 Bootstrap을 통해 응답성이 뛰어난 모바일 우선 사이트를 신속하게 설계하고 사용자 정의할 수 있습니다.

 

CDN

<head>
      <!-- CSS only -->
      <link
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
        rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
        crossorigin="anonymous"
    />
          </head>

<!-- JavaScript Bundle with Popper -->
<body>
              <script
        src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
        crossorigin="anonymous"
    ></script>
</body>

샘플 코드

<div class="mb-3">
      <label for="exampleFormControlInput1" class="form-label"
        >Email address</label
    >
              <input
        type="email"
        class="form-control"
        id="exampleFormControlInput1"
        placeholder="name@example.com"
    />
          </div>
<div class="mb-3">
      <label for="exampleFormControlTextarea1" class="form-label"
        >Example textarea</label
    >
              <textarea
        class="form-control"
        id="exampleFormControlTextarea1"
        rows="3"
    ></textarea>
</div>

Image description

 

의미 UI

Image description

시맨틱은 인간 친화적인 HTML을 사용하여 아름답고 반응성이 뛰어난 레이아웃을 만드는 데 도움이 되는 개발 프레임워크입니다.

  • 간결한 HTML: 시맨틱 UI는 단어와 클래스를 교환 가능한 개념으로 취급합니다. 클래스는 명사/수식어 관계, 어순, 복수성과 같은 자연어 문법을 사용하여 개념을 직관적으로 연결합니다.
  • 직관적인 Javascript: 시맨틱은 기능을 트리거하는 동작이라고 불리는 간단한 구절을 사용합니다. 구성 요소의 임의 결정은 개발자가 수정할 수 있는 설정으로 포함됩니다. -간단한 디버깅: 성능 로깅을 통해 스택 추적을 파헤치지 않고 병목 현상을 추적할 수 있습니다.

샘플코드

 
<div class="ui labeled button" tabindex="0">
      <div class="ui red button"><i class="heart icon"></i> Like</div>
            <a class="ui basic red left pointing label"> 1,048 </a>
</div>
<div class="ui labeled button" tabindex="0">
      <div class="ui basic blue button"><i class="fork icon"></i> Forks</div>
            <a class="ui basic left pointing blue label"> 1,048 </a>
</div>

Image description

불마

Image description

Bulma: 현대 CSS 프레임워크는 단지 작동한다.

 

Bulma는 즉시 사용할 수 있는 프런트엔드 구성요소를 제공하는 무료 오픈 소스 프레임워크로, 쉽게 결합하여 반응성이 뛰어난 웹 인터페이스를 구축할 수 있습니다.

CDN

<link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"
/>
      ```

      ### 샘플코드

      ```js
      <div class="buttons">
          <button class="button is-primary">Primary</button>
              <button class="button is-link">Link</button>
              </div>

              <div class="buttons">
                  <button class="button is-info">Info</button>
                      <button class="button is-success">Success</button>
                          <button class="button is-warning">Warning</button>
                              <button class="button is-danger">Danger</button>
                              </div>
                              ```

                              <div class="content-ad"></div>

                              ![Image description](https://res.cloudinary.com/practicaldev/image/fetch/s--C3gT-yDs--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tpatjffh4jy7kpu5ujid.png)

                              ## 구체화

                              ![Image description](https://res.cloudinary.com/practicaldev/image/fetch/s--v8ZRUpre--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pwcw0d7r1bukosnth25d.jpg)

                              재료 설계를 기반으로 하는 현대적인 대응형 프런트 엔드 프레임워크

                              ### CDN

                              <div class="content-ad"></div>

                              ```js
                              <!-- Compiled and minified CSS -->
                              <link
                                  rel="stylesheet"
                                      href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
                                      />

                                      <!-- Compiled and minified JavaScript -->
                                      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
                                      ```

                                      ### 샘플코드

                                      ```js
                                      <!-- Switch -->
                                      <div class="switch">
                                          <label>
                                                  Off
                                                          <input type="checkbox" />
                                                                  <span class="lever"></span>
                                                                          On
                                                                              </label>
                                                                              </div>

                                                                              <!-- Disabled Switch -->
                                                                              <div class="switch">
                                                                                  <label>
                                                                                          Off
                                                                                                  <input disabled type="checkbox" />
                                                                                                          <span class="lever"></span>
                                                                                                                  On
                                                                                                                      </label>
                                                                                                                      </div>
                                                                                                                      ```

                                                                                                                      ![Image description](https://res.cloudinary.com/practicaldev/image/fetch/s--0-dKiOrx--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k4sbrxhq0ezr6qku8acw.png)

                                                                                                                      오늘은 여기까지!

                                                                                                                      <div class="content-ad"></div>
저작자표시

'css' 카테고리의 다른 글

Pure CSS에서 단일 Div를 사용한 Google 로고  (0) 2022.02.05
순수 CSS에서 2Div만 사용한 React 로고  (0) 2022.02.05
SASS를 사용하여 간격 클래스와 같은 부트스트랩 생성  (0) 2022.02.05
2022년에 알아야 할 5가지 CSS 방법론  (0) 2022.02.05
내 첫 번째 설문 조사 양식  (0) 2022.02.05

관련글

댓글

티스토리툴바