[CSS] css: css-in-js, Sass, tailwindcss

조수현·2025년 6월 1일

CSS CSS in JS Sass tailwindCSS

서론

지금 css 다시 공부 중인디 정리해 본 적이 없어서 해 본다
css의 문법이나 스타일 라이브러리의 사용법 보다는 각각의 특징들을 정리하는 글

참고

React 기준으로 예시코드 작성

css란?

Cascading Style Sheets의 약자로 html등 과 같은 웹문서의 스타일을 지정하는 언어

.css확장자를 이용해 css파일 생성
파일을 따로 생성하지 않아도 html 태그의 style 속성을 이용해 inline style코드로 작성할 수 있음

예시 코드

body {
 margin: '10px';
}

.container {
 diplay: 'flex';
 flex-direction: 'column';
}

css module

css를 모듈처럼 사용하는 방법
css 사용 시 자동으로 고유한 클래스 이름을 생성해 제한적인 scope 생성

파일 생성 시 확장자 명을 .module.css로 작성
사용하고자 하는 파일에서 import를 사용해 불러와 모듈처럼 사용하면 됨
개발자 도구로 해당 요소 확인 시 클래스 이름이 고유하게 생성된 것을 확인

css 코드 예시

.title {
	color: red;
    font-size: 20px;
}

js 코드 예시

import style from 'style.module.css'

function Page () {
  return <section>
    <h2 style={style.title}>Hello</h2>
   </section>
}

Sass

기존 css의 단점을 보완하는 CSS 전처리기

특징

중첩 css 사용 가능
변수 생성 가능 $--primary-color: red;
Sass를 사용하는 Sass와 SCSS가 있음
- SCSS방식을 더 많이 사용함
  
  sass scss
  
  중괄호 ❌ ⭕️
  
  세미콜론 ❌ ⭕️

	sass	scss
중괄호	❌	⭕️
세미콜론	❌	⭕️

section {
	$--primary-color: '#ff0000';

	display: 'flex';
	background-color: black;
    
	.title {
 		color: var(--primary-color);
 	}

}

css-in-js

자바스크립트 런타임에 동작하는 css

css-in-js 라이브러리

styled-components
emotion

import styled from 'styled-components'
const DivStyled = styled.div`
	display: flex;
	background-color: black;
	padding: 10px;
`
// 스타일이 적용된 컴포넌트처럼 사용
function Component () {
  return <DivStyled />
}

장점

js 파일 안에 css 작성을 하는 형태로 파일이 분리 되어있을 때 번거로움이 해결되며 유지보수 용이
스타일이 충돌할 일이 적어짐
자바스크립트 변수로 스타일을 지정할 수 있음
런타임에 동작하기 때문에 동적 스타일 가능

단점

런타임에 동작하기 때문에 성능 문제 발생
기존 css와는 다른 문법이 있어 학습해야 함

💡 현재는 성능 문제로 css-in-js를 지양하는 추세인 것 같다

tailwindcss

inline style 방식으로 여러 css를 클래스로 정의해 가져다 사용하는 방식이다

예시 코드

import '@tailwindcss'

function Component () {

  return <div className="flex w-full h-20 justify-center items-center bg-red-100">
    <span className="font-extrabold text-xl">Hello World!</span>
  </div>
}