강의 목표

Tailwind CSS의 기초에 대해 학습하고 실습을 진행합니다.

 

강의 내용 정리

강의시간에 학습한 내용을 정리합니다.

 

TailwindCSS의 특징

  • CSS 속성을 타이핑하지 않아도 된다.
  • CSS 속성에 어떤 값을 사용할지 크게 고민하지 않아도 된다.
  • CSS 클래스 이름을 짓느라 고민하지 않아도 된다.
  • 더 이상 사용하지 않는 CSS 클래스들을 정리하는데 시간을 쓰지 않아도 된다.

→ 더 빨리 구현할 수 있고, 더 적은 시간으로 유지 보수할 수 있다.

 

Utility First 접근법의 정의

  • 어떤 스타일을 구현할 때 유틸리티 클래스들을 최대한 이용해 구현한다.
  • 모든 CSS 들을 속성들에 대해서 유틸리티 클래스들이 촘촘하게 정의되어있다.
  • 웬만한 경우에는 이 유틸리티 클래스들을 조합하는 것 만으로도 원하는 스타일을 구현할 수 있다.

 

Utility First 접근법은 인라인 스타일의 차이점

유틸리티 클래스 인라인 스타일링
미리 정의된 값 사용 아무 값이나 지정
반응형 디자인 가능 반응형 디자인 불가능
hover, focus등 상태 변경 대응 가능 hover, focus등 상태 변경 대응 불가능

 

 

Tailwind 학습, 실습

글자 크기 변경

  • 목표 : 특정 부분의 텍스트 크기를 키우기
  • 실습 내용
    • 키워야하는 테스트의 범위를 알려주셨는데 그 부분을 감싸는 상위 태그가 뭔지 먼저 찾아보았다.
    • 배경색을 입혀서 해당 태그가 어느 범위를 감싸는지 확인했고 text-base로 되어있던 부분을 text-lg로 수정하여 크기를 변경해주었다.

 

테두리 둥글기 변경

  • 목표 : 테두리의 둥글기를 변경하기
  • 실습 내용
    • rounded가 사용된 코드가 있는지 먼저 찾아보았고 이미 사용되어있었다.
    • 미리 부여된 rounded의 코드를 변경하여 둥글기를 변경했다.

 

마진값 조정하기

  • 목표 : 마진값을 조정해보기
  • 실습 내용
    • margin에 해당하는 속성인 m이 사용된 코드를 먼저 찾아보았다.
    • m 혹은 mt, mb와 같이 margin을 조정한 코드가 이미 존재했다.
    • 존재하는 값을 조정하여 값을 조정했다.
  • 새로 알게된 내용
    • 역마진이라는 것이 존재한다.
    • 보통 m-4 와 같이 마진을 부여하곤하는데 -m-4 와 같이 값을 부여하게되면 역마진으로 부여된다

 

Hover, Foucs 등의 상태 처리

  • 목표 : Hover, Foucs를 적용해보기
  • 실습 내용
    • hover action이 있었을 때 적용될 스타일링에 대한 실습을 진행했다.
    • hover하였을 때 스타일을 적용하려면 hover:bg-indigo-300과 같이 코드를 작성해주면 된다.
    • 추가로 적용해본 것
      • duration : hover로 인해 스타일이 변경되는 시간을 조정하는 것이다.

 

Pseudo Class

  • 목표 : Psedo Class를 활용하여 스타일링하기
    • first: 와 last:를 활용하여 특정한 요소에만 스타일링을 해보았다.
    • odd: even:을 활용하여 특정한 요소에만 스타일링을 해보았다.
    • from states
      • required
      • invaild
      • disabled실습 내용
    • 부모의 상태에 따라 스타일을 적용해보았다. ( group )

 

Pseudo Elements

  • 목표 : Psedo Elements를 활용하여 스타일링하기
  • 실습 내용
    • ::before , ::after
    • file, selection
    • placeholder
    • portrait, landscape
    • print
    • Attribute Selector

 

ARIA

  • Accessible Rich Internet Applications
  • 장애를 가진 분들이 웹 애플리케이션을 더 쉽게 이용할 수 있도록 도와주는 HTML 보조규칙

 

data 속성

  • 어떤 html요소에든 자유롭게 임의의 데이터를 추가할 수 있게 해주는 메커니즘
  • 조건부 스타일링에 사용된다.
  • data- 까지가 규칙이고 이후 이름은 자유롭게 설정해줄 수 있으며, 값도 자유롭게 부여할 수 있다 단, 값은 string타입으로 지정된다.
  • 참고자료

 

반응형 디자인

  • 특정화면 크기 이상에만 적용하는 스타일링
  • prefix를 사용하여 적용 ( sm, md, lg … )
  • 아래와 같이 정해져있는 breakpoint를 사용해도되고 tailwind.config.js에서 이를 커스텀 할 수도 있다.
    • sm : 640px
    • md : 768px
    • lg : 1024px
  • 어떻게 사용해서 적용하는가?
    • 더 큰 화면크기에 적용할 스타일 규칙을 프리픽스를 붙여 덮어씌우는 방식
    • 모바일의 스타일을 적용하려면 → 프리픽스를 붙이지않음 ( sm을 붙이지 않음 )

 

다크모드

  • dark: 수식어를 붙여 어두운 테마로 보일때의 스타일을 지정할 수 있음
  • OS에 지정한 사용자의 화면 테마값에 따라 적용된다.

 

스타일 재사용

  • 리액트 컴포넌트 단위로 재사용

 

커스텀 스타일

  • 스타일을 커스텀해서 지정가능
    • bg-[#bada55] , text-[#333333] , font-[22px]
  • 색상 정의, 간격 스케일 등
  • 자주 사용되는 스타일 설정같은 경우는 Tailwind 설정 파일에서 지정가능
  • 기본 스타일 지정하기
  • 페이지 전체 : <html> 이나 <body>에 스타일 추가
  • 특정요소 : @layer 지시어 사용

 

지시어와 함수

  • 지시어
    • @import와 같은 CSS 명령문으로서 Tailwind에서 커스텀하게 정의한 명령문
    • @tailwind @layer @apply 등..
    • @tailwind지시어는 Tailwind의 여러 스타일 그룹 ( base, component 등 ) 을 추가하는 명령어
    • Tailwind가 프로젝트에 로딩되는 구조
      • index.tsx에서 global.css 파일을 import
      • global.css에서는 테일윈드에서 미리 정의해놓은 클래스들을 import
      • ( @tailwind base , @tailwind components @tailwind utilities )
  • 함수
    • theme() , screen()
    • 빌드타임에 계산되어서 최종 CSS에는 상수값으로 추가됨

 

Tailwind 레이아웃

    • container
      • 화면을 좌우로 꽉 채우는 방식이 아닌 분기점을 넘길때마다 최대 너비를 고정하는 방식
      • mx-auto를 추가해서 컨테이너 안 내용들을 가운데 정렬
      • 참고 자료

 

  • display
    • block
    • inline-block
    • inline
    • flex
    • grid
    • hidden vs invisible
      • hidden : 아예 없어짐 , 자리도 차지하지 않음
      • invisible : 자리는 차지하지만 안보임
  • overflow
    • overflow-auto, overflow-x-auto
  • position
    • static
    • fixed
    • absolute
    • relative
    • sticky

 

Tailwind 플렉스박스 & 그리드

  • flex direction
    • flex-row, flex-row-reverse
    • flex-column, flex-column-reverse
  • grid-cols-*
    • grid-col-1 , grid-col-2, …
  • grid-rows-*
    • grid-row-1 , grid-row-2, …
  • gap
    • gap-1, gap-2 , …
    • gap-x-1, gap-y-2 , …
  • justify content
    • justify -start, justify-center, …
  • align items
    • items-start , items-center , …

 

Tailwind 간격/크기

  • padding
    • 내부 여백
    • top, bottom, left, right
      • pt-0 , pb-0 , pl-0 , pr-0
    • x축, y축
      • px-0 , py-0
    • 모든 방향
      • p-0
    • 화면 방향에 무관하게
      • start , end
      • ps-0, pe-0
  • margin
    • 외부 여백
    • 역마진 가능
    • top, bottom, left, right
      • mt-0 , mb-0 , ml-0 , mr-0
    • x축, y축
      • mx-0 , my-0
    • 모든 방향
      • m-0
    • 화면 방향에 무관하게
      • start , end
      • ms-0, me-0

 

Tailwind 타이포그래피, 배경, 테두리

  • font size
    • text-xs , text-sm , text-lg
    • 줄간격도 포함됨
  • font weight
    • font-thin , font-light , font-medium , font-semibold , font-bold
  • text align
    • text-left , text-center , text-justify
  • text color
    • text-색상-숫자/[투명도]
    • text-red-300/[10]
  • whitespace
    • normal
    • pre
    • pre line
    • pre wrap
  • border radius
    • rounded-none
    • rounded
    • rounded-sm , rounded-md , …
    • rounded-full
  • border width
    • border-0 , border-2 , …
  • border color
    • border-색상-숫자

 

Tailwind 효과, 필터 등

  • box shadow
    • shadow-sm , shadow , shadow-md
    • shadow-inner
  • box shadow color
    • shadow-${색상명}-${숫자}
  • opacity
    • opacity-0
    • opacity-5
    • opacity-10 , …
  • drop shadow
    • drop-shadow , drop-shadow-sm , drop-shadow-md , …
    • 그냥 shadow와의 차이는?
      • shadow는 일반적인 도형형태에 적용
      • drop-shadow는 텍스트나 svg같이 비정형적인 형태에 적용
  • transition
    • transition-all
    • transition-colors
    • transition-opacity
  • transition 지속 시간
    • duration-0
    • duration-75
    • duration-100 , …
  • transition 시간 함수
    • ease-linear
    • ease-in
    • ease-out
    • ease-in-out
  • transition 딜레이 ( 시작되는 타이밍을 늦춤 )
    • delay-0
    • delay-75
    • delay-100 , …
  • animation
    • animation-spin
    • animation-ping
    • animation-pulse
    • animation-bounce
  • scale
    • scale-0
    • scale-50
  • rotate
    • rotate-0
    • rotate-45
    • rotate-90
  • translate
    • 이동 , 음수가능
    • translate-y-6
    • -translate-y-6
    • translate-x-6
  • skew
    • 뒤틀기
    • skew-x-3
    • skew-y-3
  • 마우스 커서
    • cursor-pointer
    • cursor-text
    • cursor-move
    • …
  • caret color
  • resize
    • resize-x
    • resize-y
    • resize
  • text select
    • select-none
    • select-text
    • select-all
  • screen reader
    • sr-only : 스크린 리더기에서만 표시되고 일반화면에서는 감추기

 

Tailwind 사용시 주의점

  • 클래스 이름을 동적으로 만들지 않기
    • Tailwind는 정규표현식을 이용해 소스파일안에 선언된 유틸클래스들을 추출함
    • 예시
// 잘못된 예시
<div class="text-{{ error ? 'red' : 'grren' }}-600"></div>

// 적절한 예시
<div class=" error ? 'text-red-600' : 'text-green-600' }}"></div>

// 요약
// -> 부분적으로 적을 수 없고 적절한 예시와 같이 한번에 적어줘야한다.

 

Tailwind 커스텀화하기

  • tailwind.config.js 파일에서 설정변경
  • Theme
    • 색상표, 폰트, 화면분기점, 간격 스케일…
    • 기본 설정값을 덮어쓰거나 → Tailwind에서 제공하는 설정은 무시하고 새로 재정의
    • 기본 설정값에 새로운값을 추가할 수 있다. → 기존 설정은 유지하고 새로운 값만 추가 ( extends ) ex) 브랜드 컬러 추가
  • important
    • Tailwind의 유틸 클래스들이 !important 플래그로 적용할지 여부
    • 모든 유틸 클래스에 대해서 일괄적으로 적용하기
    • 모든 경우에 적용하면 inline스타일보다도 우선순위가 높아지는 문제발생
    • 인라인 스타일 보다는 우선도가 낮으면서 유틸클래스 적용하기
    • 또는 개별적으로 유틸클래스 이름 앞에 느낌표(”!”)를 붙여서 사용하기

 

Tailwind와 UI 라이브러리

  • Tailwind를 UI라이브러리와 같이 사용하기
  • 디자인팀이 있는 경우 → radix UI , HeadlessUI
  • 디자인팀이 없는 경우 → MUI , nextui

 

실습예고

  • nextui의 select 컴포넌트를 이용하여
    • 다음 이미지와 같은 셀렉트 컴포넌트를 만드는데
    • 커스텀 색상을 정의한 뒤(codeit_purple: #6500c3)
    • 컴포넌트가 포커스 됐을 때는 테두리가 codeit_purple로 바뀌고
    • 선택창이 열렸을 때는 아래 두 모서리가 직각이 되며
    • chevron 아이콘 애니메이션은 “ease in out” 타이밍으로 동작하고
    • chevron 아이콘 애니메이션 지속 기간은 250ms 가 되도록

 

반응형
저작자표시 비영리 변경금지 (새창열림)

'교육 > 코드잇 스프린트 : 단기심화 5기' 카테고리의 다른 글

[ 코드잇 스프린트 ] 교육기간 6일차 TIL  (3) 2024.11.15
[ 코드잇 스프린트 ] 교육기간 5일차 TIL  (1) 2024.11.14
[ 코드잇 스프린트 ] 교육기간 4일차 TIL  (3) 2024.11.13
[ 코드잇 스프린트 ] 교육기간 3일차 TIL  (0) 2024.11.12
[ 코드잇 스프린트 ] 교육기간 2일차 TIL  (0) 2024.11.08

티스토리툴바