Thumbnail
개발 · 프로그래밍 웹 개발

쉽고 빠른 스타일링 Tailwind CSS 기초 가이드

(4.9)
9개의 수강평 ∙ 384명의 수강생

22,000원

지식공유자: The Oreum
총 24개 수업 (2시간)
수강기한: 무제한
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가 공유
초급자를 위해 준비한
[웹 퍼블리싱, 웹 개발] 강의입니다.

'HTML을 떠나지 않고 빠르게 빌드하는 모던 웹사이트' 구축을 가능하게 만드는 'Tailwind'를 소개합니다!

✍️
이런 걸
배워요!
Tailwind CSS의 기본 속성
Tailwind에서의 flex&grid, transition, animation
유틸리티 클래스 추가 설정
반응형 설계와 SVG 컨트롤
Tailwind에서 공식적으로 지원하는 플러그인
반응형 이력서 만들기

이런 걸 만들 수 있어요!

Tailwind CSS를 활용하여 반응형 이력서 만들기📝

 

[PC/모바일 화면]

 

많은 기업에서 주목하는
Tailwind CSS

CSS 문서로 가지 않고 오직 HTML 문서 내에서 웹사이트 구축이 가능하도록
빠르게 빌드하는 모던 웹사이트입니다.

이를 실현하기 위해 미리 구현해놓은 클래스를 사용하여
스타일링 작업을 수행합니다.

만족도사용량을 통해 관심도가 높아지고 있다는 점을 알 수 있습니다.


강의에서 무엇을 배우나요? 🕵️‍♀️

  1. 공식 홈페이지에서 소개하는 기본 예제 다뤄보며 Tailwind 맛보기
  2. Tailwind의 기본 속성 알아보기
  3. Tailwind에서의 flex&grid, transition, animation
  4. 유틸리티 클래스 추가 설정으로 보다 효율적으로 사용하는 법 맛보기
  5. 반응형 설계와 SVG 컨트롤
  6. Tailwind에서 공식적으로 지원하는 플러그인
  7. 반응형 이력서 만들기


이런 분들께 추천드려요 ✨

요즘 핫한 Tailwind가
뭔지 궁금하신 분

Tailwind로 나만의
이력서 만들고싶은 분

프로젝트에 필요한
CSS 지식이 부족한 분

빠르게 웹사이트를
만들고싶은 분

Tailwind는
만족도가 높아요 💁‍♂️

👌 오직 HTML 문서만 보면 된다.

👌 클래스 이름 고민 no, 협업 문제 no!

👌 유지보수에 용이하다.

👌 쉽고 빠르게 웹사이트 구축 가능하다.

지식공유자가 알려주는
강의 수강 꿀팁!
🎓
이런 분들께
추천드려요!
회사에서 Tailwind를 도입한 개발자
Tailwind가 무엇인지 궁금하신 분
요즘 핫한 Tailwind로 나만의 이력서를 만들고 싶은 분
간단한 웹사이트를 만들고 싶지만 CSS 지식이 부족한 분
쉽고, 빠르게 웹사이트를 만들고 싶은 분
📚
선수 지식,
필요한가요?
HTML
CSS

안녕하세요
The Oreum 입니다.
The Oreum의 썸네일

더 오름은 제주코딩베이스캠프의 프리미엄 브랜드로 주로 실무, 취업과 연관된 강의를 제작하고 있습니다.

제주코딩베이스캠프에서 이론적인 지식을 획득하셨다면, 더 오름의 실전 강의들을 통해 포트폴리오와 실무 능력들을 모두 가져가세요! 

" 2%를 채우기 위한 여러분의 집념과 열정을 응원합니다! "

공동 지식공유자: 제주코딩베이스캠프의 썸네일 Hojun Lee의 썸네일
커리큘럼 총 24 개 ˙ 2시간의 수업
이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 강의소개 및 강의 자료
강의 소개 미리보기 01:04
강의 자료(노션 페이지 링크)
코딩 연습장 미리보기 제코베 포트폴리오 템플릿 미리보기
제코베 챌린지
제코베 챌린지(개발자 버전)
섹션 1. Tailwind CSS
Tailwind CSS 소개 미리보기 03:47 기본 예제 다뤄보기 미리보기 09:14 기본 속성 살펴보기 미리보기 06:25
flex 17:44
grid 12:14
transition 02:45
animation 01:16
쇼핑몰 카드(공식홈페이지 예제 살펴보기) 01:53
유틸리티 클래스 추가 설정 04:34
CDN 고급 사용법과 CLI 환경 구축 07:18
반응형 03:01
SVG 04:13
그 외 알아두면 좋은 것들 02:38
반응형 이력서 만들기 24:27
[부록] config 수정을 통한 px단위 컨트롤 06:47
[공지] Tailwind v3.1 업데이트 관련
섹션 2. React에서 Tailwind css 사용하기
React 프로젝트 생성, 배포하기 07:25
tailwindcss 설치하고 실행해보기 03:18
강의 게시일 : 2022년 05월 10일 (마지막 업데이트일 : 2022년 07월 20일)
수강평 총 9개
수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.
4.9
9개의 수강평
5점
4점
3점
2점
1점
VIEW 좋아요 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
이원영 thumbnail
tailwindcss를 전반적으로 빠르게 습득하는데 도움이 많이 되는 강의였던거 같습니다. 거기다가 기본적으로 요즘 많이 쓰는 리액트의 기본까지 부록으로 해주신것은 센스있으신것 같습니다. 이제 전반적으로 강의를 들었고 느는것은 사용하는것인데.. 그것에 대한 내용이 있었으면 더 좋았던것 같습니다.
2022-09-12
권성우 thumbnail
상당히 친절하고 깔끔한 강의입니다. 공식문서 먼저 보기 귀찮으신 분들 이 강의 먼저 들으시고 공식문서 보시면 이해하기 수월할 것 같습니다.
2022-08-03
바로서기 thumbnail
이 강의의 장점은 짧은 시간에 군더더기 없이 빠른 흐름으로 내용을 전달합니다. 강의의 목적에 맞춰 불필요한 부분이 거의 없고 이 점에서 웹 퍼블리싱 경험이 없는 사람들에게는 도움이 되는 강의라고 생각합니다. 하지만 반대로 다른 CSS 프레임워크를 다루어본 적이 있는 사람에게는 너무 기초적인 내용만 전달한다는 생각이 들 겁니다. 더군다나 최근의 트렌드에 따라 tailwincss라는 새로운 툴을 배우려는 사람에게는 고유의 설정이나 기능은 많이 다루지 않기 때문에 이 부분에서 실망할 수 있습니다. 그런 점에서 향후 tailwindcss의 고급 기능을 다루는 별도의 강의가 추가되었으면 하는 바람이 듭니다.
2022-06-03
baby4 thumbnail
수업 잘 들었습니다
2022-09-08
미스터몽키 thumbnail
최신 트랜드 tailwindcss 에 대해 핵심을 빠르게 익힐 수 있어 너무 좋네요. 또한 vscode 유용한 단축키나 개발에 필요한 유용한 지식도 중간 중간 알려주셔서 너무 좋았습니다. 동영상 편집을 잘 하셔서 지루하지 않게 빠르게 공부할 수 있었어요. 좋은 강의 다음에 또 부탁할게요~
2022-08-11