Pico CSS 사용을 위한 초보자 가이드
CSS는 웹 스타일링에 매우 강력한 도구이지만, 때로는 다루기 어려울 수 있습니다. 이러한 이유로 Tailwind CSS와 같은 CSS 프레임워크나 Less, Sass와 같은 전처리기가 필요합니다.
오늘의 MUO 비디오
계속 읽으려면 스크롤하세요.
그러나 때로는 이러한 프레임워크나 CSS "변형"이 현재 진행 중인 프로젝트에 과하게 느껴질 수 있습니다. 웹사이트 스타일링에 필수적인 기능만을 제공하는 프레임워크가 필요한 경우가 있습니다. 여기서 Pico CSS가 그 해답입니다. Pico는 기본적인 HTML 요소에 쉽게 스타일을 적용할 수 있는 미니멀한 CSS 프레임워크입니다.
프로젝트에 Pico CSS 적용하기
Pico CSS를 프로젝트에 적용하는 가장 일반적인 방법은 CDN(콘텐츠 전송 네트워크)을 이용하는 것입니다. Pico CSS는 jsDelivr CDN에서 제공되므로, 해당 CDN에 호스팅된 pico.min.css 파일을 링크하면 됩니다.
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css"
/>
또는, npm과 같은 노드 패키지 관리자를 사용하여 Pico CSS를 설치할 수도 있습니다. 이 방법을 사용하려면 컴퓨터에 Node.js가 설치되어 있어야 합니다. 다음 명령어를 통해 Node.js 설치 여부를 확인할 수 있습니다.
node -v
Node.js가 설치되어 있다면 터미널에 해당 버전이 표시됩니다. 설치되어 있지 않다면 Node.js 설치 방법을 확인하고 설치하세요. Pico CSS를 설치하려면 다음 명령어를 실행합니다.
npm install @picocss/pico
Pico CSS로 웹사이트 만들기
웹사이트 레이아웃을 설정할 때 Pico CSS는 'container'와 'grid'라는 두 가지 클래스를 제공합니다. 새 폴더를 만들고, 그 안에 index.htm 파일과 style.css 파일을 생성합니다. index.htm 파일에 다음 기본 코드를 추가합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css"
/>
<link rel="stylesheet" href="https://wilku.top/a-beginners-guide-to-using-pico-css/style.css" />
<title>Pico Website</title>
</head>
<body>
<div class="container">
<h1>Articles Worth Reading...</h1>
</div>
</body>
</html>
Pico CSS 그리드 시스템
Pico CSS의 그리드 시스템은 매우 기본적인 형태를 가지고 있습니다. 'grid' 클래스를 사용하여 그리드를 정의할 수 있습니다. Pico CSS에서 그리드 열은 화면 폭이 992px 미만인 기기에서는 자동으로 축소됩니다.
index.htm 파일의 body 태그 내, h1 태그 바로 아래에 4개의 열을 가진 그리드를 만들어 보겠습니다.
<div class="grid">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
그리드 내 각 div에는 'container'와 'card' 클래스가 있어야 합니다. 'container' 클래스는 중앙 뷰포트를 활성화하는 기본 Pico CSS 클래스입니다. 이제 샘플 콘텐츠로 그리드를 채워 보겠습니다.
<div class="grid">
<div class="container card">
<img
src="https://images.pexels.com/photos/70069/pexels-photo-70069.jpeg"
/>
<h4 class="title">Why do birds sing in the morning?</h4>
<div class="metadata">
<span>David Uzondu</span>
<span>13 Minutes ago</span>
</div>
</div>
<div class="container card">
<img
src="https://images.pexels.com/photos/1024510/pexels-photo-1024510.jpeg"
/>
<h4 class="title">The Secret Life of Ducklings</h4>
<div class="metadata">
<span>Sam Holland</span>
<span>53 Minutes ago</span>
</div>
</div>
<div class="container card">
<img
src="https://images.pexels.com/photos/2152/sky-earth-space-working.jpg"
/>
<h4 class="title">NASA's New Mission: Sending Flat-Earthers to
Edge of Earth to Prove Them Wrong</h4>
<div class="metadata">
<span>Simon Peterson</span>
<span>1 hour ago</span>
</div>
</div>
<div class="container card">
<img
src="https://images.pexels.com/photos/12086689/pexels-photo-12086689.jpeg"
/>
<h4 class="title">Local Grandma Wins International Hip-Hop Dance Battle,
Proves Age is Just a Number</h4>
<div class="metadata">
<span>Anonymous</span>
<span>2 days ago</span>
</div>
</div>
</div>
스타일 설정을 위해 style.css 파일을 열고 다음 내용을 추가합니다.
img {
width: 100%;
background-size: cover;
border-radius: 10px;
height: 200px;
}
.card {
background-color: rgb(244, 244, 244);
border-radius: 10px;
padding: 10px;
cursor: pointer;
margin-top: 10px;
}
.card:hover {
transform: scale(1.03);
}
.metadata {
margin-top: -30px;
margin-bottom: 10px;
}
.title {
margin-top: 10px;
font-size: 15px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.metadata {
font-size: 14px;
}
span:nth-child(1)::after {
content: " -";
}
브라우저에서 페이지를 열면 다음과 같은 화면이 나타납니다.
Pico CSS에서 버튼 사용하기
Pico CSS는 다양한 HTML 요소와 구성 요소에 미리 정의된 스타일을 제공합니다. 웹사이트에서 가장 흔하게 사용되는 요소 중 하나가 바로 버튼입니다.
기존 방식에서는 브라우저마다 버튼을 조금씩 다르게 렌더링했습니다. 하지만 Pico CSS의 버튼 요소는 모든 브라우저에서 일관된 스타일로 버튼을 생성합니다. 버튼을 사용하려면 일반적인 방식으로 button 요소를 추가하면 됩니다.
<button>This is a button</button>
기본적으로 Pico CSS에서 버튼은 컨테이너의 전체 너비를 차지합니다. 이 동작을 원하지 않는다면, 인라인 HTML 요소의 role 속성을 "button"으로 설정해야 합니다.
<a href="https.//www.google.com" role="button">Go To Google</a>
Pico CSS에서 로딩 유틸리티 사용하기
Pico CSS에서 요소의 aria-busy 속성을 "true"로 설정하면 해당 요소에 자동으로 로딩 표시기가 추가됩니다. 일부 요소가 아직 사용 준비가 되지 않았거나 브라우저가 리소스를 로딩 중임을 사용자에게 알리고 싶을 때 이 기능을 활용할 수 있습니다.
<a href="#" aria-busy="true">Generating One-Time Password, please wait…</a>
위 코드의 결과는 다음과 같습니다.
툴팁은 구현하기 까다로울 수 있지만 Pico CSS는 이 문제를 해결합니다. 멋진 자바스크립트 코드 없이도 모든 요소에 쉽게 툴팁을 만들 수 있습니다. Pico CSS에서 툴팁을 만들 때 두 가지 속성을 사용해야 합니다.
- data-tooltip: 툴팁의 내용을 정의합니다.
- data-placement: 툴팁의 위치를 설정합니다. 이 속성은 "top", "right", "bottom", "left"의 네 가지 값 중 하나를 가질 수 있습니다.
다음 코드는 이 유틸리티의 사용법을 보여줍니다.
<button data-tooltip="Top" data-placement="top">Top</button> <button data-tooltip="Right" data-placement="right">Right</button> <button data-tooltip="Bottom" data-placement="bottom">Bottom</button> <button data-tooltip="Left" data-placement="left">Left</button>
브라우저에서 코드를 실행하면 다음과 같이 표시됩니다.
Pico CSS의 아코디언
아코디언은 콘텐츠 섹션을 확장하거나 축소하여 해당 섹션의 가시성을 변경할 수 있도록 해줍니다. 이는 마치 아코디언 악기가 펼쳐지고 접히는 모습과 유사합니다. Pico CSS에서 이 기능을 구현하려면 'details' 요소를 사용합니다.
<details>
<summary>This is an accordion</summary>
<p>
Taciti ac condimentum dapibus luctus volutpat ligula nec et mattis
arcu ridiculus? Non posuere bibendum libero diam tempus nec odio non
mauris elit! Euismod suspendisse pellentesque donec vestibulum dapibus
iaculis. Cursus mollis quis praesent purus pulvinar pellentesque
vulputate integer elit sodales? Egetnunc pellentesque eu eget
consequat condimentum praesent nec auctor sapien luctus at, donec ac
ex sit magna amet in.
</p>
</details>
브라우저가 이 마크업을 표시할 때 콘텐츠를 숨기거나 표시할 수 있는 수단(이 경우에는 드롭다운 화살표)을 제공해야 합니다.
CSS 프레임워크를 사용해야 할 때
CSS 프레임워크는 웹 애플리케이션을 만들고 스타일을 설정하는 과정을 단순화하는 데 도움을 줄 수 있습니다. 반복되는 작업을 줄이고 미리 만들어진 컴포넌트를 활용하고 싶다면 CSS 프레임워크를 사용하는 것이 좋습니다.
프레임워크는 미리 디자인된 CSS 스타일, 레이아웃 그리드, 그리고 컴포넌트 세트를 제공하기 때문에 애플리케이션의 로직과 기능에 더욱 집중할 수 있습니다. 또한, 대부분의 CSS 프레임워크는 막혔을 때 도움을 받을 수 있는 상세한 문서와 커뮤니티 지원을 제공합니다.