Somedding

기본 CSS, Styled Components, Tailwind CSS 본문

CSS

기본 CSS, Styled Components, Tailwind CSS

somedding 2024. 6. 24. 14:11

지금까지 프로젝트를 하면서 사용해 본 CSS의 종류이다.

기본 CSS 파일을 시작으로 Styled Components, Tailwind CSS를 사용하면서 어땠는지를 분석하려고 한다.

참고로 기본 CSS 파일은 바닐라 자바스크립트로 프로젝트하면서 사용했으며, Styled Components와 Tailwind CSS는 리액트로 프로젝트하면서 사용했다.

 

 

기본 CSS 파일

기본 CSS 파일은 HTML 태그에 id와 class를 지정해서 스타일을 정의하는 전통적인 스타일링 방식이다.

".css" 확장자를 가지며, HTML파일과 분리되어 외부 파일로 관리될 수 있다.

이후, HTML의 <head> 태그에서 <link> 태그를 통해 CSS가 적용된다.

 

기본 CSS 파일에서는 태그에 스타일링을 지정하거나, 태그의 id와 class를 통해 특정 태그에만 스타일링을 지정할 수 있다.

 

기본 CSS 파일의 예시는 다음과 같다.

// div태그
div {
  width: 100px
}

// styling이라는 class를 가진 태그
.styling {
  background-color: black; // 배경 색상을 black으로 설정
}

// styling이라는 class를 가진 태그를 hover했을 때
.styling:hover {
  background-color: blue; // hover했을 때 배경 색상을 blue로 설정
}

// styling이라는 class를 가진 태그(미디어쿼리 적용)
@media (min-width: 768px) {
  .styling {
    background-color: white; // 화면 최소 크기가 768px 이상인 경우에 배경 색상을 white로 설정
  }
}

 

장점

기본 CSS 파일을 사용한 프로젝트는 스타일링이 단순하고 직관적이었다.

또한, 외부 파일로 스타일만 따로 지정할 수 있기 때문에 스타일을 관리하기 수월한 장점이 있었다.

 

단점

반면, 기본 CSS 파일로 스타일링된 프로젝트의 경우 모든 스타일이 전역적으로 적용된다.

즉, 스타일이 충돌해서 이상한 결과를 낳을 수 있다.

또한, 동적으로 스타일이 변경하거나 조건부 스타일을 적용하기가 다른 방식에 비해 까다롭다.

 

 

결국, 간단한 스타일링을 다루기에는 충분하다고 판단되지만,

복잡한 스타일링이 필요한 경우에는 다른 CSS를 사용하는 것이 더 나은 선택일 수 있다.

 

 

Styled Components

Styled Components는 리액트에서 많이 쓰이는 대표적인 CSS-in-JS 라이브러리이다.

리액트의 컴포넌트와 같은 방식으로 스타일을 컴포넌트로 관리할 수 있게 해주는 스타일링 방식이다.

 

CSS-in-JS 방식이기에 JavaScript 파일 내에서 직접 CSS를 작성할 수 있다.

해당 js 파일에서 컴포넌트로 제작되기 때문에 각 파일 내에서 고유한 스타일을 생성할 수 있다.

또한, JavaScript와 같이 동작할 수 있기 때문에 리액트의 props를 통해 동적으로 스타일링하기 매우 편하다.

 

styled Components의 예시는 다음과 같다.

import styled from 'styled-components';

const App = () => {
  return (
    <>
      <StyledDiv>div태그 스타일링</StyledDiv>
      <StyledP isSmall={false}>p태그 스타일링</StyledP>
      <StyledSpan>span태그 스타일링</StyledSpan>
    </>
  );
};

// div태그 스타일링. 컴포넌트 명은 StyledDiv
const StyledDiv = styled.div`
  width: 100px;
`;

// p태그 스타일링. 컴포넌트 명은 StyledP
const StyledP = styled.p`
  // StyledP태그의 isSmall가 true이면 폰트 크기 18px, false이면 폰트 크기 20px로 설정
  font-size: ${(props) => (props.isSmall ? '18px' : '20px')}; 
`;

// span태그 스타일링. 컴포넌트 명은 StyledSpan
const StyledSpan = styled.span`
  background-color: black;
  &:hover { // span태그에 hover했을 경우에 배경 색상을 blue로 설정
    background-color: blue;
  }
  
  // 화면 너비가 768px 이상인 경우에 배경 색상을 white로 설정
  @media (min-width: 768px) {
    background-color: white;
  }
`;

export default App;

 

장점

리액트와 같이 Styled Components 역시 컴포넌트로 관리할 수 있기에 모듈화도 잘 되고, 재사용성도 뛰어났다.

무엇보다 리액트와 같이 사용하면 너무 편리했다.

또한, props로 스타일에 조건을 줄 수 있어 동적 스타일링이 간단했다.

또한, CSS-in-JS이기 때문에 전역적으로 스타일이 적용되는 것이 아니라 스타일 충돌이 없었다.

 

단점

큰 단점은 아니지만, 컴포넌트로 관리되기 때문에 컴포넌트의 이름을 생성하는 것에 약간의 어려움을 느꼈다.

스타일을 적용하려면 정의되어야 하는 컴포넌트가 많았다.

또한, 자동으로 클래스 이름이 생성된다.

웹 개발을 진행하면 브라우저의 개발자 도구에서 스타일을 봐야 하는 경우가 있는데, 자동으로 생성된 클래스명으로 인해 원인을 파악하기 힘든 경우가 있다.

 

 

Styled Components는 리액트 프로젝트에 잘 맞는 CSS라고 판단된다.

컴포넌트를 통해 스타일링되는 점이 큰 장점이 되는 것 같다.

 

 

Tailwind CSS

마지막으로 가장 최근에 사용해 본 Tailwind CSS이다.

Tailwind CSS는 개발자가 더 쉽고 빠르게 스타일링할 수 있는 유틸리티 우선(utility-first) CSS 프레임워크이다.

이때, utility-first란, 미리 세팅된 유틸리티 클래스를 활용하여 HTML 코드 내에서 스타일링하는 기법이다.

 

즉, 스타일링에 필요한 속성들이 클래스 형태로 사전에 정의되어 있고, 개발자는 해당 클래스들을 조합해서 스타일링하는 것이다.

 

예를 들면,

'background-color: white'같은 경우는 'bg-white'라는 유틸리티 클래스로 나타낼 수 있으며,

'font-weight: bold'같은 경우는 'text-bold'라는 유틸리티 클래스로 나타낼 수 있다.

 

또한, 원하는 스타일이 유틸리티 클래스로 정의되지 않은 경우에는 'tailwind.config.js'파일에서 직접 커스터마이징할 수 있다.

 

Tailwind CSS의 예시는 다음과 같다.

const App = () => {
  return (
    <>
      {/* div태그 스타일링. width를 100px로 설정 */}
      <div className="w-[100px]">div태그 스타일링</div>
      {/* p태그 스타일링. isSmall 값에 따라서 폰트 크기를 18px 혹은 20px로 설정 */}
      <p className={isSmall ? 'text-[18px]' : 'text-[20px]'}>p태그 스타일링</p>
      {/* span태그 스타일링 */}
      {/* 배경 색상을 black으로, hover시에는 blue로, 화면 크기가 768px이상인 경우에는 white로 설정 */}
      <span className="bg-black hover:bg-blue md:bg-white">span태그 스타일링</span>
    </>
  );
};

export default App;

 

장점

Tailwind CSS를 사용한 프로젝트는 스타일링하는 속도가 다른 스타일보다 빨랐다.

정의된 유틸리티 클래스를 사용함으로써 바로바로 적용이 가능했으며, CSS를 별도로 작성하지 않고도 스타일을 지정할 수 있었다.

또한, 프로젝트 전반에 걸쳐 일관된 디자인을 적용하기 편했다.

 

단점

하지만 인라인 형식으로 태그에 모든 스타일을 쓰게 되므로, 태그가 너무 길어지고 복잡해진다.

코드의 가독성을 해치게 되며, 유지보수가 어려워졌다.

또한, 익숙하지 않은 유틸리티 클래스의 경우에는 직접 찾아야 했다.

 

 

Tailwind CSS는 빠른 스타일링이 필요한 프로젝트에서 적합하며, 일관된 스타일을 적용하기 편하다.

다만, 코드의 가독성을 해칠 수 있기 때문에 그 점에 유의해야 한다.

 

 

 

 

Styled Components와 Tailwind CSS 모두 매력적이다.

그렇기에 상황에 맞게 사용하면 될 것이다.

만약 프로젝트가 컴포넌트 중심 개발이며 동적 스타일링에 중점을 두고 싶다면 Styled Components가,

빠르게 UI를 구현해야 하며 일관된 디자인 시스템에 중점을 두고 싶다면 Tailwind CSS가 나은 선택이라고 생각한다.

 

 

앞으로 Emotion과 Bootstrap, Ant Design 그리고 MUI를 사용해볼 예정이다.

 

 

 

 

참고 자료

CSS 의 구조

https://developer.mozilla.org/ko/docs/Learn/CSS/First_steps/How_CSS_is_structured

styled-components 개념 및 예시

https://kyounghwan01.github.io/blog/React/styled-components/basic/#google_vignette

TailwindCSS은 뭐고 왜 사용할까

https://velog.io/@wjdghks963/TailwindCSS은-뭐고-왜-사용할까

Tailwind CSS vs Styled-components 비교

https://bysxx.tistory.com/15

 

 

 

 

 

 

글 내용 중, 잘못됐거나 더 알아야 하는 지식이 있다면 댓글로 남겨주시면 감사하겠습니다!

모두 좋은 하루 보내세요:)

'CSS' 카테고리의 다른 글

CSS의 position 속성  (0) 2023.12.04
'CSS' Related Articles more
Comments