22+DAY_멋사 프론트엔드 부트캠프 14기_TIL
What I Learned Today
전에는 CSS에서 반응형 디자인을 다뤘었다.
하지만 오늘은 tailwind에서의 반응형 디자인을 배웠다.
생각보다 문법이 간단하다. 하지만 접두사를 알아야한다.
sm | 640px | @media (width >= 40rem) { … }
md | 768px | @media (width >= 48rem) { … }
lg | 1024px | @media (width >= 64rem) { … }
xl | 1280px | @media (width >= 80rem) { … }
2xl | 1536px | @media (width >= 96rem) { … }접두사는 이렇게 있고 사용 방법은 이렇다.
<!-- 기본 사용법 -->
<div class="md:tailwind 스타일">
<!-- 범위 사용법 -->
<!-- md~xl 까지는 tailwind 스타일 적용 -->
<div class="md:max-xl:tailwind 스타일">
사용자 정의 스타일에 대해서도 배웠는데 이는 tailwind에서 사용자 원하는 css 스타일을 사용하는 방법이다.
tailwind에 기본적으로 포함되어 있지 않은 CSS 속성을 사용해야 하는 경우에도 사용한다.
이때는 tailwindCSS의 대활호 표기법을 사용하면 된다.
<!-- width:117px -->
<div class = "w-[117px]">또는 CSS 커스텀 속성을 사용할 수도 있다.
<div class="fill-(--사용자 속성)">;하지만 이렇게 사용한다면 무슨 값을 전달하려고 하는지 모호해질때가 있다. 그럴때는 데이터 유형을 추가해줘야 한다.
<!-- 폰트 사이즈를 사용하고 싶을때 length를 준다. -->
<div class="text-(length:--커스텀 속성)">
<!-- 폰트 색상을 사용하고 싶을때 color를 준다. -->
<div class="text-(color:--커스텀 속성)">
디렉티브는 CSS에서 사용할 수 있는 tailwind 전용 사용자 지정 규칙이다.
@import를 사용하여 CSS파일을 인라인으로 가져올 수 있다.
- @theme : 글꼴, 색상, 여백, 중단점과 같은 프로젝트의 사용자 정의 디자인 토큰을 정의할 수 있다.
- @source : tailwindCSS의 자동 콘텐츠 감지에서 선택되지 않은 소스 파일을 명시적으로 지정할 수 있다.
- @utility : 사용자 정의 유틸리티 스타일을 구성할 수 있다.
- @apply : HTML 요소 class 속성에 부여한 수많은 유틸리티를 스타일 유틸리티 클래스 이름을 분리하여 관리할 수 있다.
오후에는 kream UI를 tailwindCSS를 사용하여 만들었다.
tailwindCSS를 사용해보니 확실히 CSS보다 생각을 덜 하고 뚝딱 만들기는 편했다.
여기서 리팩토링을 한다면 오전에 배운 @theme에 지정해두고 가져다가 쓰는게 좋을것같다.
git rebase는 다른 브랜치의 변경사항을 현재 작업 중인 브랜치에서 적용하거나 commit을 정리하고 깔끔하게 유지할 때 사용한다.
merge와는 다르게 새로운 커밋을 만들어내지 않고 이전 커밋들을 새로운 기준점에 옮긴다.
# rebase 명령어
git rebase 브랜치명
# rebase 취소
git rebase --abort
# 충돌이 났을때 해결을 한 후
git rebase --continue
The Problem I Faced
요즘 이녀석이 말썽이다.
저기 포커스 앞에 빨간녀석,,,여드름같이 생겨서 나를 힘들게한다.
What I Tried to Do
열심히 GPT 선생님에게 물어보았다.
How I Solved It
해결하지 못했다.. 아는분은 댓글을 남겨주세요..!
So
Aha Moments
놀라운사실 ! @theme 안에서도 var을 사용하고 html에서 또 var을 사용할 수 있다.
주로 이렇게 작업한다고 들었다.
rebase -> 다른 브랜치에서 main 내용을 가져옴
merge -> main branch에 다른 브래치 내용을 가져옴