뒤로 가기
홈으로 이동
LearnFit
공유하기
YouTube, Tailwind in 100 Seconds

Tailwind CSS 100초 설명

#app development
#lesson
#tailwind
#tailwindcss
#webdev
#web design
#css
#전체
#개발자
#프론트엔드
00:00카카오엔터테인먼트 FE개발팀의 Tailwind CSS 적용기에 대한 post도 참고해보세요. https://fe-developers.kakaoent.com/2022/220303-tailwind-tips/
00:07tailwind가 왜 필요한가? css, design, 특히 css 클래스 네이밍은 어렵다
00:24유틸리티 클래스 통한 css 적용
01:08단점으로서 가독성에 방해될 수 있는 지저분한 html 코드의 반복은 피하기 어려움
01:18tailwind css 코드를 간결하게 바꿀 수 있는 apply directive 문법 제공
01:47tailwind css가 제공하는 수 많은 유틸리티 클래스를 외울 필요는 없고, vscode 등 에디터에서 제공하는 자동완성 기능을 활용하면 편리함 : VSC Extension -> 'Tailwind CSS Intellisense' or 'HTML CSS Support'
02:01tailwind css 클래스 커스터마이징이 가능함
✔ 학습 완료
댓글 3
Jinie의 프로필 이미지
Jinie
한 달 전
지난번 플런저 디자인작업중 알려주싄 vscode 익스텐션프로그램이 여기 소개되어있었네용!!ㅋㅋ 다음부턴 올려주시는 내용 조금더 꼼꼼히 볼게용 :)
댓글 달기
👍👍👍 덕분에 빨리 학습을 마칠 수 있었습니다! 감사해요!
댓글 달기
서원석의 프로필 이미지
서원석
2달 전
요즘 Tailwind CSS에 관심이 많았는데 유용하네요~! 👍
댓글 달기

이런 러닝패스는 어때요?

테크주니어님의 다른 노트는 어때요?

테크주니어의 프로필 이미지
테크주니어
의 학습노트

CSS 강의 Ep05_2 - Box Model | border | 웹 개발 입문 | 함께 웹 개발에 입문해 보는건 어떨까요?

영상 재생 모양 아이콘
Video
⏱ 핵심 스탬프
11
00:18
Border에 대한 개념적 설명 : border는 HTML 요소의 테두리를 설정
00:33
Border의 속성 'border-style'에 대한 설명
👍
5
스크랩
테크주니어의 프로필 이미지
테크주니어
의 학습노트

CSS Tutorial For Beginners 42 - Width & Height

영상 재생 모양 아이콘
Video
⏱ 핵심 스탬프
4
00:39
width, height 설명을 위한 예제 코드에 대한 설명
01:51
'px'(본 강의에서는 static width로 표현)로 block level 엘리먼트에 width, height 값을 적용
👍
1
스크랩
👋 다양한 인사이트를 읽어보고 계신가요?
나만의 학습 기록을 남기고, 관리하고 싶다면!
다양한 전문가의 멤버십 전용 콘텐츠를 보고 싶다면!
나의 학습 내용을 공유하고, 수익을 올리고 싶다면!
3초 회원가입/로그인으로, 런핏의 커뮤니티에 여러분도 함께하세요.
3초 만에 가입하기