# 작업일지 3 / Tailwind CSS 로 글로벌 스타일 적용하기 w.@layer가 뭐징

오늘부터 목요일까지 4일간 빨리 퍼블리싱을 마치려고 한다. Tailwind 를 사용하기 때문에, 오랜만에 뚝딱뚝딱이 가능했다. 지난번에는 글로벌 스타일을 제대로 활용하지 못했어서 이번에 써보게 되었음. 

index.tsx 에서 참조중인 글로벌 css 파일 내에 @layer 키워드로 글로벌 스타일을 설정할 수 있다. 이 키워드를 사용하면 테일윈드의 세 가지 종류의 레이어에 직접 커스텀 클래스를 정의할 수 있다. 세 키워드란 base, components, utilities가 있다. 

초기셋팅 때 글로벌 css 파일 가장 상단에 선언해주는 그 세 가지이다. 공식문서에 따르면, 일반적인 css가 cascading 으로 위에서 아래로 적용되기 때문에 아래와 같이 코드를 작성하면 두 버튼 다 black이 된다.

검은색이 되어버린 두 버튼..

이런 문제점 해결을 위해 tailwind에서는 layer 개념을 도입해서 이 커스텀 css 들이 서로 다른 계층에 존재하도록 관리를 해준다고 한다. 세 계층에 대해 다음과 같이 설명하고 있다.

• The base layer is for things like reset rules or default styles applied to plain HTML elements.
  • @layer base 는 HTML 요소에 적용되는 초기화 규칙, 기본 스타일을 정의하는데 사용된다.
• The components layer is for class-based styles that you want to be able to override with utilities.
  • @layer components 는 클래스 기반 스타일로, 유틸리티를 통해 재정의할 수 있다.
• The utilities layer is for small, single-purpose classes that should always take precedence over any other styles.
  • @layer utilities 는 우선순위가 제일 높은, 단일 목적을 위한 가장 작은 단위의 클래스를 정의하는 레이어이다.

정리하면 @base 에 전체 영역에 적용될 폰트라던가, 태그 별 스타일링 등을 설정하고, @components 에서 클래스 단위로 큼직한 스타일링을 정의한다. 이번에는 전체 페이지에 적용될 컨텐츠 섹션의 레이아웃등을 클래스로 지정해서 코드 중복을 방지할 수 있었다.

 

@utilities 는 한 번도 사용해보지 않았는데, 공식문서의 예제에 따르면 테일윈드에서 바로 사용할 수 있도록 지원하지 않는 css 속성을 클래스로 정의해서 사용할 수 있다고 한다. 아래처럼..

@layer utilities {
  .content-auto {
    content-visibility: auto;
  }
}

암튼 기존 프로젝트에서 모든 페이지에 중복으로 클래스를 넣어줬었는데, 이런 방식으로 코드 중복을 피하면서 스타일링을 통일하여 더 예쁘고 아름답고 귀여운 UI 를 만들 수 있다. 

 

+) chatGPT 활용해보기.

요즘 핫하다는 인공지능 친구를 써봤다. 가끔 딴소리를 하거나 그럴듯한 개소리를 하긴 하지만 뭔가 코드 레퍼런스를 보고싶거나 빠르게 구글링을 하고 싶을 때 쓰면 좋다. 내 코드를 보여주면 문제점을 찾아주나? 싶어서 이것도 물어봤는데 봐주긴 한다. 문제가 전혀 다른데에 있어서 쓸모는 없었다만. 내 코드와 질문을 이해했다는 것 자체가 매우 신기했음. 

앞으로 구글링 능력도 중요한데, ai 를 잘 다루고 제대로 질문하는 것도 필요한 능력이 될 것 같음. 이런 기술을 prompting? 이라고 하는 것 같은데.. 기회가 될 때마다 들여다 봐야겠다. 일단은 내가 코드를 잘 분석하고 이해하는게 먼저같음(당연한소릴)