$$config title: 클래스 101 - 테일윈드 keywords: - IT - 반응형 웹 UI - 테일윈드 $$ # 수업 - [주소 : https://slog.gg/p/7719](https://slog.gg/p/7719) # 챕터 1 : codepen.io 소개 - [codepen.io](https://codepen.io/pen) # 챕터 2 : codepen.io 가입 - [codepen.io - 가입](https://codepen.io/accounts/signup/user/free) - GITHUB 계정이 있다면, GITHUB 계정으로 가입 - 그렇지 않다면, Sign Up with Email - Your Name : 한글이름 - Choose a username : 로그인아이디 - Email : 이메일 - Choose Password : 비밀번호 - 가입 후 이메일인증 # 챕터 3 : codepen.io 에디터 설정 세팅 - [codepen.io - 에디터 설정 세팅](https://codepen.io/settings/editor) - Syntax Highlighting : High Contrast Dark or High Contrast Light - Code Font Family : Hack - Auto Update Preview : 체크 - Autocomplete : 체크 # 챕터 4 : codepen.io 펜 사용법 - [codepen.io - 펜](https://codepen.io/pen) - 세팅 - 우측 상단에 Settings 우측에 레이아웃 버튼 - 좌측 메뉴 선택 - 저장 - Ctrl + S - 소스코드 실행 - 좌측의 소스코드를 입력하면, 우측에 자동으로 결과가 나옵니다. # 챕터 5 : 테일윈드 없이 사각형 만들기 - [문제](https://codepen.io/jangka44/pen/yLKLrJR?editors=1100) - [정답](https://codepen.io/jangka44/pen/rNdNbMb?editors=1100) - ![img](https://i.imgur.com/48ktCHT.png) - ```html

``` # 챕터 6 : 테일윈드 방식으로 사각형 만들기 - [문제](https://codepen.io/jangka44/pen/xxWxedb?editors=1000) - [정답](https://codepen.io/jangka44/pen/ZExEZKP?editors=1000) - ![img](https://i.imgur.com/48ktCHT.png) - ```html

``` # 챕터 2 : 테일윈드 소개 $$ppt title: PPT 테일윈드 소개 # Tailwind CSS란?--o--CLASS=h1-top - Adam Wathan이 고안하고, Tailwind Labs에서 개발하고 있는 CSS 프레임워크다. - Utility First CSS 프레임워크 이다. # 기존 소스코드--o--CLASS=h1-top ## HTML ```html

``` ## CSS ```css .box-1 { width: 4rem; height: 4rem; background-color:red; } ``` # 테일윈드 방식--o--CLASS=h1-top ## HTML ```html

``` $$ - [테일윈드 - 공식문서](https://tailwindcss.com/) - [테일윈드 - 치트시트](https://nerdcave.com/tailwind-cheat-sheet) ```html ``` # 챕터 3 : 테일윈드 사용, JIT MODE ```html

``` - [테일윈드 - 공식문서 - Handling Hover, Focus, and Other States](https://tailwindcss.com/docs/hover-focus-and-other-states) - [테일윈드 - 공식문서 - JIT 모드 메뉴얼](https://v2.tailwindcss.com/docs/just-in-time-mode) # 챕터 3 : 테일윈드 사용, JIT MODE ```html

텍스트

``` # 챕터 4 : 테일윈드 사용, JIT MODE ```html

``` - [클래스101 - 이벤트](https://class101.net/events) - ![이미지](https://i.imgur.com/UEICVby.png) # ?️ 챕터 5 : 반응형 상품리스트 구현 ## 6강 - [테일윈드 - 공식문서 - Container](https://tailwindcss.com/docs/container) - [테일윈드 - 공식문서 - Screens](https://tailwindcss.com/docs/screens) ```html

``` ```html

``` - [클래스101 - 이벤트](https://class101.net/events) - ![이미지](https://i.imgur.com/fQcjM6b.png) # ?️ 챕터 7 : 호버효과 ## 8강 - [영상 - 8강, 이미지 호버 효과](https://youtu.be/3CVK4nxvqhg) - [CODEPEN - 시작](https://codepen.io/jangka44/pen/dydZBLb?editors=1000) - [CODEPEN - 정답 미리보기](https://codepen.io/jangka44/debug/xxYPoJm) - [CODEPEN - 정답](https://codepen.io/jangka44/pen/xxYPoJm?editors=1000) 이미지 호버 효과를 테일윈드 방식으로 변경, 1단계, before - [CODEPEN - 시작](https://codepen.io/jangka44/pen/xxYPoJm?editors=1000) - [CODEPEN - 정답 미리보기](https://codepen.io/jangka44/debug/yLvKEGd) - [CODEPEN - 정답](https://codepen.io/jangka44/pen/yLvKEGd?editors=1000) 이미지 호버 효과를 테일윈드 방식으로 변경, 2단계, 이미지 - [CODEPEN - 시작](https://codepen.io/jangka44/pen/yLvKEGd?editors=1000) - [CODEPEN - 정답 미리보기](https://codepen.io/jangka44/debug/XWZEBjj) - [CODEPEN - 정답](https://codepen.io/jangka44/pen/XWZEBjj?editors=1000) 이미지 호버 효과를 테일윈드 방식으로 변경, 3단계, after - [CODEPEN - 시작](https://codepen.io/jangka44/pen/XWZEBjj?editors=1000) - [CODEPEN - 정답 미리보기](https://codepen.io/jangka44/debug/xxYWJQp) - [CODEPEN - 정답](https://codepen.io/jangka44/pen/xxYWJQp?editors=1000) 반응형 이벤트상품리스트에 이미지 호버효과를 적용해주세요. - [CODEPEN - 시작](https://codepen.io/jangka44/pen/NWyYBWo?editors=1000) - [CODEPEN - 정답 미리보기](https://codepen.io/jangka44/debug/oNEqPaK) - [CODEPEN - 정답](https://codepen.io/jangka44/pen/oNEqPaK?editors=1000)