37일차 (TailwindCSS vs SCSS)

TailwindCSS

1. 특징: 유틸리티 우선의 CSS 프레임워크

2. 장점

    1) HTML에 직접 클래스를 추가하여 빠르게 스타일링 가능
    2) 반응형 디자인이 간편
    3) 사용자 정의가 쉬움

3. 단점
    1) 새로운 유틸리티 클래스를 학습해야 함
    2) 프로젝트가 커질수록 HTML이 복잡해질 수 있음

 

4. 예시코드

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  클릭
</button>


<div class="text-sm md:text-lg lg:text-xl">
  반응형 텍스트 크기
</div>

 

---

SCSS (Sass)

1. 특징: CSS의 확장 버전으로 변수, 믹스인, 중첩 등의 기능 제공.

2. 장점
    1) CSS를 더 구조적이고 조직적으로 작성 가능
    2) 재사용성과 유지 관리가 용이

3. 단점
    1) 컴파일러 필요
    2) 초기 설정과 학습이 필요

 

4. 예시코드

// 변수와 버튼 스타일링
$primary-color: blue;
$hover-color: darken($primary-color, 10%);

.button {
  background-color: $primary-color;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  
  &:hover {
    background-color: $hover-color;
  }
}


// 믹스인(반응형)
@mixin responsive-text {
  font-size: 12px;

  @media (min-width: 768px) {
    font-size: 16px;
  }

  @media (min-width: 1024px) {
    font-size: 20px;
  }
}

.text {
  @include responsive-text;
}