CSS 프레임워크

CSS 프레임워크(CSS framework)는 CSS(Cascading Style Sheets) 언어를 사용하여 더 쉽고 표준을 준수하는 웹 디자인을 가능하게 하는 라이브러리이다. 이러한 프레임워크의 대부분은 적어도 하나의 그리드를 포함하고 있다. 더 기능적인 프레임워크는 더 많은 특징과 추가적인 자바스크립트 기반 기능을 제공하지만, 대개 디자인 지향적이며 대화형 UI 패턴에 초점을 맞춘다. 이러한 세부 사항은 CSS 프레임워크를 다른 자바스크립트 프레임워크와 구별 짓는다.

주목할 만하고 널리 사용되는 두 가지 예로는 부트스트랩과 파운데이션이 있다.

CSS 프레임워크는 다양한 모듈과 도구를 제공한다:

 초기화 스타일 시트 (reset style sheet)
 특히 반응형 웹 디자인을 위한 그리드
 웹 타이포그래피
 스프라이트나 아이콘 폰트 형태의 아이콘 세트
 말풍선, 버튼, 폼 요소의 스타일링
 아코디언, 탭, 슬라이드쇼 또는 모달 윈도(라이트박스)와 같은 그래픽 사용자 인터페이스의 일부
 동일한 높이의 콘텐츠를 만들기 위한 이퀄라이저
 자주 사용되는 CSS 헬퍼 클래스 (left, hide 등)

더 큰 프레임워크들은 Less나 Sass와 같은 CSS 해석기를 사용한다.

 주요 CSS 프레임워크 목록 

 이름 최신 버전 라이선스 그리드 단위 특징  버전  날짜 블루프린트(Blueprint) 1.0.1  2011년 5월 14일  타이포그래피, 폼, 인쇄, 버튼·탭·스프라이트용 플러그인. 부트스트랩 5.3.3  2024년 2월 20일  고정형, 유동형, 반응형 px, % 레이아웃, 타이포그래피, 폼, 버튼, 내비게이션, 미디어 쿼리, .sass 파일, 자바스크립트 라이브러리, RTL 레이아웃. ,기본 12Bootstrap documentation - Customizing the grid 파운데이션 6.7.5  2022년 7월 13일  유동형 px, % 반응형 레이아웃, 소스 순서 지정, 타이포그래피, 폼, 버튼, 내비게이션, 미디어 쿼리, 자바스크립트 라이브러리. ,기본 12Foundation documentation - The Grid YAML 4.1.2  2013년 7월 28일  고정형, 탄력형, 유동형 px, em, % 레이아웃, 그리드, 단, 폼, 버튼, 반응형 레이아웃을 위한 점진적 선형화, float 처리, 내비게이션, 타이포그래피, 접근성 및 애드온 (접근 가능한 탭, RTL 지원, 마이크로포맷).  YUI CSS 그리드 3.18.1  2014년 10월 22일 -3 고정형 및 유동형테일윈드 3.4.3  2024년 3월 27일  고정형, 유동형, 반응형 

 각주 


분류:웹 디자인
분류:사용성
분류:모바일 웹
분류:인간-컴퓨터 상호 작용
분류:사용자 인터페이스
분류:반응형 웹 디자인