참고
CSS 프레임워크
최신 'CSS 프레임워크'
왜 공부해야 하는지, 각 프레임워크에 어떤 특징이 있는지 알고 공부하면 좋을 것 같아서 작성해둔다... 앞으로 프레임워크 하나씩 공부해나가면서 추가해볼 예정.
CSS 프레임워크란?
프론트엔드 개발자들은 CSS를 사용해 다양한 디자인을 구현하지만, 규모가 큰 애플리케이션에서는 반복 작업이 많아지기 때문에 DRY 원칙(Do not Repeat YourSelf) 을 지키기 어렵다. 이러한 비효율성을 줄이고 일관성 있는 디자인을 위해 많은 개발자가 CSS 프레임워크를 활용한다.
CSS 프레임 워크의 장점
- 개발 시간 단축: CSS 프레임워크를 사용하면 모든 CSS 스타일을 개발자가 작성하지 않아도 되므로 빠르게 작업을 시작할 수 있다.
- 일관적인 모양 제공: CSS 프레임워크는 웹 페이지가 다양한 브라우저/장치에서 일관된 모양을 가질 수 있도록 통합된 스타일을 제공한다.
- 반응형 디자인 지원: 반응형 웹디자인을 편리하게 개발할 수 있다.
- 브라우저 호환성 보장: CSS 프레임워크는 호환성을 보장하여, 여러 플랫폼에서 빠르게 코드가 작동하는지 확인할 수 있다.
- 높은 유지보수성:
CSS 프레임워크 종류
Bootstrap
Bootstrap이란?
Bootstrap은 가장 인기 있고 수요가 많은 CSS 프레임워크 중 하나로, 미리 정의된 HTML, CSS, Javascript 컴포넌트를 제공한다. 미리 정의된 컴포넌트를 제공하기 때문에 추가적인 CSS 코드 없이 빠르게 UI를 구성할 수 있다는 장점을 갖는다. Bootstrap은 다양한 기업에서 널리 사용되고 있어 디자인 표준을 준수하면서도 일관된 인터페이스를 구현하는 데 매우 유용하다.
장점 및 단점
장점
- Twitter에서 개발하여 안정적인 릴리즈와 장기 지원이 가능하다.
- 사용자가 많아서 커뮤니티가 잘 마련돼 있다.
- 다양한 컴포넌트가 정의되어 있어서(alert, modal 등) 구현 시간을 절약할 수 있다.
- Grid System Layout이 해상도 별 대응이 되어있어서 반응형 처리에 용이하다. (Grid Layout Playground)
단점
- 정형화된 디자인이 많고,
!important속성(나중에 설정한 값이 적용되지 않게함)이 여기저기 박혀있어 따로 재정의 하기가 어렵다. - 많이 사용되다 보니 Bootstrap으로 만든 사이트들은 다 똑같아 보인다는 의견이 많다.
- 상당히 무거운 프레임워크라 페이지 로딩속도가 다 프레임워크에 비해 떨어진다.