웹파트 YB 김다현입니다!
보통 프레임워크 하면 JavaScript나 다른 기술을 먼저 떠올리기 쉽지만 사실 CSS에도 강력한 프레임워크들이 있다.
CSS 프레임워크를 잘 활용하면, 코드 작성 시간도 줄어들고 스타일의 일관성도 높아지기에 이 글을 참고하면 좋을 듯 하다!
CSS 프레임워크란?
미리 개발 해 둔 완성형 디자인을 쉽게 가져다 쓸 수 있도록 한 것
쉽게 말해, 웹 디자인을 더 쉽고 빠르게 구현할 수 있도록 도와주는 도구를 우리는 CSS 프레임워크라고 한다.
사전에 정의된 스타일과 컴포넌트를 제공하여, 개발자가 반복적인 CSS 작업에서 벗어날 수 있게 해준다.
CSS 프레임워크엔 어떤 게 있을까?
2024년 기준 상위 2개의 프레임워크, Tailwind CSS와 BootStrap을 중점적으로 다뤄보려고 한다.
Tailwind CSS
Tailwind는 GitHub와 Nuxt.js의 공식 사이트에서 사용하고 있기도 한 프레임워크이다.
Tailwind CSS란?
<div class="flex m-4">
<div class="p-4 bg-blue-500 text-white">물결웨비</div>
<div class="p-4 bg-green-500 text-white ml-2">안녕</div>
</div>위 코드는 두 개의 박스를 가로로 나란히 배치하고, 각각 다른 배경색을 적용한 예시 코드이다!
flex 클래스는 박스를 가로로 배치하게 하고, m-4는 전체 박스에 여백을, p-4는 각 박스 안에 패딩을 주는 클래스이다.
Tailwind CSS는 Utility-First 컨셉을 가진 CSS 프레임워크다. (그게 뭔데...)
풀어 설명하자면 스타일을 미리 정의된 유틸리티 클래스를 사용해 HTML 코드 안에서 바로 적용할 수 있다는 뜻이다.
예를 들어, m-1 은 여백(margin)을 추가하는 클래스고, flex 는 요소들을 가로로 나란히 배치하는 클래스라고 보면 된다.
이렇게 미리 준비된 클래스를 사용해 빠르고 간편하게 웹 디자인을 할 수 있다.
Tailwind CSS의 장점
빠른 개발 속도
<div class="flex justify-center items-center h-screen">
<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded hover:bg-blue-700">
이건 버튼
</button>
</div>
아까 말했듯이, Tailwind CSS는 미리 정의된 유틸리티 클래스를 제공한다. 이는 Tailwind CSS의 메인 컨셉이자 가장 큰 장점이다.
HTML 코드에서 바로 스타일을 적용할 수 있기 때문에 파일을 따로 작성할 필요가 없다. 그 덕분에 HTML과 화면을 분할해서 사용하지 않아도 되고, 원하는 태그의 스타일을 변경하기 위해 클래스명을 검색해가며 일일이 필요한 CSS 코드를 찾을 수고도 사라진다!
일관된 디자인
유틸리티 클래스는 이미 일정한 기준에 맞춰 만들어졌기 때문에, 여러 사람이 작업해도 스타일이 일관성 있게 유지된다는 게 큰 장점이다. 그렇기에 팀 프로젝트에서도 특히 유용하다.
가벼운 파일 크기
Tailwind는 사용하지 않는 CSS를 자동으로 제거해준다. (이 기능을 PurgeCSS라고 한다).
그렇기에 최종적으로 배포되는 CSS 파일의 크기가 매우 작아서 웹 페이지 로딩 속도가 빨라진다는 장점도 있다.
BootStrap
부트스트랩은 가장 널리 사용되는 CSS 프레임워크인 만큼, 모두들 한 번 쯤은 들어봤을 거라 생각한다. 트위터 개발자와 디자이너들이 협력하여 개발했는데, 트위터 내에서 일관된 디자인과 더 효율적인 개발을 위해 만들게 되었다고 한다. 다양한 팀이 협업하면서 발생하는 스타일 혼란을 줄이고, 더 빠르고 일관된 사용자 인터페이스를 구축하기 위해 부트스트랩을 도입한 것!
BootStrap이란
'부트스트랩(Bootstrap)'은 반응형이며 모바일 우선인 웹프로젝트 개발을 위한 가장 인기있는 HTML, CSS, JS 프레임 워크입니다.
-공식홈페이지-
부트 스트랩은 HTML, CSS. JS(Javascript)를 모아 놓은 것이다. 버튼, 프로그래스바, 캐러셀 등등 미리 구축되어있어 편하게 사용할 수 있기 때문에 디자이너, 개발자들 사이에서 '웹디자인 혁명' 이라는 말이 있을 정도로 큰 인기를 얻었던 프레임 워크이다. 부트스트랩은 기본적인 그리드 시스템과 반응형 디자인을 지원하므로, 복잡한 CSS 코드를 작성하지 않고도 화면 크기에 맞게 자동으로 레이아웃이 조정된다.
BootStrap의 장점
빠른 개발 속도
<html>
<head>
<link rel="stylesheet" href="<https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css>">
</head>
<body>
<button type="button" class="btn btn-info">이건 버튼</button>
</body>
</html>
부트스트랩 역시 빠른 개발 속도를 보장한다. 부트스트랩은 미리 준비된 CSS 클래스와 UI 컴포넌트를 제공하기 때문에 개발자가 빠르게 웹 페이지를 구성할 수 있다. 예를 들어, 버튼을 생성할 때 CSS를 따로 작성하지 않고, 클래스만 추가해 스타일을 바로 적용할 수 있다.
부트스트랩은 다운로드 또는 CDN 방식으로 링크해서 사용하기만 하면 되기 때문에, 코딩의 양도 줄여주는 장점이 있다.
반응형 디자인 지원
사실 내가 생각하는 가장 큰 장점이다. 개발을 하다보면 반응형 디자인이 굉장히 중요하다는 것도 알게 되고 그만큼 개발이 번거롭다는 것도 알게 된다... 하지만 부트스트랩은 그런 부분까지 미리 만들어놨기 때문에 데스크톱뿐만 아니라 모바일에서도 잘 보이는 웹 페이지를 쉽게 만들 수 있다.
또한 부트스트랩의 그리드 시스템을 활용하면 화면 크기에 따라 유동적으로 배치가 변하도록 쉽게 설정할 수도 있다.
다양한 컴포넌트 제공
공식 홈페이지를 들어가보기만 해도 알 수 있는데, 부트스트랩은 정~말 많은 UI 컴포넌트를 지원하고 있다. 심지어 아이콘까지 제공해준다!
부트스트랩을 쓰다보면 디자인 감각이 없어도 꽤 괜찮은 디자인의 웹 개발을 할 수 있다. ㅎㅎ
'1주차' 카테고리의 다른 글
| [CSS] Flex Container 속성 익히기 (0) | 2024.10.11 |
|---|---|
| [CSS] position의 다섯 가지 값 & relative와 absolute (0) | 2024.10.11 |
| 웹 접근성과 HTML/CSS (0) | 2024.10.11 |
| 똑똑하게 CSS 선택자 사용하기 ~! :where() / :is() (0) | 2024.10.11 |
| CSS 캐스케이딩 - 스타일 우선 적용 순서 (0) | 2024.10.11 |
