ENG
  • KOR
  • ENG
  • JPN

picocss

css-framework responsive layout

picocss는 의미론적 HTML을 위한 최소주의 CSS 프레임워크입니다. 복잡하지 않으면서도 세련된 스타일링을 제공하며, HTML 요소의 기본 의미를 존중하는 디자인 철학을 갖고 있습니다.

Latest Ver 2.1.0
Homepage
Github
0
14,745
📢 picocss는 태그의 의미를 존중하면서도, 깔끔하고 모던한 웹 사이트 디자인을 가능하게 하는 CSS 프레임워크입니다.

CDN 다운로드

License: MIT
전체 버전 보기
https://cdnjs.cloudflare.com/ajax/libs/picocss/2.1.0/pico.amber.css
https://cdnjs.cloudflare.com/ajax/libs/picocss/2.1.0/pico.amber.min.css
https://cdnjs.cloudflare.com/ajax/libs/picocss/2.1.0/pico.blue.css
https://cdnjs.cloudflare.com/ajax/libs/picocss/2.1.0/pico.blue.min.css
https://cdnjs.cloudflare.com/ajax/libs/picocss/2.1.0/pico.classless.amber.css
https://cdnjs.cloudflare.com/ajax/libs/picocss/2.1.0/pico.classless.amber.min.css
https://cdnjs.cloudflare.com/ajax/libs/picocss/2.1.0/pico.classless.blue.css
https://cdnjs.cloudflare.com/ajax/libs/picocss/2.1.0/pico.classless.blue.min.css
https://cdnjs.cloudflare.com/ajax/libs/picocss/2.1.0/pico.classless.conditional.amber.css
https://cdnjs.cloudflare.com/ajax/libs/picocss/2.1.0/pico.classless.conditional.amber.min.css

Sample Code

⚠️ import 문을 포함한 일부 코드는 jsFiddle에서 정상 실행되지 않을 수 있습니다. 실행 오류가 발생할 경우 코드 복사 후 직접 실행해보세요. 
⚙️ JavaScript
{ "html": "<button class='primary'>Click me!</button>", "css": "@import url('https://cdn.jsdelivr.net/npm/picocss@1.0.0/css/pico.min.css');" }

Related Libraries

Library Icon
bootstrap

Bootstrap은 HTML, CSS, JS 구성 요소를 사용하여 웹사이트 및 웹 애플리케이션의 개발을 쉽게 할 수 있는 오픈 소스 툴킷입니다.

⚡ Top Tools for Developers
Text Compare

텍스트 비교

두 텍스트의 차이점을 한눈에 확인하세요.

Favicon Generator

Favicon 생성기

파비콘을 쉽고 빠르게 생성하세요.

Lorem Ipsum Generator

Lorem Ipsum 생성기

디자인을 위한 더미 텍스트를 생성하세요.

Character Counter

글자수 세기

글자 수와 단어 수를 실시간으로 확인하세요.

SRT ↔ SMI

SRT ↔ SMI 변환기

자막 형식을 간편하게 변환합니다.

Text Extract(OCR)

이미지 텍스트 추출

이미지 속 텍스트 자동 추출