# 강사 - 이름 : 장희성 - 연락처 : 010-8824-5558 # 규칙 - 지각이나 결석시에 장희성 강사에게 개인 카톡으로 미리 알려주세요. - 학원에 나와서 5시간 동안 초집중해서 공부하겠습니다. - 쉬는시간 포함해서 PC카톡, 페이스북, 인스타그램 접속 금지 - 꼭 필요한 전화나 카톡은 쉬는시간에 해주세요. # 관련링크 - [learngitbranching.js.org](https://learngitbranching.js.org/?locale=ko) - [송채령 학생 작품](https://www.slog.gg/p/4033#f) - [혜지샘 자료](https://docs.google.com/document/d/1cNrTKiKU0pgH5mAd7o9MK1W_q75EHOkCUK8HwlZ_NB8) - [TMS - 학생 로그인 - https://sbsartdj.cafe24.com/student/index.php](https://sbsartdj.cafe24.com/student/index.php) - [코드몽키 - CODING ADVENTURE PART 1](https://app.codemonkey.com/challenges/1) - [몰입코딩 - 웹 디자인 기능사 - slog.gg/p/5406#f](https://slog.gg/p/5406#f) - [몰입코딩 - CLASS 101 - 웹코딩 기초 - https://to2.kr/bmw](https://to2.kr/bmw) - [몰입코딩 - HTML/CSS - slog.gg/p/13144#f](https://slog.gg/p/13144#f) - [몰입코딩 - JS, jQuery, DOM - slog.gg/p/11982#f](https://slog.gg/p/11982#f) - [몰입코딩 - 테일윈드 3 - slog.gg/p/13146#f](https://slog.gg/p/13146#f) - [몰입코딩 - 데이지 UI, 테일윈드 3 활용법 - slog.gg/p/13145#f](https://slog.gg/p/13145#f) - [몰입코딩 - 테일윈드 정석 사용법 - slog.gg/p/13752#f](https://slog.gg/p/13752#f) - [몰입코딩 - 부분모작 - likelion - slog.gg/p/13693#f](https://slog.gg/p/13693#f) - [몰입코딩 - Next.js - slog.gg/p/13711#f](https://slog.gg/p/13711#f) - [몰입코딩 - 스와이퍼 - slog.gg/p/13722#f](https://slog.gg/p/13722#f) - [몰입코딩 - WOW JS - slog.gg/p/13738#f](https://slog.gg/p/13738#f) - [몰입코딩 - 부분모작 - 기타 - slog.gg/p/13712#f](https://slog.gg/p/13712#f) - [몰입코딩 - 부분모작 2022 - 기타 - slog.gg/p/2707#f](https://slog.gg/p/2707#f) - [몰입코딩 - GIT/GITHUB - slog.gg/p/13751#f](https://slog.gg/p/13751#f) - [몰입코딩 - GIT 협업 - slog.gg/p/13773#f](https://slog.gg/p/13773#f) - [몰입코딩 - learngitbranching.js.org - slog.gg/p/13767#f](https://slog.gg/p/13767#f) - [몰입코딩 - GIT, 터미널, 커서, 테일윈드 - slog.gg/p/13768#f](https://slog.gg/p/13768#f) - [프로그래머스 - 자바스크립트 입문 - https://school.programmers.co.kr/learn/courses/3/3-hello-javascript-자바스크립트-입문](https://school.programmers.co.kr/learn/courses/3/3-hello-javascript-자바스크립트-입문) - GITHUB 계정으로 로그인 - GITHUB 계정이 없다면 GITHUB 부터 가입 - [몰입코딩 - REACT 2022 - slog.gg/p/4711#f](https://slog.gg/p/4711#f) - [몰입코딩 - 리액트 - slog.gg/p/13805#f](https://slog.gg/p/13805#f) - [몰입코딩 - 수파베이스 - slog.gg/p/13806#f](https://slog.gg/p/13806#f) # 포트폴리오 예시 - [프론트엔드 류대현 개발자(경력), 포트폴리오, next.js](https://portfolio2023-next.vercel.app) - [프론트엔드 김유림 개발자(신입), 포트폴리오, next.js](https://yurim-portfolio.vercel.app) - [웹 디자이너 윤서정 개발자(경력), 포트폴리오, HTML/CSS](https://seojeongyun.creatorlink.net) # 예전 학생 부분모작위키 - [박해솔님, slog.gg/p/2654](https://slog.gg/p/2654) - [최근학님, slog.gg/p/2659](https://slog.gg/p/2659) - [윤희승님, slog.gg/p/2663](https://slog.gg/p/2663) - [오지연님, slog.gg/p/2656](https://slog.gg/p/2656) - [김이홍님, slog.gg/p/2661](https://slog.gg/p/2661) - [최은미님, slog.gg/p/2654](https://slog.gg/p/2654) - [성모화님, slog.gg/p/2688](https://slog.gg/p/2688) - [정윤형님, slog.gg/p/2660](https://slog.gg/p/2660) - [송채령님, slog.gg/p/2705](https://slog.gg/p/2705) - [성원제님, slog.gg/p/2653](https://slog.gg/p/2653) - [최진우님, slog.gg/p/2658](https://slog.gg/p/2658) - [배수호님, slog.gg/p/2657](https://slog.gg/p/2657) # 블로그 - 채시현님 : [https://velog.io/@sunny98](https://velog.io/@sunny98) - 정수연님 : [https://velog.io/@jungsu1212](https://velog.io/@jungsu1212) - 이도혜님 : [https://velog.io/@ledohye](https://velog.io/@ledohye) - 임예나님 : [https://velog.io/@dlfaktm99](https://velog.io/@dlfaktm99) - 김가경님 : [https://velog.io/@gagyeong2505](https://velog.io/@gagyeong2505) - 김선민님 : [https://ksm8626.tistory.com](https://ksm8626.tistory.com) - 오승민님 : [https://imisfp.tistory.com](https://imisfp.tistory.com) - 강선우님 : [https://rainbow808.tistory.com](https://rainbow808.tistory.com) - 이자람님 : [https://velog.io/@jaram01](https://velog.io/@jaram01) - 고언정님 : [https://velog.io/@gsm07428](https://velog.io/@gsm07428) - 장주연님 : [https://velog.io/@juju0409](https://velog.io/@juju0409) - 서정우님 : [https://wjddndlek.tistory.com](https://wjddndlek.tistory.com) - 이희준님 : [https://gl8310239.tistory.com](https://gl8310239.tistory.com) - 신은지님 : [https://tlsdmswl47.tistory.com](https://tlsdmswl47.tistory.com) - 정희영님 : [https://velog.io/@lua7174](https://velog.io/@lua7174) - 남궁솔님 : [https://velog.io/@sksthf37](https://velog.io/@sksthf37) - 나은지님 : [https://skdmswl913.tistory.com](https://skdmswl913.tistory.com) # 부분모작현황 - 정수연님 : [https://slog.gg/p/13791#f](https://slog.gg/p/13791#f) - 이도혜님 : [https://slog.gg/p/13787#f](https://slog.gg/p/13787#f) - 임예나님 : [https://slog.gg/p/13789#f](https://slog.gg/p/13789#f) - 김가경님 : [https://slog.gg/p/13782#f](https://slog.gg/p/13782#f) - 채시현님 : [https://slog.gg/p/13786#f](https://slog.gg/p/13786#f) - 김선민님 : [https://slog.gg/p/13778#f](https://slog.gg/p/13778#f) - 오승민님 : [https://slog.gg/p/13788#f](https://slog.gg/p/13788#f) - 강선우님 : [https://slog.gg/p/13776#f](https://slog.gg/p/13776#f) - 이자람님 : [https://slog.gg/p/13790#f](https://slog.gg/p/13790#f) - [CODEPEN - 4차 메뉴 이상](https://codepen.io/jangka44/pen/gOVRWGm) - 고언정님 : [https://slog.gg/p/13777#f](https://slog.gg/p/13777#f) - [CODEPEN - 모바일 사이드 바](https://codepen.io/jangka44/pen/WNVKZOd) - 장주연님 : [https://slog.gg/p/13780#f](https://slog.gg/p/13780#f) - [CODEPEN - transition, transform: translateY](https://codepen.io/jangka44/pen/eYqvPoN) - [CODEPEN - left-1/2 transform -translate-x-1/2 min-w-full](https://codepen.io/jangka44/pen/vYomyex) - [CODEPEN - hover, group-hover, group-hover 이미지 교체](https://codepen.io/jangka44/pen/MWNmbVR) - [CODEPEN - background-image, background-position, background-size](https://codepen.io/jangka44/pen/RwXMGyK) - 서정우님 : [https://slog.gg/p/13779#f](https://slog.gg/p/13779#f) - 이희준님 : [https://slog.gg/p/13781#f](https://slog.gg/p/13781#f) - 신은지님 : [https://slog.gg/p/13784#f](https://slog.gg/p/13784#f) - 정희영님 : [https://slog.gg/p/13797#f](https://slog.gg/p/13797#f) - 남궁솔님 : [https://slog.gg/p/13785#f](https://slog.gg/p/13785#f) - 나은지님 : [https://slog.gg/p/13783#f](https://slog.gg/p/13783#f) # 2024-07-16 : OT # 2024-07-17 : 강의시작 # ... 생략 ... # 2024-08-12 ## 공지사항 - [24 08 12, p 13684, 1강, 코드펜 세팅법](https://youtu.be/XKcAn6AhrII) - [코드펜 - 새 코드펜 - https://codepen.io/pen](https://codepen.io/pen) - [코드펜 - 세팅 - https://codepen.io/settings/editor](https://codepen.io/settings/editor) - [24 08 12, p 13684, 2강, inline-block, inline-flex, inline 은 글자화 입니다.](https://youtu.be/fe92sp0jzvk) - [24 08 12, p 13684, 3강, 형제 엘리먼트 입장에서는 block == flex, inline-flex == inline-block 입니다.](https://youtu.be/XydtTe3w0Kk) - [24 08 12, p 13684, 4강, absolute 는 유령, relative 는 유령의 집](https://youtu.be/waTs3kocmUk) - [24 08 12, p 13684, 5강, 프로그래머스 자바스크립트 입문 하는 방법, 파트 3 자료형, String - 실습(2) 까지 진행](https://youtu.be/dFqIzfgLsDw) - [24 08 12, p 13684, 6강, block 요소를 가운데 정렬 하는 방법](https://youtu.be/815o1dgtqqA) - [CODEPEN - flex 방법](https://codepen.io/jangka44/pen/mdZBvqK?editors=1100) - [CODEPEN - margin auto 방법](https://codepen.io/jangka44/pen/QWXqYaX?editors=1100) - [24 08 12, p 13684, 7강, 화면 정중앙에 고정크기 박스 위치 시키는 방법 1(flex)](https://youtu.be/muOKmkNH_KM) - [CODEPEN](https://codepen.io/jangka44/pen/yLdzZZe?editors=1100) - [24 08 12, p 13684, 8강, 화면 정중앙에 고정크기 박스 위치 시키는 방법 2(calc)](https://youtu.be/rTz0P755Oo0) - [CODEPEN](https://codepen.io/jangka44/pen/BagwMgg?editors=1100) - [24 08 12, p 13684, 9강, 화면 정중앙에 고정크기 박스 위치 시키는 방법 3(transform), absolute 는 유령의 집 역할도 한다.](https://youtu.be/6Zo7qq3LAqM) - [CODEPEN](https://codepen.io/jangka44/pen/VwJMgNd?editors=1100) ## 수업 - [몰입코딩 - HTML/CSS - slog.gg/p/13144#f - 1강 ~ 110강](https://slog.gg/p/13144#f) # 2024-08-13 ## 공지사항 - [24 08 13, p 13684, 10강, 코드몽키 플레이 방법](https://youtu.be/hKija4WSg9g) - [코드몽키 - CODING ADVENTURE Part 1](https://app.codemonkey.com/challenges/1) ## 수업 - [코드몽키 - CODING ADVENTURE PART 1](https://app.codemonkey.com/challenges/1) # 2024-08-14 ## 공지사항 - [24 08 14, p 13684, 11강, CSS DINER 로 선택자 연습하는 방법](https://youtu.be/KLLccfxjSiE) - [CSS DINER](https://flukeout.github.io) - [24 08 14, p 13684, 12강, 오늘의 숙제](https://youtu.be/5BO7R3lCzHM) ## 수업 - [몰입코딩 - HTML/CSS - slog.gg/p/13144#f - 111강 ~ 117강](https://slog.gg/p/13144#f) ## 숙제 - [몰입코딩 - HTML/CSS - slog.gg/p/13144#f - 82강 20단계](https://slog.gg/p/13144#82강) - 조건 : 5분안에 구현 - [CSS DINER](https://flukeout.github.io) - 조건 : 5분안에 구현 - [몰입코딩 - HTML/CSS - slog.gg/p/13144#f - 117강 10단계](https://slog.gg/p/13144#117강) - 조건 : 10분안에 구현 - 이 세번째 과제는 코드펜 화면을 캡쳐해서 공유해주세요. - 과제단톡방에 캡쳐화면 인증 - EX : `2024-08-14 숙제 완료` # 2024-08-16 ## 공지사항 - [24 08 16, p 13684, 13강, 후손선택자 없이 무식하게 3차 메뉴 만들기](https://youtu.be/KSgWXZV8k2Y) - [CODEPEN](https://codepen.io/jangka44/pen/wvLpPob?editors=0100) - [24 08 16, p 13684, 14강, 후손선택자 사용해서 깔끔하게 3차 메뉴 만들기](https://youtu.be/GsrPeDgQh5c) - [CODEPEN](https://codepen.io/jangka44/pen/xxopPqL?editors=0100) - [24 08 16, p 13684, 15강, 최적화된 방법으로 4차 메뉴 만들기](https://youtu.be/6V63E_hAGsM) - [CODEPEN](https://codepen.io/jangka44/pen/RwzxjEd?editors=0100) - [24 08 16, p 13684, 16강, 위키는 공부의 시작과 끝 입니다.](https://youtu.be/8jrVLk26B28) - [마크다운 문법 - https://gist.github.com/ihoneymon/652be052a0727ad59601](https://gist.github.com/ihoneymon/652be052a0727ad59601) - [마크다운 문법 - https://www.heropy.dev/p/B74sNE](https://www.heropy.dev/p/B74sNE) - [24 08 16, p 13684, 17강, flex로 만드는 1차 메뉴](https://youtu.be/vUaLYMg6T3Q) - [CODEPEN](https://codepen.io/jangka44/pen/XWLVZqJ?editors=1100) - [24 08 16, p 13684, 18강, flex playground](https://youtu.be/k3IzNvIjfHQ) - [자료 - https://www.slog.gg/p/13144#121강](https://www.slog.gg/p/13144#121강) - [24 08 16, p 13684, 19강, flex 성배 레이아웃 설명](https://youtu.be/-qxnpNQfaZQ) - [자료 - https://www.slog.gg/p/13144#122강](https://www.slog.gg/p/13144#122강) - [24 08 16, p 13684, 20강, flex 성배 레이아웃 처음부터 끝까지 구현](https://youtu.be/th_A4dXkEOE) - [CODEPEN - 시작소스코드](https://codepen.io/jangka44/pen/eYwyVwp?editors=0100) - [CODEPEN - 완료소스코드](https://codepen.io/jangka44/pen/NWZXyZJ?editors=0100) ## 위키 글 예시 ```` # 2024-08-18 ## 자바스크립트의 역할 - 동적 인터렉션 - 사용자의 요청에 반응 - 내용 1 - 내용 2 - 내용 2-1 - 내용 2-2 # 2024-08-17 ## 자바스크립트의 역할 - 동적 인터렉션 - 사용자의 요청에 반응 # 2024-08-16 ## 다중선택자 ```css .menu-1 > ul ul { } /* 모든 서브메뉴 */ ``` ## 가장 마지막 1차메뉴의 3차 메뉴 선택 ```css .menu-1 > ul > li:last-child > ul ul { } ``` ```` ## 공부할 때 크롬탭 구성 1. 수업페이지(13684) 2. HTML 페이지(13144) 3. 위키 4. 코드몽키 5. 프로그래머스 자바스크립트 입문 6. 기타 ## 수업 - [몰입코딩 - HTML/CSS - slog.gg/p/13144#f - 118강 ~ 122강](https://slog.gg/p/13144#f) ## 숙제 - [몰입코딩 - HTML/CSS - slog.gg/p/13144#f - 118강 6단계](https://slog.gg/p/13144#118강) - 조건 : 15분안에 구현 - [몰입코딩 - HTML/CSS - slog.gg/p/13144#f - 122강 10단계](https://www.slog.gg/p/13144#122강) - 조건 : 20분안에 구현 - [구현영상](https://youtu.be/th_A4dXkEOE) - [CODEPEN - 시작](https://codepen.io/jangka44/pen/eYwyVwp?editors=0100) - [CODEPEN - 완성](https://codepen.io/jangka44/pen/NWZXyZJ?editors=0100) - 이 두번째 과제는 코드펜 화면을 캡쳐해서 공유해주세요. - 과제단톡방에 캡쳐화면 인증 - EX : `2024-08-16 숙제 완료` # 2024-08-19 ## 수업 - [몰입코딩 - 부분모작 - likelion - slog.gg/p/13693#f - 1강 ~ 12강](https://slog.gg/p/13693#f) ## 숙제 - [몰입코딩 - 부분모작 - likelion - slog.gg/p/13693#f - 12강](https://www.slog.gg/p/13693#12강) - 조건 : 10분안에 구현 - [구현영상](https://youtu.be/RyF8NfJx5Aw) - [CODEPEN - 시작](https://codepen.io/jangka44/pen/gONvXLj) - [CODEPEN - 완성](https://codepen.io/jangka44/pen/VwJQrjM) - 과제단톡방에 캡쳐화면 인증 - EX : `2024-08-19 숙제 완료` # 2024-08-20 ## 수업 - [몰입코딩 - 부분모작 - likelion - slog.gg/p/13693#f - 13강 ~ 23강](https://slog.gg/p/13693#f) ## 숙제 - [몰입코딩 - 부분모작 - likelion - slog.gg/p/13693#f - 23강](https://www.slog.gg/p/13693#23강) - 조건 : 10분안에 구현, padding-top, padding-bottom 사용금지, 높이는 오직 한 부분에만 지정, 그 높이에 따라 버튼 2개(부트캠프/국비지원, 6주완성/전액환급)의 높이도 같이 달라져야 함 - [구현영상](https://youtu.be/SwqnereBG_U) - 메뉴 아이템 회색 박스 글자색 : #737373; - 메뉴 아이템 회색 박스 배경색 : #f5f5f5; - [CODEPEN - 시작](https://codepen.io/jangka44/pen/MWMQdPx) - [CODEPEN - 시작(비기너용)](https://codepen.io/jangka44/pen/jOjzmEL) - [CODEPEN - 완성](https://codepen.io/jangka44/pen/PorQrYQ) - [CODEPEN - 완성 - 디버그모드](https://codepen.io/jangka44/debug/PorQrYQ) - 과제단톡방에 캡쳐화면 인증 - EX : `2024-08-20 숙제 완료` # 2024-08-21 ## 공지사항 - [24 08 21, p 13684, 21강, 높이는 기본적으로 auto 이다.](https://youtu.be/x69OBkiux6M) - [CODEPEN](https://codepen.io/jangka44/pen/YzoaVjW) - [24 08 21, p 13684, 22강, 테일윈드 3의 JIT 모드 설명](https://youtu.be/W9F8NiYPzfE) - [CODEPEN](https://codepen.io/jangka44/pen/bGPvRGK) - [24 08 21, p 13684, 23강, 기존 코드 분석하는 방법, 지워보고, 변경해보고, 배경색 추가](https://youtu.be/WAXAx5KTo4U) ## 추천영상 - [이래도 효과 없으면 따지러 오세요!, 황농문 교수가 추천하는 '현실적인' 몰입 훈련법](https://youtu.be/yzE9sOR0v3o) ## 수업 - [몰입코딩 - 부분모작 - likelion - slog.gg/p/13693#f - 24강](https://slog.gg/p/13693#f) ## 숙제 - [몰입코딩 - HTML/CSS - slog.gg/p/13144#f - 122강 10단계](https://www.slog.gg/p/13144#122강) - 조건 : 30분안에 구현 - [CODEPEN - 시작](https://codepen.io/jangka44/pen/xxoWLbX?editors=0100) - [CODEPEN - 완성](https://codepen.io/jangka44/pen/NWZXyZJ?editors=0100) - 과제단톡방에 캡쳐화면 인증 - EX : `2024-08-21 숙제 완료` # 2024-08-22 ## 수업 - [몰입코딩 - 부분모작 - likelion - slog.gg/p/13693#f - 25강 ~ 31강](https://slog.gg/p/13693#f) ## 숙제 - [몰입코딩 - 부분모작 - likelion - slog.gg/p/13693#f - 30강](https://www.slog.gg/p/13693#30강) - 조건 : 10분안에 구현 - [구현영상](https://youtu.be/y4iy2fDdw0U) - 단계 1. 구분선 1. 메뉴 2(이벤트, 기업 문의) 1. 맨 우측에 로그인 버튼 1. 탑바 하단에 border-bottom 1. 최상단에 top-ad-bar 1. 스크롤링(main>lorem*100) 1. sticky top-0 bg-white - [CODEPEN - 시작](https://codepen.io/jangka44/pen/jOjzwao) - [CODEPEN - 완성](https://codepen.io/jangka44/pen/KKjoJYx) - [CODEPEN - 완성 - 디버그모드](https://codepen.io/jangka44/debug/KKjoJYx) - 과제단톡방에 캡쳐화면 인증 - EX : `2024-08-22 숙제 완료` # 2024-08-23 ## 수업 - [몰입코딩 - 부분모작 - likelion - slog.gg/p/13693#f - 32강 ~ 38강](https://slog.gg/p/13693#f) - 부분모작연습 ## 숙제 - [몰입코딩 - 부분모작 - likelion - slog.gg/p/13693#f - 1강 ~ 38강](https://www.slog.gg/p/13693#f) - 내용 : 광고바, 탑바, 슬라이더 바, 상품리스트 박스까지 합치기 - 정답코드를 보거나 참고하는 것은 괜찮지만 정답 소스코드 복사는 하면 안됩니다. - 과제단톡방에 코드펜 주소를 공유 - EX : `2024-08-23 숙제 완료` # 2024-08-26 ## 공지사항 - [24 08 26, p 13684, 24강, CSS GRID 튜토리얼 - GRID 가든](https://youtu.be/tJcmDrFEwKU) - [GRID 가든 - https://cssgridgarden.com/#ko](https://cssgridgarden.com/#ko) - [24 08 26, p 13684, 25강, transition 으로 애니메이션 구현](https://youtu.be/J8zbkoJ-C60) - [CODEPEN](https://codepen.io/jangka44/pen/MWMXyMX) - [24 08 26, p 13684, 26강, transform:scale 을 이용해서 마우스 호버시 이미지 커짐 효과](https://youtu.be/heGgRs8zG_U) - [CODEPEN](https://codepen.io/jangka44/pen/qBzKZee) ## 부분모작위키 예시 ```markdown # 2024-08-26 ## 커스터멜로우 상단바 부분 모작 - [사이트](URL) ## 단계 - [1단계 - 레이아웃](CODEPEN 주소) - [2단계 - 로고 구현](CODEPEN 주소) - [3단계 - 우측 메뉴 1 구현 - 실패](CODEPEN 주소) - [4단계 - 우측 메뉴 1 구현 - 성공](CODEPEN 주소) - [5단계 - 우측 메뉴 2 구현](CODEPEN 주소) - [6단계 - 최종](CODEPEN 주소) ``` ## 수업 - [몰입코딩 - JS, jQuery, DOM - slog.gg/p/11982#f - 1강 ~ 13강](https://slog.gg/p/11982#f) - [몰입코딩 - 부분모작 - likelion - slog.gg/p/13693#f - 39강 ~ 42강](https://slog.gg/p/13693#f) - 부분모작연습 ## 숙제 - 본인만의 부분모작 완성 - 과제단톡방에 코드펜 주소를 공유 - EX : `2024-08-26 숙제 완료` # 2024-08-27 ## 공지사항 - [24 08 27, p 13684, 27강, 브라우저 개발자도구에서 스타일/계산됨을 통해서 CSS 내역 보기, background-repeat, background-size](https://youtu.be/C8z4SPyeVO4) - [CODEPEN](https://codepen.io/jangka44/pen/wvLXXdK) - [24 08 27, p 13684, 28강, background-size와 background-position 을 이용해서 스프라이트 이미지를 올바르게 활용하는 방법](https://youtu.be/FFNL_uDFIjs) - [CODEPEN](https://codepen.io/jangka44/pen/zYVaaLL) - [24 08 27, p 13684, 29강, 비디오가 첫 화면에 가득 차도록, 비디오 오토플레이](https://youtu.be/hEUofzIAesw) - [CODEPEN](https://codepen.io/jangka44/pen/abgKKgX) - [24 08 27, p 13684, 30강, 비디오를 배경으로 까는 방법](https://youtu.be/gmyXkJYZCkY) - [CODEPEN](https://codepen.io/jangka44/pen/VwJdBZw) - [24 08 27, p 13684, 31강, css ::before, ::after 개념](https://youtu.be/UKeFKhCO8-k) - [CODEPEN](https://codepen.io/jangka44/pen/wvLXxad) - [24 08 27, p 13684, 32강, mask-image 를 통해서 이미지를 보여주고, background-color 로 이미지의 색 변경](https://youtu.be/HCDIDxfNUfk) - [CODEPEN](https://codepen.io/jangka44/pen/ExBRpjM) - [24 08 27, p 13684, 33강, 가운데 로고와 우측 메뉴가 있는 탑바에서 가운데 로고를 완벽히 수평중앙에 두는 방법](https://youtu.be/VJHTFScXzCE) - [CODEPEN - 1 단계 : flex-grow 를 사용, 실패](https://codepen.io/jangka44/pen/gONKjMg) - [CODEPEN - 2 단계 : flex-1 를 사용, 성공](https://codepen.io/jangka44/pen/VwJdBKv) - [CODEPEN - 3 단계 : 추가작업, top-2-bar 추가, 거기에 sticky 적용](https://codepen.io/jangka44/pen/LYKrBbY) - [24 08 27, p 13684, 34강, CSS GRID 사용하여 복잡한 레이아웃 구현](https://youtu.be/m-jQY30kUiE) - [CODEPEN](https://codepen.io/jangka44/pen/wvLXxeP) - [24 08 27, p 13684, 35강, 호버시 모든 2차메뉴 나오고, 2차메뉴의 배경이 천천히 나타나며 펼쳐지는](https://youtu.be/1mU_OEwsC-Q) - 영상내용정정 : transition-opacity, transition-height 는 제거, duration-1000 만 있으면 됩니다. - [CODEPEN - 1 단계 : 마우스 올리면 모든 2차 메뉴가 천천히 표시됨](https://codepen.io/jangka44/pen/KKjeBGr) - [CODEPEN - 2 단계 : 마우스 올렸을 때 별도의 2차 메뉴 배경도 같이 나타남](https://codepen.io/jangka44/pen/jOjKpoX) ## 수업 - [몰입코딩 - 부분모작 - likelion - slog.gg/p/13693#f - 39강 ~ 42강](https://slog.gg/p/13693#f) - 부분모작연습 ## 숙제 - 코드몽키 진행 10문제 - 코드몽키 캡쳐화면을 공유 - EX : `2024-08-27 숙제 완료, 문제 78 ~ 89` # 2024-08-28 ## 수업 - 부분모작연습 # 2024-08-29 ## 공지사항 - [24 08 29, p 13684, 36강, 사이트에서 가져온 이미지가 코드펜에서 안나올 때는 postimage.org 에 업로드 후 이용해주세요.](https://youtu.be/U3QxrC50ZrM) - [postimage.org](https://postimage.org) - [CODEPEN](https://codepen.io/jangka44/pen/wvLXXdK) - [24 08 29, p 13684, 37강, 본인만의 웹 호스팅 서버 구축, 사이트에서 가져온 영상이 코드펜에서 안나올 때는 본인의 웹 호스팅 서버에 업로드 후 이용해주세요.](https://youtu.be/-oZzo-s8Pgw) - 리포지터리 생성 : [http://github.com/new](http://github.com/new) - 실제 URL을 GITHUB CDN URL로 변환방법 : http://cdn.jsdelivr.net/gh/{github-username}/{repo-name}/{path} - EX : `/copy/astrion.co.kr/video/main_video.mp4` - 실제 URL : [https://github.com/jhs512/2024-static/blob/main/copy/astrion.co.kr/video/main_video.mp4](https://github.com/jhs512/2024-static/blob/main/copy/astrion.co.kr/video/main_video.mp4) - CDN URL : [http://cdn.jsdelivr.net/gh/jhs512/2024-static/copy/astrion.co.kr/video/main_video.mp4](http://cdn.jsdelivr.net/gh/jhs512/2024-static/copy/astrion.co.kr/video/main_video.mp4) ## 수업 - 부분모작연습 - [몰입코딩 - JS, jQuery, DOM - slog.gg/p/11982#f - 14강 ~ 16강](https://slog.gg/p/11982#f) ## 숙제 - 코드몽키 진행 10문제 - 코드몽키 캡쳐화면을 공유 - 20분 이상 고민해도 안풀리면 다시 10문제 전으로 돌아가서 재도전 - 이 경우 재도전으로 푼 10문제도 숙제로 인정됩니다. - EX : `2024-08-29 숙제 완료, 문제 78 ~ 89` # 2024-08-30 ## 공지사항 - [24 08 30, p 13684, 38강, input, type="text", placeholder, outline](https://youtu.be/ZQjWfjTxIhk) - [CODEPEN](https://codepen.io/jangka44/pen/oNrPgQe) - [24 08 30, p 13684, 39강, 마우스 호버시 밑줄 애니메이션 효과 1](https://youtu.be/obUuPYMG_Pg) - [CODEPEN](https://codepen.io/jangka44/pen/Pordwxd) - [24 08 30, p 13684, 40강, 마우스 호버시 밑줄 애니메이션 효과 2, 가운데에서 펼쳐지는](https://youtu.be/zIaYfamlJDs) - [CODEPEN](https://codepen.io/jangka44/pen/RwzYNzJ) - [24 08 30, p 13684, 41강, 마우스 호버시 밑줄 애니메이션 효과 3, 텍스트에 딱 붙는](https://youtu.be/gVeyUSFlrbQ) - [CODEPEN](https://codepen.io/jangka44/pen/ExBeaqZ) ## 상단바 부분모작 시험 ### 체크사항 - [TMS - 학생 로그인 - https://sbsartdj.cafe24.com/student/index.php](https://sbsartdj.cafe24.com/student/index.php) - 능력단위 : `구현 응용` - 오직 상단바 부분만 구현 - 강사가 제공한 로고와 아이콘 사용 - 최대한 원본 사이트와 비슷하게 만들어주세요. - 자바스크립트를 사용하지 마세요. ### 문제 1 - [사이트](http://www.lotteamc.com) - [시작 소스코드](https://codepen.io/jangka44/pen/OJeoVWY) ### 문제 2 - [사이트](https://www.jsci.co.kr) - [시작 소스코드](https://codepen.io/jangka44/pen/MWMqwob) ### 추가 요구사항 - 2차 메뉴 아이템에 호버시 2차 메뉴 아이템 텍스트의 밑줄에 애니메이션 효과(가운데 에서 좌우로 퍼지도록) ## 수업 - 부분모작연습 - [몰입코딩 - JS, jQuery, DOM - slog.gg/p/11982#f - 17강 ~ 18강](https://slog.gg/p/11982#f) ## 숙제 - 코드몽키 진행 20문제 - 코드몽키 캡쳐화면을 공유 - 20분 이상 고민해도 안풀리면 다시 20문제 전으로 돌아가서 재도전 - 이 경우 재도전으로 푼 20문제도 숙제로 인정됩니다. - EX : `2024-08-29 숙제 완료, 문제 108 ~ 120` - 문제 1 - [사이트](http://www.lotteamc.com) - [시작 소스코드](https://codepen.io/jangka44/pen/OJeoVWY) - 문제 2 - [사이트](https://www.jsci.co.kr) - [시작 소스코드](https://codepen.io/jangka44/pen/MWMqwob) # 2024-09-02 ## 수업 - 부분모작연습 - [몰입코딩 - 부분모작 - lotteamc.com - slog.gg/p/13709#f - 1강 ~ 6강](https://slog.gg/p/13709#f) - [몰입코딩 - 부분모작 - jsci.co.kr - slog.gg/p/13710#f - 1강 ~ 7강](https://slog.gg/p/13710#f) ## 숙제 - [몰입코딩 - 부분모작 - jsci.co.kr - slog.gg/p/13710#f - 7강](https://slog.gg/p/13710#7강) - 조건 : 30분안에 구현 # 2024-09-03 ## 수업 - 부분모작연습 - [몰입코딩 - JS, jQuery, DOM - slog.gg/p/11982#f - 19강 ~ 20강](https://slog.gg/p/11982#f) - [몰입코딩 - Next.js - slog.gg/p/13711#f - 1강 ~ 6강](https://slog.gg/p/13711#f) - [몰입코딩 - 부분모작 - 기타 - slog.gg/p/13712#f - 1강 ~ 3강](https://slog.gg/p/13712#f) ## 자바스크립트 코드 작성순서 ### 완성본 ```js $('.btn-popup-1').click(function() { $('.popup-1').css('display', 'block'); }); ``` ### 작성순서 ```js // 순서 1 $('.btn-popup-1').click(/* 다음 */); // 순서 2 function() { /* 다음 */ } // 순서 3 $('.popup-1').css('display', 'block'); ``` # 2024-09-04 ## 공지사항 - [24 09 04, p 13684, 42강, display: none 과 transition 은 상극. 천천히 나타나게 할 때는 visibility:hidden 으로 숨겨두자.](https://youtu.be/dJ598Ashll0) - [CODEPEN](https://codepen.io/jangka44/pen/YzoRGaW) ## 수업 - 부분모작연습 - 피그마, 앱 화면 모작 - [몰입코딩 - JS, jQuery, DOM - slog.gg/p/11982#f - 21강 ~ ?강](https://slog.gg/p/11982#f) - [몰입코딩 - Next.js - slog.gg/p/13711#f - 7강 ~ ?강](https://slog.gg/p/13711#f) - [몰입코딩 - 부분모작 - jsci.co.kr - slog.gg/p/13710#f - 8강](https://slog.gg/p/13710#f) - [몰입코딩 - 부분모작 - 기타 - slog.gg/p/13712#f - 4강](https://slog.gg/p/13712#f) ## 피그마, 앱 화면 모작 - [참고 - 멜론](https://www.figma.com/design/lsYKaKsPkc7LHg7vjZqOd2/Untitled?node-id=4-87&node-type=CANVAS&t=zHMwGhjCysTTVpyP-0) ### 주제 : 상용 앱 1개의 화면 3장 이상 카피(피그마로 진행) - 컴포넌트 활용 - 배리언트 활용 - 오토레이아웃 활용 - 프로토타입 활용 - 조장은 공용 프로젝트 생성 후 팀원들을 초대 ### 1조 : 네이버 블로그 앱 - 김선민님 - 이도혜님 - 정희영님 - 임예나님 - 장주연님 ### 2조 : 스타벅스 - 이희준님 - 강선우님 - 김가경님 - 이자람님 ### 3조 : 올리브영 - 서정우님 - 고언정님 - 나은지님 - 신은지님 ### 4조 : 메가커피 - 오승민님 - 채시현님 - 남궁솔님 - 정수연님 ## 숙제 - [몰입코딩 - 부분모작 - 기타 - slog.gg/p/13712#f - 1강 ~ 4강](https://www.slog.gg/p/13712#1강) - 조건 : 1강 ~ 4강 영상을 보고서 구현 - 과제단톡방에 캡쳐화면 인증 - EX : `2024-09-04 숙제 완료` # 2024-09-05 ## 수업 - 부분모작연습 - 피그마, 앱 화면 모작 - [몰입코딩 - 반응형 웹 디자인 - slog.gg/p/13718#f - 1강 ~ 8강](https://slog.gg/p/13718#f) ## 피그마, 앱 화면 모작 - [참고 - 멜론](https://www.figma.com/design/lsYKaKsPkc7LHg7vjZqOd2/Untitled?node-id=4-87&node-type=CANVAS&t=zHMwGhjCysTTVpyP-0) ### 주제 : 상용 앱 1개의 화면 3장 이상 카피(피그마로 진행) - 컴포넌트 활용 - 배리언트 활용 - 오토레이아웃 활용 - 프로토타입 활용 - 조장은 공용 프로젝트 생성 후 팀원들을 초대 ## 숙제 - [피튜브 - 피그마튜터_특강 모음](https://www.youtube.com/playlist?list=PLPM-mNLGkfO8Kjoxu8FdzbLYV80oaUP0_) - 오늘부터 하루에 1개씩 시청 # 2024-09-06 ## 수업 - 부분모작연습 - 피그마, 앱 화면 모작 - [몰입코딩 - 부분모작 - likelion - slog.gg/p/13693#f - 42강 ~ 47강](https://slog.gg/p/13693#f) ## 피그마, 앱 화면 모작 ### 제출양식 - 압축파일 - page1_1.png : 페이지 1 원본 - page1_2.png : 페이지 1 색상 변경 버전 - page2_1.png : 페이지 2 원본 - page2_2.png : 페이지 2 색상 변경 버전 - page3_1.png : 페이지 3 원본 - page3_2.png : 페이지 3 색상 변경 버전 - memo.txt - 기존 주색 : #afeeff - 기존 보조색 : #fedd22 - 새 주색 : #fead33 - 새 주색 선정이유 : 기존보다 신뢰감을 주는 .. - 새 보조색 : #aedd22 - 새 보조색 선정이유 : 새 주색과 조화로우면서 가독성이 좋은 ... ## 숙제 - [피튜브 - 피그마튜터_특강 모음](https://www.youtube.com/playlist?list=PLPM-mNLGkfO8Kjoxu8FdzbLYV80oaUP0_) - 오늘부터 하루에 1개씩 시청 # 2024-09-09 ## 공지사항 - [24 09 09, p 13684, 43강, jQuery css 함수 보다는 addClass, removeClass 를 활용해주세요.](https://youtu.be/vC0n2Z0-4eo) ## 수업 - 부분모작연습 - [몰입코딩 - JS, jQuery, DOM - slog.gg/p/11982#f - 21강 ~ 23강](https://slog.gg/p/11982#f) - [몰입코딩 - Next.js - slog.gg/p/13711#f - 7강 ~ 16강](https://slog.gg/p/13711#f) - [몰입코딩 - 스와이퍼 - slog.gg/p/13722#f - 1강](https://slog.gg/p/13722#f) - 17시 ~ 18시 : 피그마 작업 마무리 # 2024-09-10 ## 수업 - 14시 : 피그마 작업 결과물 제출 - 부분모작연습 - [몰입코딩 - 스와이퍼 - slog.gg/p/13722#f - 2강 ~ 9강](https://slog.gg/p/13722#f) ## 간담회 - 일시 : 19시 - 준비물 : 주민등록증 - 술마시는 것과 관계없이 필요합니다. - 장소 : 더베이징 / 대전 서구 대덕대로 195번길 58 더 프라임시티 2층 201호 - ![img](https://i.imgur.com/ie0Q5zd.png) # 2024-09-11 ## 공지사항 - [24 09 11, p 13684, 43강, 모바일 사이드바 만들기, 1단계, 사이드 열기 버튼 누르면 사이드바가 보이고, 사이드바 클릭하면 사라짐](https://youtu.be/D5bejOBTQtI) - [CODEPEN](https://codepen.io/jangka44/pen/mdZoBXO) - [24 09 11, p 13684, 44강, 모바일 사이드바 만들기, 2단계, 사이드바 콘텐트 박스 구현, x 버튼 누르면 사이드바 꺼짐, 사이드바 콘텐츠 박스 클릭해도 꺼지지 않음](https://youtu.be/roFSuI7G5_I) - [CODEPEN](https://codepen.io/jangka44/pen/QWXoaxK) ## 수업 - 부분모작연습 - [몰입코딩 - JS, jQuery, DOM - slog.gg/p/11982#f - 24강 ~ 69강](https://slog.gg/p/11982#f) - [몰입코딩 - 부분모작 - 기타 - slog.gg/p/13712#f - 5강 ~ 8강](https://www.slog.gg/p/13712#f) - 16시 ~ 18시 : 모바일 사이드 바 시험 대비 # 2024-09-12 ## 수업 - 부분모작연습 - 17시 ~ 18시 : 모바일 사이드 바 시험 ## 모바일 사이드 바 시험 - 테일윈드 3.x로 교체 - 프리텐다드 폰트로 교체 - 폰트어썸 최신버전으로 교체 - [몰입코딩 - JS, jQuery, DOM - slog.gg/p/11982#f - 64강 ~ 68강](https://slog.gg/p/11982#64강) - 필수 - [몰입코딩 - JS, jQuery, DOM - slog.gg/p/11982#f - 69강](https://slog.gg/p/11982#69강) - 선택 - [시작](https://codepen.io/jangka44/pen/yLdrBxq) - [목표 : 1 단계](https://codepen.io/jangka44/pen/VwJNZGv) - [목표 : 2 단계](https://codepen.io/jangka44/pen/zYVXOWe) - [목표 : 3 단계](https://codepen.io/jangka44/pen/WNqWeyd) # 2024-09-13 ## 공지사항 - [24 09 13, p 13684, 45강, scroll 이벤트 와 window의 scrollTop 을 이용한 다크모드 처리](https://youtu.be/rSIiQtqeUHQ) - [CODEPEN](https://codepen.io/jangka44/pen/NWZmYYO) ## 수업 - 부분모작연습 - 서비스ㆍ경험디자인 관찰조사 ## 모바일 사이드 바 시험, 2nd - 테일윈드 3.x로 교체 - 프리텐다드 폰트로 교체 - 폰트어썸 최신버전으로 교체 - [몰입코딩 - JS, jQuery, DOM - slog.gg/p/11982#f - 64강 ~ 68강](https://slog.gg/p/11982#64강) - 필수 - [몰입코딩 - JS, jQuery, DOM - slog.gg/p/11982#f - 69강](https://slog.gg/p/11982#69강) - 선택 - [시작](https://codepen.io/jangka44/pen/yLdrBxq) - [목표 : 1 단계](https://codepen.io/jangka44/pen/VwJNZGv) - [목표 : 2 단계](https://codepen.io/jangka44/pen/zYVXOWe) - [목표 : 3 단계](https://codepen.io/jangka44/pen/WNqWeyd) # 2024-09-19 ## 수업 - 부분모작연습 - 서비스ㆍ경험디자인 관찰조사 - [몰입코딩 - WOW JS - slog.gg/p/13738#f - 1강 ~ 5강](https://slog.gg/p/13738#f) ## 서비스ㆍ경험디자인 관찰조사, 조 구성 - [작업물 참고 - 난다(다이어트 앱) - 자료조사](https://docs.google.com/document/d/19JhNhpa2NV4OhWlZIotp5TLLC1z-gS4TeCOWOBCTpzg) - [작업물 참고 - PET FOOD(반료동물 음식 레시피 앱) - PPT](https://docs.google.com/presentation/d/1ulZKcDTpYhtBJcVD80R6UfaH3PYrIN52/edit#slide=id.p1) - 1조 : 김선민님, 정수연님, 채시현님, 강선우님, 장주연님 : 분리수거 정보 앱 - [기획서(구글독스)](https://docs.google.com/document/d/1DxnyiClOPZcTk3_C8unIItIJKv2NE_SYcWRzFNwM6QQ) - [PPT](https://codepen.io/jangka44/debug/PoMwVom) - [피그마](https://url.kr/okdxxe) - [결과물](https://cdpn.io/pen/debug/GRVXwMO) - [김선민님](https://kbone8579.github.io/site-2024-10-11-rs-ReBorn) - [정수연님](https://?.github.io/?) - [채시현님](https://ctgzzmm79.github.io/site-2024-10-11) - [강선우님](https://jumuckbab.github.io/2024.10.11-jj) - [장주연님](https://jangjy333.github.io/site-2024-10-11-rs) - 2조 : 이희준님, 나은지님, 고언정님, 신은지님 : 수면 패턴 코칭 앱 - [기획서(구글독스)](https://docs.google.com/document/d/1x_J_3wdOEdEA12ChkG9F2IoeFh2PxGniQ63d-GoUIJg) - [PPT](https://codepen.io/jangka44/debug/abezXbe) - [피그마](https://tinyurl.com/25q3j2ch) - [결과물](https://cdpn.io/pen/debug/JjgaeOX) - [이희준님](https://chobouser77.github.io/sbs-coala-img) - [나은지님](https://ungdi.github.io/site-2024-10-11-rs/) - [고언정님](https://EONJENOG.github.io/site-2024-10-11-rs) - [신은지님](https://shineunji-cyber.github.io/koala) - 3조 : 서정우님, 임예나님, 정희영님, 이자람님 : 식당 음식 주문 앱 - [기획서(구글독스)](https://docs.google.com/document/d/1JDRG3eSYJMg6XOm3TzetkaXipktMNg6_43XLTpKenek) - [PPT](https://codepen.io/jangka44/debug/NWQPoPy) - [피그마](https://go9.co/XG0) - [결과물](https://cdpn.io/pen/debug/vYozQWZ) - [서정우님](https://wjddndlek.github.io/site-2024-10-11-r) - [임예나님](https://limyena.github.io/site-2024-10-11-rss) - [정희영님](https://wanseong7958.github.io/easy-eat) - [이자람님](https://jaram01.github.io/site-2024-10-11-rs) - 4조 : 오승민님, 김가경님, 이도혜님, 남궁솔님 : 반려동물 영양제 추천 앱 - [기획서(구글독스)](https://docs.google.com/document/d/1emhmQX1Im_5hqKxuZNmdqiyy05tJIcYJMYATmFuxA2o) - [PPT](https://codepen.io/jangka44/debug/WNVbPbz) - [피그마](https://go9.co/XG2) - [결과물](https://cdpn.io/pen/debug/PoMdxOQ) - [오승민님](https://imisfp.github.io/yymn) - [김가경님](https://gagyeong2505.github.io/site-24-10-11-rs) - [남궁솔님](https://solri37.github.io/site-2024-10-11-rs/) - [이도혜님](https://ledohye.github.io/site.24.10.11) # 2024-09-20 ## 수업 - 부분모작연습 - 서비스ㆍ경험디자인 관찰조사 - [몰입코딩 - WOW JS - slog.gg/p/13738#f - 6강](https://slog.gg/p/13738#f) # 2024-09-23 ## 수업 - 부분모작연습 - 서비스ㆍ경험디자인 관찰조사 # 2024-09-24 ## 공지사항 - [24 09 24, p 13684, 46강, 디자인 프로세스 페이지 만들 때 참고하면 좋은 사이트](https://youtu.be/yg0P2JLi8C4) - [노트폴리오 - 발견 - UI/UX](https://notefolio.net/?keywords=UI/UX) - [디자인나스 - 모바일 ux flow 디자인 포트폴리오](https://www.designnas.com/web_pf/mobile_flow.php) - [24 09 24, p 13684, 47강, 테일윈드의 nested groups](https://youtu.be/FnxIytKJF3g) - [CODEPEN - 1 단계 : 레이아웃](https://codepen.io/jangka44/pen/KKOKGRO) - [CODEPEN - 2 단계 : 3번째 박스에 호버하면 4번째 박스의 배경색 변경을 위해서 group, group-hover 사용](https://codepen.io/jangka44/pen/qBeBQbx) - [CODEPEN - 3 단계 : 문제발생, 1번째 박스에 호버하면 2번째 박스의 배경색을 변경하고 싶었는데 4번째 박스의 배경색도 같이 변경됨](https://codepen.io/jangka44/pen/WNVNYxb) - [CODEPEN - 4 단계 : 중첩 그룹(nest groups) 기술을 적용하여 해결](https://codepen.io/jangka44/pen/poMoQjg) - [24 09 24, p 13684, 48강, CSS에는 조상 선택자, 부모 선택자, 형 선택자가 없습니다, 이런 상황에서는 JS를 이용하면 됩니다.](https://youtu.be/Ucl9FewFv30) - [CODEPEN - 1 단계 : 레이아웃](https://codepen.io/jangka44/pen/RwXwqKE) - [CODEPEN - 2 단계 : 탑바에 호버시 탑바 전체의 디자인 변경](https://codepen.io/jangka44/pen/PoMoxpr) - [CODEPEN - 3 단계 : 탑바의 메뉴 1 부분에 호버시 탑바 전체의 디자인을 변경하려고 했지만 CSS 만으로는 안됨](https://codepen.io/jangka44/pen/PoMoxmr) - [CODEPEN - 4 단계 : JS 도입하여 해결](https://codepen.io/jangka44/pen/RwXwqgv) - 이 정도의 JS는 구현할 수 있어야 합니다. ## 수업 - 부분모작연습 - 디자인 구성요소 제작 # 2024-09-25 ## 수업 - 부분모작연습 - 디자인 구성요소 제작 - [몰입코딩 - 배포 - slog.gg/p/13740#f - 1강 ~ 2강](https://slog.gg/p/13740#f) - [몰입코딩 - GITHUB PAGE - slog.gg/p/13746#f - 1강 ~ 3강](https://slog.gg/p/13746#f) # 2024-09-26 ## 수업 - 부분모작연습 - 디자인 구성요소 제작 - [몰입코딩 - AOS - slog.gg/p/13747#f - 1강](https://slog.gg/p/13747#f) # 2024-09-27 ## 수업 - 부분모작연습 - 디자인 구성요소 제작 # 2024-09-30 ## 수업 - 부분모작연습 - 디자인 구성요소 제작 # 2024-10-01 ## 수업 - 부분모작연습 - 디자인 구성요소 제작 - [몰입코딩 - GIT/GITHUB - slog.gg/p/13751#f - 1강 ~ 13강](https://slog.gg/p/13751#f) # 2024-10-02 ## 수업 - 부분모작연습 - 디자인 구성요소 제작 - [몰입코딩 - 테일윈드 정석 사용법 - slog.gg/p/13752#f - 1강 ~ 4강](https://slog.gg/p/13752#f) # 2024-10-04 ## 개발환경담당자 - 김선민님 - 오승민님 - 고언정님 - 이자람님 ## 수업 - 부분모작연습 - 디자인 구성요소 제작 - [몰입코딩 - GIT/GITHUB - slog.gg/p/13751#f - 14강 ~ 17강](https://slog.gg/p/13751#f) - [몰입코딩 - 테일윈드 정석 사용법 - slog.gg/p/13752#f - 5강](https://slog.gg/p/13752#f) # 2024-10-07 ## 수업 - 부분모작연습 - 디자인 구성요소 제작 # 2024-10-08 ## 수업 - 부분모작연습 - 프로토타입 기초데이터 수집 및 스케치 # 2024-10-10 ## 공지사항 - [24 10 10, p 13684, 49강, VS CODE, 테일윈드 정석으로 사용하는 방법](https://youtu.be/BtpZRzKw9sg) - [node.js 설치방법](https://www.slog.gg/p/13711#1강) - [영상 바로보기](https://youtu.be/w_T4wxAQ4fw) - [GIT 설치방법](https://www.slog.gg/p/13711#2강) - [영상 바로보기](https://youtu.be/mD1B3dSz6rw) - [VS CODE 설치방법](https://www.slog.gg/p/13711#3강) - [영상 바로보기](https://youtu.be/Bu-NmwUa_74) - [몰입코딩 - 테일윈드 정석 사용법 - slog.gg/p/13752#f - 4강](https://slog.gg/p/13752#4강) - ![img](https://i.imgur.com/qgve6kw.png) ## 공지사항 49강 소스코드 ### tailwind.config.js 생성 ```bash npx tailwindcss init ``` ### tailwind.config.js 내용 변경 ```js /** @type {import('tailwindcss').Config} */ module.exports = { content: ["./src/**/*.{html,js}"], theme: { extend: { colors: { clifford: "#da373d", }, screens: { "3xl": "1600px", "4xl": "1920px", }, }, }, plugins: [ function ({ addVariant }) { const groupVariantPrefixes = ["p1", "p2", "p3"]; function escapeClassName(className) { return className.replace(/[\[\]\+\*\#\/\%]/g, '\\$&'); } // group-on 변형 추가 함수 const addGroupOnVariant = (name = "") => { const selector = name ? `group\\/${name}` : "group"; const variantName = name ? `group-on/${name}` : "group-on"; addVariant(variantName, ({ modifySelectors }) => { modifySelectors(({ className }) => { return `.${selector}.on .${escapeClassName( variantName )}\\:${escapeClassName(className)}`; }); }); }; // peer-on 변형 추가 함수 const addPeerOnVariant = (name = "") => { const selector = name ? `peer\\/${name}` : "peer"; const variantName = name ? `peer-on/${name}` : "peer-on"; addVariant(variantName, ({ modifySelectors }) => { modifySelectors(({ className }) => { return `.${selector}.on ~ .${escapeClassName( variantName )}\\:${escapeClassName(className)}`; }); }); }; // 기본 group-on, peer-on 변형 추가 addGroupOnVariant(); addPeerOnVariant(); // 특정 그룹과 피어에 대한 변형 추가 groupVariantPrefixes.forEach((name) => { addGroupOnVariant(name); addPeerOnVariant(name); }); // on 클래스에 대한 변형 추가 addVariant("on", ({ modifySelectors }) => { modifySelectors(({ className }) => { return `.on.on\\:${escapeClassName(className)}`; }); }); }, ], }; ``` ### src/input.css 생성 ```css @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css"); @tailwind base; @tailwind components; @tailwind utilities; /* 커스텀 CSS(폰트, 기타 등등) */ .box-1 { color: blue; } html > body { font-family: "Pretendard Variable", sans-serif; } ``` ### src/input.css 으로부터 src/output.css 파일이 자동으로 생성되는 모드 시작 ```bash npx tailwindcss -i src/input.css -o src/output.css --watch ``` ### src/index.html 생성 ```html

``` ## 수업 - 부분모작연습 - 프로토타입 기초데이터 수집 및 스케치 - [몰입코딩 - learngitbranching.js.org - slog.gg/p/13767#f - 1강 ~ 2강](https://slog.gg/p/13767#f) - [몰입코딩 - GIT, 터미널, 커서, 테일윈드 - slog.gg/p/13768#f - 1강 ~ 10강](https://www.slog.gg/p/13768#f) ## 최고의 학습 효율 - ![img](https://i.imgur.com/HHu5r3V.png) ## learngitbranching.js.org 명령어 - [learngitbranching.js.org](https://learngitbranching.js.org/?locale=ko) - 명령어 - clear : 명령어 히스토리 없애기 - reset : 레벨 초기화 - show goal : 목표 보기 - hide goal : 목표 숨기기 - exit level : 레벨 종료 - levels : 모든 레벨 보기 - show solution : 정답보기 # 2024-10-11 ## 공지사항 - [24 10 11, p 13684, 50강, 이미지를 GITHUB에 호스팅하는 방법](https://youtu.be/fVuytAIgfxE) - [CODEPEN](https://codepen.io/jangka44/pen/mdNOZvJ) - [새 리포지터리 생성](https://github.com/new) - [리포지터리 - https://github.com/jhs512/site-2024-10-11-rs](https://github.com/jhs512/site-2024-10-11-rs) - 이미지 주소 by GITHUB PAGE : https://{user-name}.github.io/{repo-name}/{file-path} - EX : [https://jhs512.github.io/site-2024-10-11-rs/img/01.png](https://jhs512.github.io/site-2024-10-11-rs/img/01.png) - 이미지 주소 by GITHUB CDN : http://cdn.jsdelivr.net/gh/{user-name}/{repo-name}/{file-path} - EX : [http://cdn.jsdelivr.net/gh/jhs512/site-2024-10-11-rs/img/01.png](http://cdn.jsdelivr.net/gh/jhs512/site-2024-10-11-rs/img/01.png) - [24 10 11, p 13684, 51강, index.html 호스팅, github 리포지터리를 웹에서 바로 VS CODE로 수정하는 방법](https://youtu.be/IX9iMYNOeSU) - [리포지터리 - https://github.com/jhs512/site-2024-10-11-rs](https://github.com/jhs512/site-2024-10-11-rs) - [리포지터리 - VS CODE 모드 - https://github.dev/jhs512/site-2024-10-11-rs](https://github.dev/jhs512/site-2024-10-11-rs) - [GITHUB 페이지 사이트 - https://jhs512.github.io/site-2024-10-11-rs](https://jhs512.github.io/site-2024-10-11-rs) - 원래 주소는 `https://jhs512.github.io/site-2024-10-11-rs/index.html` 이 맞다. - 그런데 웹에서 `/index.html` 은 생략이 가능한다. ## 수업 - 부분모작연습 - 프로토타입 기초데이터 수집 및 스케치 # 2024-10-14 ## 공지사항 - [24 10 14, p 13684, 52강, aspect-ratio 와 CSS 애니메이션](https://youtu.be/Wk3YWZu7NeA) - [CODEPEN - 1차 : 트랜지션으로 만든 버전](https://codepen.io/jangka44/pen/abeJdEx) - [CODEPEN - 2차 : 애니메이션으로 만든 버전](https://codepen.io/jangka44/pen/KKOWVQo) - [24 10 14, p 13684, 53강, 모작 대상 사이트에서 CSS 애니메이션 정보 알아내고 활용하기](https://youtu.be/2USPSoWrpeM) - [CODEPEN](https://codepen.io/jangka44/pen/ZEgeQjq) - [easings.net](https://easings.net) - [24 10 14, p 13684, 54강, box-sizing: border-box 가 되면 padding과 border-width 가 width에 통합됩니다.](https://youtu.be/3h8L-75aC78) - [CODEPEN](https://codepen.io/jangka44/pen/bGXqpNv) - [24 10 14, p 13684, 55강, CSS 변수를 엘리먼트에 지정하면 해당 엘리먼트를 포함한 후손까지 그것을 이용할 수 있습니다.](https://youtu.be/0qvjTgRs1yI) - [CODEPEN - 1차 : 직접 수동으로 계산된 값을 사용한 버전](https://codepen.io/jangka44/pen/bGXqpNv) - [CODEPEN - 2차 : CSS 변수와 calc 함수 사용해서 처리한 버전](https://codepen.io/jangka44/pen/MWNpywx) - [CODEPEN - 3차 : transform 사용한 버전](https://codepen.io/jangka44/pen/poMeyjq) - [CODEPEN - 4차 transform 사용한 버전(테일윈드 적용)](https://codepen.io/jangka44/pen/LYwWNGN) ## 수업 - 부분모작연습 - 프로토타입 기초데이터 수집 및 스케치 - [몰입코딩 - GIT 협업 - slog.gg/p/13773#f - 1강 ~ 6강](https://slog.gg/p/13773#f) - [몰입코딩 - GIT, 터미널, 커서, 테일윈드 - slog.gg/p/13768#f - 11강](https://www.slog.gg/p/13768#f) # 2024-10-15 ## 수업 - 부분모작연습 - 시각디자인 리서치 조사 - [몰입코딩 - 부분모작 - 기타 - slog.gg/p/13712#f - 10강](https://slog.gg/p/13712#f) # 2024-10-16 ## 수업 - 부분모작연습 - 시각디자인 리서치 조사 # 2024-10-17 ## 시각디자인 리서치 조사 기획문서 내용 - 이용자 분석 - 경쟁사 웹사이트 분석 - 기존 페이지 단점 - 개선 계획 - 기존 메인페이지에서 빠져야 하는 내용 - 기존 메인페이지에서 추가되어야 하는 내용 ## 시각디자인 리서치 조사 조 구성 ### 1조 - [크리스피 크림 - https://www.krispykreme.com](https://www.krispykreme.com) - [기획문서](https://tinyurl.com/2xl6ygv9) - [PPT](https://codepen.io/jangka44/debug/vYoRwYx) - 정희영 - [한국관광공사 - https://knto.or.kr](https://knto.or.kr) - [기획문서](https://go9.co/XNi) - 작업 : 피그마 학습, 11월 06일까지 - 이도혜 - [샵아모멘트 - https://shopamomento.com](https://shopamomento.com) - [기획문서](https://go9.co/XOr) - 작업 : 쇼핑몰 PC용 메인페이지 작업, 11월 06일까지 - 채시현 - 서정우 - 신은지 ### 2조 - [반스 - https://www.vans.co.kr](https://www.vans.co.kr) - [기획문서](https://go9.co/XNj) - [PPT](https://codepen.io/jangka44/debug/poMLmoq) - 이희준 - 고언정 - 남궁솔 - 나은지 ### 3조 - [동원 F&B - https://www.dongwonfnb.com](https://www.dongwonfnb.com) - [기획문서](https://tinyurl.com/2anw4rh3) - [PPT](https://codepen.io/jangka44/debug/ExqEzaa) - 오승민 - 김가경 - 장주연 - 임예나 ### 4조 - [이케아 - https://www.ikea.com/kr/ko](https://www.ikea.com/kr/ko) - [기획문서](https://go9.co/XNh) - [PPT](https://codepen.io/jangka44/debug/dyxmEPO) - 김선민 - 정수연 - 이자람 - 강선우 ## 수업 - 부분모작연습 - 시각디자인 리서치 조사 - [몰입코딩 - 부분모작 - 기타 - slog.gg/p/13712#f - 11강 ~ 20강](https://slog.gg/p/13712#f) # 2024-10-18 ## 수업 - 부분모작연습 - 시각디자인 리서치 조사 - [몰입코딩 - 부분모작 - 기타 - slog.gg/p/13712#f - 21강 ~ 23강](https://slog.gg/p/13712#f) - [몰입코딩 - 스와이퍼 - slog.gg/p/13722#f - 10강](https://slog.gg/p/13722#f) ## 프로토타입 기초데이터 수집 및 스케치 - 기획서 참고 : [https://go9.co/XLI](https://go9.co/XLI) - 리뉴얼은 메인페이지와 서브페이지 1개(택 1) 하여 진행 # 2024-10-21 ## 수업 - 부분모작연습 - 시각디자인 리서치 분석 # 2024-10-22 ## 수업 - 부분모작연습 - 시각디자인 리서치 분석 - [몰입코딩 - 리액트 - slog.gg/p/13805#f - 1강 ~ 6강](https://slog.gg/p/13805#f) - [몰입코딩 - 수파베이스 - slog.gg/p/13806#f - 1강 ~ 4강](https://slog.gg/p/13806#f) # 2024-10-23 ## 공지사항 - [24 10 23, p 13684, 56강, slog.gg/p/2707#f 에 좋은 자료가 많습니다.](https://youtu.be/03HycpccEJc) - [몰입코딩 - 부분모작 2022 - 기타 - slog.gg/p/2707#f](https://slog.gg/p/2707#f) ## 수업 - 부분모작연습 - 시각디자인 리서치 분석 - [몰입코딩 - 리액트 - slog.gg/p/13805#f - 7강](https://slog.gg/p/13805#f) - [몰입코딩 - 수파베이스 - slog.gg/p/13806#f - 5강 ~ 6강](https://slog.gg/p/13806#f) # 2024-10-24 ## 공지사항 - [24 10 24, p 13684, 56강, slog.gg/p/2707#f 에 좋은 자료가 많습니다.](https://youtu.be/03HycpccEJc) - [몰입코딩 - 부분모작 2022 - 기타 - slog.gg/p/2707#f](https://slog.gg/p/2707#f) - [24 10 24, p 13684, 57강, gamma.app 으로 쉽고 빠르게 PPT를 만들 수 있습니다.](https://youtu.be/sf-CAA4Ytlw) - [gamma.app](https://gamma.app) ## 수업 - 부분모작연습 - 시각디자인 리서치 분석 - [몰입코딩 - 부분모작 2022 - 기타 - slog.gg/p/2707#f - 1강 ~ 110강](https://slog.gg/p/2707#f) ## 공유발표 - 김선민님 - builder.io 소개 # 2024-10-25 ## 공지사항 - [24 10 25, p 13684, 58강, $(document).ready 의 의미는 `나중에 실행`이다.](https://youtu.be/7Rhtl5AQSH4) - [CODEPEN](https://codepen.io/jangka44/pen/xxvPQXo) ## $(document).ready 의 의미는 나중에 실행이다. - [CODEPEN](https://codepen.io/jangka44/pen/xxvPQXo) ```html

``` ## 수업 - 부분모작연습 - 프로토타입 제작 및 사용성 테스트 ## 앞으로의 계획 - 금(오늘) : PC용 메인화면 1차 완성 - 월 : PC용 메인화면 최종 완성 - 화 : 모바일용 메인화면 최종 완성 - 수 : 서브 페이지(PC용/모바일용) 최종 완성 - 목, 금, 월 : 코딩 완성 # 2024-10-28 ## 공지사항 - [24 10 28, p 13684, 59강, 피그마 플러그인 builder.io, 발표자 : 김선민님](https://youtu.be/Vr7ZszkM3yo) ## 피그마 플러그인 플러그인, builder.io - [발표, 발표자 : 김선민님](https://youtu.be/Vr7ZszkM3yo) ## 수업 - 부분모작연습 - 프로토타입 제작 및 사용성 테스트 # 2024-10-29 ## 공지사항 - [24 10 29, p 13684, 60강, 피그마 오토 레이아웃, 발표자 : 김가경님](https://youtu.be/gJAfYCR-xF8) - [24 10 29, p 13684, 61강, 마디아 피그마 총정리 영상 소개](https://youtu.be/lX5HepKzaDA) - [Madia Designer - ?전 세계 기업들이 선택한 피그마 강좌 PS.이제는 마스터하셔야죠? (4K)](https://youtu.be/c6yCZecrMpQ) ## 피그마 오토 레이아웃 - [발표, 발표자 : 김가경님](https://youtu.be/gJAfYCR-xF8) ## 수업 - 부분모작연습 - 프로토타입 제작 및 사용성 테스트 - [몰입코딩 - GIT, 터미널, 커서, 테일윈드 - slog.gg/p/13768#f - 12강 ~ 16강](https://www.slog.gg/p/13768#f) # 2024-10-30 ## 공지사항 - [24 10 30, p 13684, 62강, 피그마 플러그인 HTML TO DESIGN, STYLER, 발표자 : 고언정님](https://youtu.be/WxYU26wAEao) - [24 10 30, p 13684, 63강, 피그마 컴포넌트, 발표자 : 이자람님](https://youtu.be/WFTE4k3-D9Q) ## 피그마 플러그인, HTML TO DESIGN, STYLER - [발표, 발표자 : 고언정님](https://youtu.be/WxYU26wAEao) ## 피그마 컴포넌트 - [발표, 발표자 : 이자람님](https://youtu.be/WFTE4k3-D9Q) ## 수업 - 부분모작연습 - 프로토타입 제작 및 사용성 테스트 - [몰입코딩 - 리액트 - slog.gg/p/13805#f - 7강 ~ 18강](https://slog.gg/p/13805#f) - [몰입코딩 - 부분모작 - 기타 - slog.gg/p/13712#f - 24강](https://slog.gg/p/13712#f) # 2024-10-31 ## 공지사항 - [24 10 31, p 13684, 64강, 피그마 배리어블, 발표자 : 정희영님](https://youtu.be/WZUTl0lds9w) ## 피그마 배리어블 - [발표, 발표자 : 정희영님](https://youtu.be/WZUTl0lds9w) ## 수업 - 부분모작연습 - 프로토타입 제작 및 사용성 테스트 # 2024-11-01 ## 공지사항 - [24 11 04, p 13684, 65강, 피그마 프로토타입, 발표자 : 나은지님](https://youtu.be/mkkhKChWQrs) ## 피그마 프로토타이핑 - [발표, 발표자 : 나은지님](https://youtu.be/mkkhKChWQrs) ## 수업 - 부분모작연습 - 프로토타입 제작 및 사용성 테스트 # 2024-11-04 ## 수업 - 부분모작연습 - 프로토타입 제작 및 사용성 테스트 # 2024-11-05 ## 공지사항 - [24 11 05, p 13684, 66강, 피그마 Effects, Background Blur, Layer Blur, 발표자 : 서정우님](https://youtu.be/Ceu5RVXIoQA) ## 피그마 Effects, Background Blur, Layer Blur - [발표, 발표자 : 서정우님](https://youtu.be/Ceu5RVXIoQA) ## 탭 메뉴, 1 단계 : 디자인 - [문제 - 시작](https://codepen.io/pen) - [문제 - 정답예시](https://codepen.io/jangka44/debug/eYvwBrN) - [문제 - 정답](https://codepen.io/jangka44/pen/eYvwBrN) - [영상](https://youtu.be/lPlAxFBmqCk) ## 탭 메뉴, 2 단계 : 헤더 구현 - [문제 - 시작](https://codepen.io/jangka44/pen/eYvwBrN) - [문제 - 정답예시](https://codepen.io/jangka44/debug/eYvwBQJ) - [문제 - 정답](https://codepen.io/jangka44/pen/eYvwBQJ) - [영상](https://youtu.be/whRlfZKMxME) ## 탭 메뉴, 3 단계 : 바디 구현 - [문제 - 시작](https://codepen.io/jangka44/pen/eYvwBQJ) - [문제 - 정답예시](https://codepen.io/jangka44/debug/jOBjVXg) - [문제 - 정답](https://codepen.io/jangka44/pen/jOBjVXg) - [영상](https://youtu.be/rH2apSn8pnE) ## 수업 - 부분모작연습 - 프로토타입 제작 및 사용성 테스트 - [몰입코딩 - 부분모작 - 기타 - slog.gg/p/13712#f - 25강](https://slog.gg/p/13712#f) # 2024-11-06 ## 수업 - 부분모작연습 - 프로토타입 제작 및 사용성 테스트 - 목표 : PC용 메인 페이지 최종 버전 완성 # 2024-11-07 ## 수업 - 부분모작연습 - 프로토타입 제작 및 사용성 테스트 # 2024-11-08 ## 수업 - 부분모작연습 - 프로토타입 제작 및 사용성 테스트 - [몰입코딩 - 부분모작 - 기타 - slog.gg/p/13712#f - 26강 ~ 30강](https://slog.gg/p/13712#f) # 2024-11-11 ## 수업 - 부분모작연습 - 프로토타입 제작 및 사용성 테스트 - [몰입코딩 - 부분모작 - 기타 - slog.gg/p/13712#f - 31강](https://slog.gg/p/13712#f) # 2024-11-12 ## 수업 - 부분모작연습 - 서비스·경험디자인 시나리오 개발 - [몰입코딩 - 부분모작 - 기타 - slog.gg/p/13712#f - 32강 ~ ?강](https://slog.gg/p/13712#f) - [몰입코딩 - GIT, 터미널, 커서, 테일윈드 - slog.gg/p/13768#f - 17강 ~ ?강](https://slog.gg/p/13768#f) - [몰입코딩 - 리액트 - slog.gg/p/13805#f - 19강 ~ ?강](https://slog.gg/p/13805#f) - [몰입코딩 - 수파베이스 - slog.gg/p/13806#f - 5강 ~ ?강](https://slog.gg/p/13806#f) ## 애니메이션 타이밍 예제 - [CODEPEN - 개념- 애니메이션 타이밍 펑션](https://codepen.io/jangka44/pen/poELjyw) - [링크 - 베지어 함수 매개변수 생성기 - cubic-bezier](https://cubic-bezier.com/) ## box-shadow 예제 - [CODEPEN - 개념 - box-shadow, 단계 1, 또렷한](https://codepen.io/jangka44/pen/JOaBWj) - [CODEPEN - 개념 - box-shadow, 단계 2, blur](https://codepen.io/jangka44/pen/rYZrmR) - [CODEPEN - 개념 - box-shadow, 단계 3, 멀티](https://codepen.io/jangka44/pen/javpap) - [CODEPEN - 개념 - box-shadow, 단계 4, 트랜지션](https://codepen.io/jangka44/pen/BmOPYJ) - [CODEPEN - 개념 - box-shadow, 단계 5, 애니메이션 타이밍 펑션](https://codepen.io/jangka44/pen/gXdjex) ## text-shadow 예제 - [CODEPEN - 개념 - text-shadow](https://codepen.io/jangka44/pen/gOwvyWX) - [CODEPEN - 개념 - text-shadow, 글자 외곽선 표시](https://codepen.io/jangka44/pen/GRjQLqE) - [CODEPEN - 개념 - text-shadow, hover 그림자 이동](https://codepen.io/jangka44/pen/mdrxVdO) - [CODEPEN - 개념 - text-shadow, 긴 그림자](https://codepen.io/jangka44/pen/ZEprPgV) # 2024-11-13 ## 수업 - 부분모작연습 - 서비스·경험디자인 시나리오 개발 # 2024-11-14 ## 수업 - 부분모작연습 - 서비스·경험디자인 시나리오 개발 ## clamp 예제 - [CODEPEN - 개념 - clamp](https://codepen.io/jangka44/pen/xxvBZeZ) ## setTimeout, setInterval 예제 - [CODEPEN - 개념 - setTimeout, setInterval](https://codepen.io/jangka44/pen/QWeoyXJ)

SBS 아카데미, UI/UX/웹디자인 과정