최근에 웹 개발을 하면서 디자인도 기깔나게 만들고 싶어서 CSS에 대해서 공부하는데, 다양한 Framework들이 존재한다. 그냥 CSS 쓰면 되는데 왜 구지 이런게 존재하는지 궁금하여 포스팅을 작성하게 됬다.
1. CSS Framework란?
CSS 프레임워크(CSS Framework)는 웹 개발에서 일반적으로 사용되는 CSS 코드와 JavaScript 코드, HTML 코드 등의 모음입니다. 이러한 프레임워크를 사용하면 개발자는 빠르고 쉽게 웹 페이지를 개발할 수 있습니다.
출처 : https://wikidocs.net/196382 (wikidocs)
음... 솔직히 잘 와닿지는 않는다. 그래서 장점과 예시를 소개하고자 한다!
2. 장점과 예시
ChatGPT를 이용해 css/foundation 코드를 비교해보자
- CSS -
.custom-button {
display: inline-block;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
user-select: none;
border: 1px solid transparent;
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: 0.25rem;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
background-color: #007bff;
color: #fff;
}
.custom-button:hover {
background-color: #0056b3;
}
- Foundation -
@import '~foundation-sites/scss/foundation';
.cb {
@include button; // Foundation의 버튼 스타일을 상속받음
background-color: #007bff;
color: #fff;
&:hover {
background-color: #0056b3;
}
}
css코드를 저렇게 짜진 않지만 프레임워크를 사용하는 것이 훨씬 간편해 보인다.
물론 css를 몰라도 되느냐? 그건 아니다. 프레임워크는 c++에서 include, python에서 import와 비슷한 느낌이다. 나중에 디자인할 때 코드를 하나 하나 치고 있을 수는 없다. 어느 정도 기본적으로 완성된 것을 쓰는 것이 훨씬 편하다. 그리고 scss를 사용하여 종북된 값을 변수를 활용해 유지 보수를 줄일 수 있다!
CSS의 중요성을 보여주기 위해 solved.ac 의 디자인 코드 중 몇 줄을 삭제했다. 짧은 코드의 변화로 인해 우리가 알고 있던 solved.ac가 맛이 간 것을 볼 수 있다.. 예쁜 사이트를 짧은 코드로 간편하게 짜기 위해 framework, scss 등 숙달할 필요가 있다!!
3. 결론
그러면 어떤 프레임워크를 사용해야 할까? 솔직히 이것은 취향과 목적에 따라 달라진다. bootstrap을 사용할 경우 별로 몰라도 디자인할 수 있어 좋지만 다른 사이트의 디자인과 비슷하여 차별성이 없다. 반면 Foundation의 경우 사용하기도 편하고 수정하기 쉽다. 그래서 내가 생각하기엔 프레임워크를 고집하기 보다는 일단 css를 공부하다가 활용할 때 쓰는 것이 더 도움이 되지 않을까 한다.
저도 아직 디자인을 많이 해본 것은 아니기에 Framework에 대해 설명이 모호하고 다소 정확하지 않을 수도 있습니다.. 고인물 분들의 의견을 듣고 싶습니다.