본문으로 건너뛰기
Advertisement

모던 CSS 및 Tailwind CSS

웹 디자인의 변천사와 함께 최근에는 보다 빠르고 일관된 디자인을 위해 유틸리티 중심의 프레임워크가 널리 사용되고 있습니다.

1. CSS 변수 (Custom Properties)​

전역적으로 스타일 값을 관리할 수 있습니다.

:root {
    --primary-color: #3b82f6;
    --border-radius: 8px;
}

.button {
    background-color: var(--primary-color);
    border-radius: var(--border-radius);
}

2. Tailwind CSS란?​

Utility-First 컨셉의 CSS 프레임워크입니다. 별도의 CSS 파일을 작성하지 않고 HTML 태그에 직접 클래스를 입력하여 스타일링합니다.

주요 장점​

  • 속도: CSS를 직접 작성하는 시간을 획기적으로 줄여줍니다.
  • 일관성: 미리 정의된 디자인 시스템(간격, 색상, 그림자 등)을 사용하여 UI의 일관성을 유지합니다.
  • 최적화: 사용하지 않는 클래스를 빌드 단계에서 제거하여 결과물을 가볍게 만듭니다.

사용 예시 (React/HTML)​

<div class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition-all">
    클릭하세요
</div>

3. 애니메이션 및 효과​

  • Transition: 시간에 따른 변화 효과
  • Transform: 회전, 크기 조절, 기울기 등
  • Keyframes: 정밀한 애니메이션 정의
@keyframes slide-in {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

.box {
    animation: slide-in 0.5s ease-out;
}

4. Glassmorphism (유리 효과)​

최근 인기를 끄는 디자인 스타일로, 배경을 흐리게 처리하는 효과입니다. (이 사이트에서도 사용됨)

.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

이제 Web Fundamentals의 기본을 모두 배웠습니다! 다음 단계로 넘어가 다른 프로그래밍 언어나 프레임워크를 학습해보세요.

Advertisement
Advertisement