웹 프론트엔드 개발을 할 때, 가벼우면서도 모던하고 반응형 디자인을 쉽게 적용할 수 있는 CSS 프레임워크를 선택하는 것은 프로젝트의 완성도와 효율을 크게 좌우합니다. Bootstrap이나 Tailwind CSS 같은 유명 프레임워크가 먼저 떠오르겠지만, Pure.css는 잘 알려지지 않은 보석 같은 라이브러리입니다. Yahoo에서 개발한 Pure.css는 매우 가볍고 모듈화되어 있으며, 반응형 디자인에 최적화된 CSS 라이브러리입니다. 이번 글에서는 Pure.css의 기본 개념과 프로젝트에 통합하는 방법, 그리고 간단한 코드 예시를 통해 Pure.css를 어떻게 활용할 수 있는지 알아보겠습니다.
왜 Pure.css인가?
- 가벼움: gzipped 기준으로 몇 킬로바이트 정도의 작은 용량을 자랑해, 프로젝트 성능에 부담을 최소화합니다.
- 모듈화: 그리드, 폼, 버튼 등 필요한 부분만 골라서 사용할 수 있어, 불필요한 코드 양을 줄일 수 있습니다.
- 반응형: 처음부터 반응형 디자인을 염두에 두고 개발되어, 다양한 화면 크기에 맞춰 손쉽게 레이아웃을 구성할 수 있습니다.
- 미니멀 & 모던 디자인: 최소한의 기본 스타일만 제공하여, 프로젝트에 맞게 쉽게 커스터마이징하고 확장할 수 있습니다.
시작하기
1. Pure.css 추가하기
Pure.css는 CDN으로 손쉽게 사용할 수 있습니다. 아래와 같이 HTML <head> 태그 내부에 링크를 추가해보세요.
<!-- 전체 Pure.css 라이브러리를 포함 -->
<link
rel="stylesheet"
href="https://unpkg.com/purecss@2.0.6/build/pure-min.css"
/>
<!-- 반응형 그리드 모듈 (선택 사항) -->
<link
rel="stylesheet"
href="https://unpkg.com/purecss@2.0.6/build/grids-responsive-min.css"
/>또는 공식 웹사이트 혹은 GitHub 저장소에서 Pure.css 파일을 다운로드하여 프로젝트에 직접 포함할 수도 있습니다.
2. 기본 구조
Pure.css는 Bootstrap처럼 특정 HTML 구조를 강제하지 않습니다. 대신, 요소나 컴포넌트를 꾸밀 수 있는 유틸리티 클래스를 제공하여 필요한 만큼만 적용할 수 있습니다.
코드 예시
이제 몇 가지 예시를 통해 Pure.css를 실무에서 어떻게 적용할 수 있는지 살펴보겠습니다.
1. 네비게이션 바
아래 예시는 Pure.css의 메뉴 클래스를 이용해 간단한 네비게이션 바를 구성한 예시입니다.
<nav class="pure-menu pure-menu-horizontal">
<a href="#" class="pure-menu-heading pure-menu-link">MySite</a>
<ul class="pure-menu-list">
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">Home</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">About</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">Contact</a>
</li>
</ul>
</nav>어떤 점이 중요한가요?
pure-menu클래스는 메뉴 전체 컨테이너를 의미합니다.pure-menu-horizontal를 사용하면 수평 메뉴를 쉽게 구성할 수 있습니다.pure-menu-heading은 사이트 제목 또는 로고 등에 사용할 수 있습니다.pure-menu-list와pure-menu-item클래스를 사용하여 메뉴 목록을 꾸밀 수 있습니다.
2. 그리드 레이아웃
Pure.css는 반응형 레이아웃을 구현하기 위한 간단한 그리드 시스템을 제공합니다. 아래는 양쪽 칼럼 예시입니다.
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-3">
<h2>왼쪽 칼럼</h2>
<p>작은 화면에서는 폭 100%를, 중간 화면 이상에서는 폭의 1/3을 차지합니다.</p>
</div>
<div class="pure-u-1 pure-u-md-2-3">
<h2>오른쪽 칼럼</h2>
<p>작은 화면에서는 폭 100%를, 중간 화면 이상에서는 폭의 2/3을 차지합니다.</p>
</div>
</div>어떤 점이 중요한가요?
pure-g는 그리드 컨테이너 역할을 합니다.- 칼럼을 구성할 때
pure-u-1-3,pure-u-1-2등의 클래스를 사용해 화면 폭에 대한 비율을 지정할 수 있습니다. pure-u-1클래스를 추가해 작은 화면에서는 한 칼럼이 100%를 차지하도록 설정합니다.- 반응형 그리드를 사용하려면
grids-responsive-min.css파일도 함께 포함해야 합니다.
3. 폼
Pure.css의 폼은 간단하면서도 유연하게 확장할 수 있습니다. 회원가입 폼 예시를 살펴봅시다.
<form class="pure-form pure-form-stacked">
<fieldset>
<legend>회원가입</legend>
<label for="name">이름</label>
<input id="name" type="text" placeholder="이름을 입력하세요" />
<label for="email">이메일</label>
<input id="email" type="email" placeholder="you@example.com" />
<label for="password">비밀번호</label>
<input id="password" type="password" placeholder="비밀번호를 입력하세요" />
<button type="submit" class="pure-button pure-button-primary">제출</button>
</fieldset>
</form>어떤 점이 중요한가요?
pure-form와pure-form-stacked클래스를 사용하면 라벨과 입력 칸이 위아래로 정렬된 형태가 됩니다.pure-button과pure-button-primary를 사용해 깔끔한 버튼 디자인을 적용할 수 있습니다.
4. 버튼
Pure.css는 기본적으로 단정하고 쉽게 커스터마이징할 수 있는 버튼 스타일을 제공합니다.
<button class="pure-button">기본 버튼</button>
<button class="pure-button pure-button-primary">주요 버튼</button>
<button class="pure-button pure-button-disabled" disabled>비활성화 버튼</button>어떤 점이 중요한가요?
pure-button은 기본 버튼 스타일을 적용합니다.pure-button-primary를 사용하면 좀 더 강조된 버튼을 만들 수 있습니다.pure-button-disabled스타일로 비활성화된 버튼을 표시하고,disabled속성도 함께 지정하는 것이 좋습니다.
Pure.css 커스터마이징
Pure.css의 가장 큰 장점 중 하나는 최소한의 스타일만 제공하므로, 원하는 대로 자유롭게 커스터마이징할 수 있다는 것입니다. 예를 들어, 다음과 같이 직접 CSS를 작성해 Pure.css 스타일을 확장하거나 덮어쓸 수 있습니다.
.custom-button {
background-color: #1e88e5;
color: #fff;
border-radius: 4px;
}
.custom-menu .pure-menu-link {
color: #1e88e5;
font-weight: bold;
}팁: Pure.css 자체 용량이 작기 때문에, 커스터마이징용 CSS를 추가해도 전체 스타일 파일 크기가 크게 늘지 않습니다.
결론
Pure.css는 다른 대형 프레임워크에 비해 덜 알려져 있지만, 가벼우면서 반응형 디자인과 모듈화를 간편하게 지원한다는 점에서 많은 장점을 지니고 있습니다. 빠른 프로토타이핑부터 실제 서비스 구축까지, 불필요한 리소스 낭비 없이 필요한 기능만 골라 사용할 수 있는 뛰어난 선택지입니다.
한 번 써보세요. 가벼움과 유연성이 여러분의 작업에 큰 도움이 될 수 있습니다. 즐거운 코딩 되시길 바랍니다!
추가 자료
Pure.css 관련 아이디어나 궁금증이 있다면 언제든 공유해 주세요!