포트폴리오 2 - CSS 라이브러리를 써볼까?

CSS 라이브러리?

bootstrap

유데미에서 들었던 colt steele 웹개발 강의에서는 bootstrap이라는 CSS프레임워크를 썼다.

bootstrap은 일종의 CSS레고 블럭이다. 미리 만들어진 CSS 컴포넌트들을 가져다 쓸 수 있다.

https://getbootstrap.com/

설치하고 html 태그에 class로 속성값을 줄 수 있다. 그러면 미리 부트스트랩에 정해진 CSS스타일이 적용된다.

예를들어

<div class="btn btn-warning">버튼</div>

라고 하면 부트스트랩에 미리 정해진 warning 버튼이 들어가는 식이다.

tailwind css

tailwind도 비슷한 라이브러리이다.

https://tailwindcss.com/

다른 강의에서 tailwind css를 추천한다는 말을 들어 포트폴리오 프로젝트의 Navbar를 만들때 써봤다. 실제 코드는 이렇다.

export default function Navbar() {
  const dispatch = useDispatch();

  return (
    <header className="flex items-center justify-center h-16">
      <Link to="/">
        <AiTwotoneHome className="text-2xl text-aColor ml-4" />
      </Link>
      <h1 className="text-3xl font-bold text-aColor grow text-center font-serif">
        ZENO_CARD
      </h1>

      <BsQuestionSquareFill className="text-2xl text-aColor mr-4" onClick={()=>{
        dispatch(onModal())
      }} />
    </header>
  );
}

bootstrap과 비슷하게 tailwind도 className에다 미리 정해진 코드를 넣으면 tailwind css에서 만든 CSS 스타일이 적용되는 식이다.

위 코드에서 header는 flex에a align-items가 center로 적용된다.

이런 방식은 css파일을 따로 만들지 않아도 되는 장점이 있다.

익숙해지면 빠르게 페이지를 만들 수 있다. 하지만

결국 CSS 라이브러리는 안쓰고 만들게 되었다.

왜?

저런식의 미리 만들어진 스타일 템플릿은 서비스 소개페이지처럼

비슷한 구성에 비슷한 기능을 하는 페이지를 빨리 구축할 때는 편하다. 그게 다다.

하지만 픽셀 단위로, 전에 없던 레이아웃을 만들기 위해 배치나 스타일을

내 맘대로 바꾸려면 결국 숫자를 바꿔가며 페이지를 보고 수정하면서 만드는게 편하다.

또 실무에 가서 디자이너나 기획자랑 같이 일하게 되면 수정 사항을 받을텐데,

고쳐가면서 만들려면 결국 css 파일을 만들어 조금씩 조정하면서 만드는게 편하다.

그래서 결국 Navbar 하나만 tailwind로 만들고, 나머지 페이지와 컴포넌트는 전부 CSS 파일을 만들어 클래스 단위로 직접 숫자를 입력하며 만들었다.

처음에 보고 우와 좋다 편하겠다 생각이 들었는데,

실제 포트폴리오를