1-3 HTML / CSS (basic)

KEY WORD : CSS Framework / CSS Preprocessor / 디자인 시스템

 

> CSS Framework : 이미 만들어진 UI 규칙 세트

•  framework = 뼈대 + 규칙을 미리 만들어둔 것 . ( 버튼 디자인 / 여백 규칙 / 색상 체계 / 반응형 기준)
• 사용하는 이유는 편해서가 아닌 통일하기 위해서
• 대표적인 framework ( Bootstrap / Tailwind / Bulma / Skeleton)

 

>> Bootstrap

• 미리 정의된 HTML/CSS 기반의 UI 컴포넌트 제공
• 일부 컴포넌트는 JavaScript 포함 ( 모달, 드롭다운 등)
• 모바일 우선 접근 방식도입하여 다양한 화면 크기에 맞는 반응형 디자인을 쉽게 구현할 수 있음.
• 추가적인 CSS코드 작성 없이 빠르게 UI를 구성
• 다양한 기업과 프로젝트에서 사용되어 일관된 인터페이스를 빠르게 만들 때 유용하다.

 

>> Tailwind CSS

• 유틸리티 우선 CSS 프레임 워크
• HTML 안에서 작은 CSS클래스들을 조합해 UI를 구성
• 스타일을 직접 조합하기 때문에 디자인 자유도가 높음
• CSS파일을 거의 작성하지 않아도 됨
• 사용자가 필요에 맞게 유연하게 스타일을 지정할 수 있음.
• 빠른 프로토타이핑이 필요한 작업 / 프로젝트에서 효과적이다.

-> CSS를 잘 아는 사람이 자유롭게 조립하고 싶을 때 사용

 

>> Bulma

• flexbox 기반의 오픈소스 CSS Framework
• 폭넓은 내장 기능 제공
• 높은 수준의 커스터 마이징 제공
• Bootstrap보다 가볍고, 순수 CSS 를 쓰고 싶을 때

 

>> Skeleton

• 극도로 단순한 반응형 보일러 플레이트(기본뼈대)
• 최소한의 스타일만 제공하는 경량 프레임워크
• HTML 표준요소와 CSS 기본 스타일을 제공하여 쉽게 커스터마이징 가능
• 작은 규모의 프로젝트/가벼운 웹 어플리케이션에 적합.

 

> CSS Preprocessor : CSS를 더 편하게 쓰기 위한 도구 (SASS / LESS)

• 반복 줄이기 / 구조를 보기 좋게 / CSS 파일 관리