728x90
💡 picocss란?
HTML페이지에서 간단하게 스타일을 만들어주는 템플릿이다.
Pico.css • Minimal CSS Framework for semantic HTML
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
특징
Class-light and semantic
- 가능한 한 간단한 기본 HTML 태그를 사용합니다. 10개 미만의 .classes가 Pico에서 사용된다.
Great styles with just CSS
- 종속성, 패키지 관리자, 외부 파일 또는 JavaScript가 없다.
Responsive everything
- 모든 장치에서 우아하고 일관된 적응형 간격 및 타이포그래피.
Light or Dark mode
- 두 가지 색상 테마와 함께 제공되며 사용자 기본 설정에 따라 자동으로 활성화된다.
사용 방법
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">- 적용하고자 하는 모든 HTML페이지의 <head> 안에 삽입
- 디자인 커스텀 (사용자화)
Ex>
<body>
<main class="container"></main>
</body>
<div class="grid">
<div>1</div>
<div>2</div>
</div>
<table role="grid">
<tr>
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
</tr>
</table>
자동 레이아웃 열이 있는 최소 그리드 시스템을 활성화
728x90
'🐎Language > Html' 카테고리의 다른 글
| [Html] onclick 이벤트 처리 (0) | 2023.08.20 |
|---|