$$config title: 클래스 101 - 테일윈드와 반응형 UI keywords: - IT - 반응형 UI - 테일윈드 $$ # 수업 - [주소 : https://slog.gg/p/7828](https://slog.gg/p/7828) # 관련링크 - [테일윈드 - 공식문서](https://tailwindcss.com/) - [테일윈드 - 치트시트](https://nerdcave.com/tailwind-cheat-sheet) - [테일윈드 - 공식문서 - 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) - [테일윈드 - 공식문서 - Container](https://tailwindcss.com/docs/container) - [테일윈드 - 공식문서 - Screens](https://tailwindcss.com/docs/screens) # 관련 소스코드 ```html ``` ```css /* 폰트 시작 */ @font-face { font-family: "GmarketSansMedium"; src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff") format("woff"); font-weight: normal; font-style: normal; } html > body { font-family: "GmarketSansMedium"; } /* 폰트 끝 */ ``` # ?️ 챕터 0 : 인사 ## 소요시간 : 2분, 누적 2분 # ?️ 챕터 1 : 테일윈드 소개 ## 소요시간 : 3분, 누적 5분 $$ppt title: ? PPT 테일윈드 소개 # Tailwind CSS란? - Adam Wathan이 고안하고, Tailwind Labs에서 개발하고 있는 CSS 프레임워크다. - Utility First CSS 프레임워크 이다. # 기존 소스코드 ## HTML ```html

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

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

``` # ?️ 챕터 7 : 테일윈드 방식으로 사각형 만들기 ## 소요시간 : 3분, 누적 17분 - [문제](https://codepen.io/jangka44/pen/xxWxedb?editors=1000) - [정답 - 결과](https://codepen.io/jangka44/debug/ZExEZKP) - [정답](https://codepen.io/jangka44/pen/ZExEZKP?editors=1000) - ![img](https://i.imgur.com/48ktCHT.png) ```html

``` # ?️ 챕터 8 : 이벤트 메뉴 구현하기 ## 소요시간 : 3분, 누적 20분 - [문제](https://codepen.io/jangka44/pen/ZExYEbJ?editors=1000) - [정답 - 결과](https://codepen.io/jangka44/debug/YzaPzzB) - [정답](https://codepen.io/jangka44/pen/YzaPzzB?editors=1000) - ![img](https://i.imgur.com/UEICVby.png) ```html

진행중인 이벤트 전체 Big이벤트 기획전 사전 혜택 수강 매거진 당첨자 기타

``` # ?️ 챕터 9 : 테일윈드 없이 2차 메뉴 만들기 ## 소요시간 : 1분, 누적 21분 - [문제](https://codepen.io/jangka44/pen/oNqNKOZ?editors=1100) - [정답 - 결과](https://codepen.io/jangka44/debug/eYMmOvZ) - [정답](https://codepen.io/jangka44/pen/eYMmOvZ?editors=1100) - ![img](https://i.imgur.com/kM0jxwP.png) ```html ``` # ?️ 챕터 10 : 테일윈드 방식으로 메뉴 만들기 ## 소요시간 : 5분, 누적 26분 - [문제](https://codepen.io/jangka44/pen/qBoEWGY?editors=1000) - [정답 - 결과](https://codepen.io/jangka44/debug/zYWxOPZ) - [정답](https://codepen.io/jangka44/pen/zYWxOPZ?editors=1000) - ![img](https://i.imgur.com/kM0jxwP.png) ```html ``` # ?️ 챕터 11 : 반응형 이미지 리스트 ## 소요시간 : 4분, 누적 30분 - [문제](https://codepen.io/jangka44/pen/KKowKgW?editors=1000) - [정답 - 결과](https://codepen.io/jangka44/debug/LYdEYZX) - [정답](https://codepen.io/jangka44/pen/LYdEYZX?editors=1000) - ![img](https://i.imgur.com/A4ptyRk.png) ```html

``` # ?️ 챕터 12 : 반응형 상품 리스트 ## 소요시간 : 5분, 누적 35분 - [문제](https://codepen.io/jangka44/pen/poLvoPw?editors=1000) - [정답 - 결과](https://codepen.io/jangka44/debug/ExEaxZR) - [정답](https://codepen.io/jangka44/pen/ExEaxZR?editors=1000) - ![img](https://i.imgur.com/9235TtE.png) ```html

``` # ?️ 챕터 13 : 테일윈드 없이 만드는, 이미지 호버 효과 ## 소요시간 : 5분, 누적 40분 - [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) # ?️ 챕터 14 : 이미지 호버 효과를 테일윈드 방식으로 변경, 1단계, before ## 소요시간 : 3분, 누적 43분 - [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) # ?️ 챕터 15 : 이미지 호버 효과를 테일윈드 방식으로 변경, 2단계, 이미지 ## 소요시간 : 3분, 누적 46분 - [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) # ?️ 챕터 16 : 이미지 호버 효과를 테일윈드 방식으로 변경, 3단계, after ## 소요시간 : 3분, 누적 49분 - [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) # ?️ 챕터 17 : 반응형 이벤트상품리스트에 이미지 호버효과를 적용해주세요. ## 소요시간 : 1분, 누적, 누적 50분 - [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) # ?️ 챕터 18 : 정리 ## 소요시간 : 2분, 누적 52분 $$ppt title: ? PPT 테일윈드 소개 # Tailwind CSS란? - Adam Wathan이 고안하고, Tailwind Labs에서 개발하고 있는 CSS 프레임워크다. - Utility First CSS 프레임워크 이다. # 기존 소스코드 ## HTML ```html

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

``` # 막 사용해도 괜찮습니다. - 프론트엔드의 유통기한을 보통 짧습니다. - 어느정도의 중복은 괜찮습니다. - 개발자가 가장 좋아하는 CSS 프레임워크 1위인 테일윈드 $$ # ?️ 챕터 19 : 몰입코딩 수업안내 ## 소요시간 : 2분, 누적 54분 - [풀스택 리액트 개발자 취업을 위한 핵심 커리큘럼 by 몰입코딩](https://class101.page.link/urm3) - [TypeScript를 100% 활용한 풀스택 개발 프로젝트](https://class101.page.link/F4Fa) # ?️ 챕터 20 : QNA ## 소요시간 : 6분, 누적 60분 - QNA