2024-07-09🤣 TIL - TailwindCSS

방학하고 일본 여행 다녀오고 다시 본격적으로 공부를 해보겠습니다...
이번 방학의 목표는 우선순위 순서대로

1. 백엔드 사용한 프로젝트 하나 하기
2. LLM langchain 한번 써보기
3. 일본어 & 영어 공부

가 될 것 같습니다. 오랜만에 다시 노트북을 켜서 한 일은...
폰트 변경..ㅎ 예뻐야 할 맛 나니까~ 2019년인가 이후로 한번도 VSCODE 폰트를 안바꾼거 같은데
https://github.com/JetBrains/JetBrainsMono
이걸로 바꾸고 깔끔하게 하지메마쇼~ 始めましょう。
 
오늘은 백엔드를 위해 Nomad Coder 캐럿마켓 2024 버전을 들을 겁니다.
첫날이니까 #3 [🔥 2024 UPDATE 🔥] TAILWIND 를 깔끔하게 마무리 해보죠. 
 

Tailwind

웹페이지를 만들다 보면 꼭 만나게 되는 것들 중 하나.
Tailwind 또는 styled-compenents 둘다 CSS를 좀더 체계적이고 편하게 사용하게 해준다.
이번 강의에서는 tailwind 를 사용해 공부해본다.
 
새로 안 사실

• negative margin - 아니 이걸 처음 알았네, 더 가깝게 하고 싶으면 이걸 쓰면 된다.
• 맨날 헷갈리는 거 - justify-content는 x축, align-items는 y축
• modifiers - 특정 조건이 만족할때 다른 css가 적용되도록 하는 것, 함수도 tailwind 속성도 아니고 sudo-class
  • active : 마우스를 누르는 상태일 때
  • focus : 키보드로 눌렀거나, 마우스 눌렀을 때
  • ring : outline과 비슷하나 variable로 할 수 있는 게 더 많음, 자유도가 높음
  • invalid : 뭔가 vaild하지 않을 때 적용
  • first : 말그래도 첫번째 element
  • empty : skeleton을 생성 가능, 아직 정보를 못가져왔을 때 활용할 수 있지 않을까 생각
• 가장 작은 screen이 기본, 크기 별로 modifier 적용하면 적어도 그 크기일때 적용
• 그라데이션 - from, via, to 로 설정 가능
• modifier 연결 법 : focus:invalid:ring-red-500
• peer & group
• has
  • has-[.peer]:bg-green-100 - peer라고 불리는 child를 갖고 있으면 배경화면 변경
  • bg-red-100:has(:invalid) - invalid가 있는지 확인
• https://tailwindcss.com/docs/plugins

Plugins - Tailwind CSS

• https://daisyui.com/

daisyUI — Tailwind CSS Components ( version 4 update is here )

 
휴! 직접해보는 것 만큼 공부가 잘되는 건 없다고 생각해,
간단한 링크트리 웹사이트를 만들어봤다
또 똑같은 코드를 반복해서 적는 나쁜짓을 하다가 고쳤다!

방학동안 다같이 TIL쓰면서 공부해 보자고~~