멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 21 (TailwindCSS Vite 환경 구성 및 기초)

 

 

 

 

 

 

 

목차

• @layer 규칙
• TailwindCSS Vite
• public 폴더와 src 폴더의 차이
• Tailwind 핵심 개념(Core Concepts)
• 상태 디자인
• 테마 변수
• 오늘 하루를 돌아보며

 

 

 

 

 

 

@layer 규칙

@layer at-rule은 캐스케이드 레이어를 선언할 때 사용한다. 여러 캐스케이드 레이어가 있을 경우에는 우선순위를 정의할 때도 사용할 수 있다.

레이어 이름을 선언한 후, 레이어의 스타일을 정의할 수 있다.

/* 레이어 선언 */
@layer module, state;

/* state 레이어 스타일링 */
@layer state {
  .alert {
    background-color: brown;
  }
  p {
    border: medium solid limegreen;
  }
}

/* module 레이어 스타일링 */
@layer module {
  .alert {
    border: medium solid violet;
    background-color: yellow;
    color: white;
  }
}

 

나중에 선언한 module 레이어가 적용되어야 할 것 같지만, 적용되지 않는다. 처음에 레이어를 선언할 때의 순서에 따라 적용된다. state 레이어가 나중으로 선언되어 있기 때문에 최종 state가 적용된다.

 

레이어 규칙으로 선언된 스타일이 가장 먼저 적용되고, 레이어 규칙을 사용하지 않은 모든 스타일이 최종 적용된다. @layer 규칙으로 기본 스타일을 선언할 때 사용할 수 있겠다.

 

레이어에 !important를 선언해서 중요도를 높일 수 있다. 이때는 나중에 선언한 규칙이 먼저 적용된다. 즉, 적용 순서가 반대로 뒤집힌다.

 

 

 

 

 

 

TailwindCSS Vite

테일윈드 비트 환경을 구성하면 자동으로 기본 폴더와 파일들을 만들어 준다. Vite 환경에서는 live server를 구동하지 않아도 된다. dev 서버를 구동한다.

Vite 개발 환경에서는 public 폴더의 경로는 생략해야 한다. 배포 버전에서 public 폴더에 있던 파일을 기본 폴더에 넣기 때문이다. 테일윈드 CLI 모드에서 output.css를 빌드하는 것처럼 Vite에서는 개발 모드에 있는 파일들을 배포 버전으로 dist 폴더 안에 자동으로 빌드한다.

Vite 모드에서 4kb 이하의 이미지는 성능 최적화를 위해 자동으로 데이터화 후 html 안에 넣는다.

 

개발하면서 빌드를 하고 배포 버전으로 미리보기를 꼭 돌려봐야 한다. 이미지가 보이지 않을 수도 있기 때문에 꼭! 미리보기를 같이 보면서 진행해야 한다. 단, 빌드를 해야 미리보기에 적용되기 때문에 수정 후에 빌드하고 미리보기를 한다.

 

 

 

 

 

 

public 폴더와 src 폴더의 차이

Vite에서는 파일을 public과 src 폴더에 나눠서 관리한다. public은 변환 없이 그대로 제공하는 파일을 넣고, src는 빌드 과정에서 처리하고 최적화하는 파일을 넣는다.

 

public 폴더는 빌드할 때 파일 이름과 경로를 그대로 유지하며, 아무런 처리나 최적화 없이 그대로 제공한다. 절대 경로로 참조하고, 파일 url을 항상 일정하게 유지한다.

변경될 가능성이 없는 정적인 애셋을 public에서 관리하는 것이 좋다. 파비콘, 로고, 폰트, 최적화가 필요 없는 큰 이미지 파일 등을 public 폴더에 넣어놓는다. 프로젝트를 진행하는 과정에서 어떤 애셋을 정적 애셋으로 볼 것인지, 어떤 애셋을 동적 애셋으로 볼 것인지 논의해야 한다.

public 폴더 경로를 명시적으로 알리면, 빌드하는 과정에서 최적화하고 이름이 변경된다. 이럴 경우 빌드 후에 미리보기하면 이미지가 보이지 않는 경우도 있다. public 폴더의 경로는 생략해야 한다.

 

src 폴더는 빌드할 때 파일을 번들링, 압축, 최적화한다. 또한, 파일이 캐싱되지 않도록 해시 처리를 한다. 상대 경로로 참조하고, 필요할 때만 로드하도록 코드 스플리팅으로 최적화할 수 있다.

css 파일, 최적화가 필요한 프로젝트 파일, 코드로 가져와서 조작할 수 있는 svg 파일 등을 src에서 관리하는 것이 좋다.

 

두 폴더를 잘 관리하면 웹 애플리케이션의 성능과 개발 효율을 높일 수 있다.

 

 

 

 

 

 

Tailwind 핵심 개념(Core Concepts)

테일윈드의 핵심 개념은 다음과 같다.

• 유틸리티 클래스: html 파일을 떠나지 않고도 유틸리티 클래스를 추가하여 스타일링할 수 있다.
• 상태 디자인: 다양한 상태에 따라 접두사를 붙여서 상태 디자인을 할 수 있다.
• 반응형 디자인: 미디어 쿼리나 컨테이너 쿼리를 지정할 수 있다.
• 다크 모드: dark: 접두사를 붙여서 다크 모드의 스타일을 지정한다.
• 테마 변수: 새로운 유틸리티 클래스를 생성할 수 있다.
• 색상: 다양한 색상을 지원한다.
• 사용자 정의 스타일 추가: 사용자 정의 스타일을 유연하게 추가, 삭제, 수정(재정의)할 수 있다.
• 소스 파일에서 클래스 감지
• 함수 및 디렉티브: 디렉티브는 CSS에서 사용할 수 있는 Tailwind 전용 사용자 지정 규칙으로, Tailwind CSS 프로젝트에 대한 특수 기능을 제공한다.

Tailwind 유틸리티 클래스를 한 눈에 볼 수 있는 cheat sheet 사이트가 있다.

Tailwind CSS Cheat Sheet

 

 

 

 

 

 

상태 디자인

유틸리티 클래스 이름 앞에 다양한 상태에 따른 접두사를 붙여 사용할 수 있다.

• hover: = 마우스 커서를 올린 상태의 스타일링
• active: = 클릭한 상태의 스타일링
• focus: = 포커싱 상태의 스타일링
• first:, last:, odd:, even: 등 = 특정 요소의 구조를 선택해서 스타일링
• nth-*:, nth-last-*: = 목록에서의 위치에 따라 자식의 스타일 지정
• invalid:, disabled: 등 = 폼 양식의 상태에 따른 스타일링
• has-*: = 하위 요소의 상태나 내용에 따른 스타일링
• group:, group-has*: = 부모 요소에 group 클래스를 추가하면, 그룹 안에 있는 자식 요소에 대한 스타일을 지정할 수 있다.
• peer:, peer-has-*: = 형제 요소를 기반으로 스타일 지정
• not: = 조건이 참이 아닐 때의 스타일링
• before:, after: = 가상 요소 스타일링

 

 

 

 

 

 

테마 변수

css 파일에 @theme 테마 변수 디렉티브를 사용해서 새로운 유틸리티 클래스를 생성할 수 있다. 인라인 스타일에서도 var() 함수로 불러올 수도 있다. 유틸리티 클래스에 연결되지 않도록 하려면 :root에 정의한다.

/* 테마 변수 디렉티브 (@theme) */
@theme {
  --color-mint-500: oklch(0.72 0.11 178);
}

<div class="bg-mint-500">
  <!-- ... -->
</div>

<div style="background-color: var(--color-mint-500)">
  <!-- ... -->
</div>

 

테마 변수는 네임 스페이스에서 정의된다. 네임 스페이스에서 새 테마 변수를 정의하면 프로젝트에서 새 유틸리티와 베리언트를 사용할 수 있다. 테마 변수의 네임 스페이스 참고

Theme variables - Core concepts

 

 

 

 

 

@theme 디렉티브로 새로운 테마 변수를 정의하여 기본 테마를 확장할 수 있다. 또는, 기본 테마 변수 값을 재정의할 수도 있다. * 기호를 사용하여 속성 값을 initial로 지정하면 기본 테마를 초기화하고 전체를 모두 재정의할 수 있다.

@theme {
  /* 기본 테마 확장 */
  --font-suit: "SUIT Variable", sans-serif;
  
  /* 기본 테마 재정의 */
  --breakpoint-sm: 30rem;
  
  /* 기본 테마 초기화 */
  --color-*: initial;
  --color-black: #121212;
}

 

애니메이션 규칙을 추가할 때 @keyframes와 애니메이션 테마 변수를 설정하여 사용할 수 있다.

@theme {
  --animate-fade-in-scale: fade-in-scale 0.3s ease-out;
  
  @keyframes fade-in-scale {
    0% {
      opacity: 0;
      transform: scale(0.95);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }
}

 

 

 

 

 

 

오늘 하루를 돌아보며

도구의 특장점을 잘 알아야 잘 활용할 수 있다. Vite를 사용하기 전에 꼼꼼하게 세부적으로 살펴보면서 설명을 들어서 폴더가 왜 이런 구조로 되어있는지, 클래스를 추가하면 왜 스타일이 변경되는지 등 빠르게 이해할 수 있었다.

 

테일윈드를 사용하면 html 코드가 지저분해지긴 하겠지만, css 파일이랑 왔다갔다 하면서 작업하지 않아도 html 안에서만 바로 스타일링까지 다 할 수 있다는 게 매력적이다. 클래스 이름도 직관적이라 이해하기도 사용하기도 편리하다. 심지어 클래스 이름을 어떻게 지어야 할지 고민하지 않아도 되는 게 제일 마음에 들었다. 아직은 유틸리티 클래스가 어떤 것들이 있는지, 어떻게 표현하는지 익숙하지 않아서 시간이 좀 걸리지만, 나중에 익숙해지면 훨씬 쉽고 빠르게 스타일링할 수 있을 것 같다.

 

내일이면 슬비쌤과의 마지막 날이다. 시간이 벌써 이렇게 지나간 게 믿기지 않을 정도로 빠르게 흘렀다. 어떻게든 이해가 잘 되도록 차근차근 알려주셔서 빠르게 html과 css에 익숙해졌다. 슬비쌤의 이야기들을 통해 개발자로서의 마음가짐과 자세를 배울 수 있었다. 짧지만 정말 많은 것을 배우고 고민한 시간이다.

 

다음주부터 시작하는 프로젝트도 조금 긴장되지만 기대도 된다. 동기들과 협업해서 프로젝트를 완성해 나가면서 훨씬 많은 것을 배우게 될 것 같다. 그동안 배운 것들을 이제 실제로 사용해 보면서 손에 제대로 익도록 해야겠다. 그 전에 연습도 많이 해봐야지!