Spider.css v2.2.0 소개

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

프론트엔드 개발자, CSS 프레임워크 사용자

난이도: 중급 이상 (Sass 기초 지식 필요)

핵심 요약

• .sass 기반 유틸리티-퍼스트 CSS 프레임워크로 12-column CSS Grid 및 Flex 레이아웃 지원
• .grid-cols-1 ~ .grid-cols-12, .col-span-1 ~ .col-span-12 등의 반응형 클래스 제공
• .card, .navbar, .btn 등 UI 컴포넌트 내장 및 테마(light, dark, blur, transparent) 지원

섹션별 세부 요약

1. 프레임워크 개요

• Sass 기반으로 작성되어 일반 CSS/SCSS보다 간결한 구문 제공 (대括号, 세미콜론 없음)
• Sass map 및 loop으로 구성되어 모듈성과 확장성 강화

2. 레이아웃 시스템

• 12-column CSS Grid 기반 레이아웃
• .grid 컨테이너, .grid-cols-1 ~ .grid-cols-12 컬럼 설정
• .col-span-1 ~ .col-span-12 컬럼 스팬 조절
• 반응형 변형: md:grid-cols-4 등

3. Flex 레이아웃

• Flexbox 지원 클래스: .flex, .inline-flex, .flex-row, .flex-col
• 정렬 및 래핑 옵션: .items-center, .justify-between, .flex-wrap
• 반응형 지원: lg:flex-row-reverse

4. UI 컴포넌트

• 카드 컴포넌트: .card, .card-img, .card-body, .card-footer
• 테마: .card-light, .card-dark
• 버튼 지원: .btn
• 네비게이션 바 모듈: .navbar, .navbar-brand, .navbar-toggle
• 모바일 토글 지원: .navbar-toggle
• 테마: light, dark, blur, transparent

결론

• Sass 기반 유틸리티-퍼스트 프레임워크로 빠른 개발 및 반응형 레이아웃 구현 가능
• 내장 컴포넌트와 테마 시스템을 통해 UI 개발 시간 절약
• Sass map/loop 활용으로 모듈성과 확장성 강화, 12-column Grid 및 Flexbox 활용 추천