PicoCSS: HTML 기반 경량 CSS 프레임워크 (with Semantic Tag)

소개

PicoCSS는 경량이고 미니멀한 CSS 프레임워크입니다.

PicoCSS는 작고 빠르며, 웹 사이트나 애플리케이션에 필요한 기본적인 스타일링을 제공합니다. 이 프레임워크는 간결한 디자인과 사용자 정의가 용이하다는 특징을 갖고 있습니다. 따로 커스텀 스타일을 많이 하지 않고 빠르고 깔끔하게 프로토타입을 만들고 싶을때 사용하면 굉장히 유용한 프레임워크입니다. 그렇다고 아예 커스텀이 불가능 한 것도 아니라, class를 사용해서 스타일 커스텀이 얼마든지 가능합니다.

공식 홈페이지에서 소개하는 PicoCSS는 다음과 같은 4가지 특징이 있습니다.

적은 클래스와 시멘틱 태그
가능한 한 시멘틱 HTML 태그를 사용합니다. Pico에서는 10개 미만의 클래스만 사용됩니다.

CSS로만 훌륭한 스타일 제공
의존성, 패키지 관리자, 외부 파일 또는 JavaScript가 없습니다.

반응형 디자인
모든 기기에서 아름답고 일관된 반응형 레이아웃과 타이포그래피를 제공합니다.

라이트 또는 다크 모드
두 가지 아름다운 색상 테마가 제공되며, 사용자 환경설정에 따라 자동으로 활성화됩니다.

한 마디로 PicoCSS는 다음과 같이 한 문장으로 정리 가능합니다.

가볍고 깔끔한 HTML 기반 CSS Framework PicoCSS

공식 사이트: https://picocss.com/

Pico.css • Minimal CSS Framework for semantic HTML

Elegant styles for all native HTML elements without .classes and dark mode automatically enabled. 7.9 kB minified and gzipped!

picocss.com

활용 예시

1. 설치

공식 사이트에서는 static file, cdn, npm, composer 총 4가지의 설치 방식을 제공합니다.

본 글에서는 CDN 사용 예시로 보겠습니다.

아래 코드를 head태그 사이에 넣어주기만 하면 PicoCSS를 사용할 준비가 끝납니다.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">

2. 코드

아래 예시와 같이 시멘틱(semantic)한 HTML 태그를 사용해서 마크업을 작성 해주시면 PicoCSS 스타일이 적용됩니다!

<button>Button</button>
<input type="submit">

button, input 이외에도 form, label, a태그 등 다양한 HTML 태그를 단독으로 사용 가능하며, Accordions, Cards, Dropdowns, Modal, Navs, Progress와 같은 컴포넌트들을 HTML 태그 조합으로 제공하기도 합니다.

자세한 내용은 공식 사이트 참고 바랍니다.

구현 결과 미리보기

<form>

  <!-- Grid -->
  <div class="grid">

    <!-- Markup example 1: input is inside label -->
    <label for="firstname">
      First name
      <input type="text" id="firstname" name="firstname" placeholder="First name" required>
    </label>

    <label for="lastname">
      Last name
      <input type="text" id="lastname" name="lastname" placeholder="Last name" required>
    </label>

  </div>

  <!-- Markup example 2: input is after label -->
  <label for="email">Email address</label>
  <input type="email" id="email" name="email" placeholder="Email address" required>
  <small>We'll never share your email with anyone else.</small>

  <!-- Button -->
  <button type="submit">Submit</button>

</form>