# 옥천교육지원청 중등영재 ai pair progamming for web # 1차시 웹 개발 맛보기, HTML/CSS 개념알기, 코딩 환경설정하기 실제 제작 작품 [대통령 후보 닮은꼴](https://cad-resb.netlify.app/) [뉴진스(NewJeans) 닮은꼴](https://newjeansai.netlify.app/) [OH MY GIRL! 닮은꼴](https://ohmygirlfornayun.netlify.app/) [남스 닮은꼴](https://twitchsameface.netlify.app/) [에스파 닮은꼴](https://baaboo.netlify.app/) [이상한 변호사 우영우 닮은꼴](https://great-sexy-king.netlify.app/) [https://slashpage.com/conanssam/7916x82rq3kv1m4kpyg3](https://slashpage.com/conanssam/7916x82rq3kv1m4kpyg3) 예제 소스코드 [https://m100000577-my.sharepoint.com/:u:/g/personal/fitz87_samyang_es_kr/ETq72zM3NxROiSvvW3YDwL8BNXiWfVbWBbh_FOnA1kqnXg?e=0LVZLq](https://m100000577-my.sharepoint.com/:u:/g/personal/fitz87_samyang_es_kr/ETq72zM3NxROiSvvW3YDwL8BNXiWfVbWBbh_FOnA1kqnXg?e=0LVZLq) --- 1차시 웹 기초 안내 및 개발 환경 셋팅 - 코드펜 [https://codepen.io/dev_loop/pen/MWKbJmO](https://codepen.io/dev_loop/pen/MWKbJmO) - 색상코드 [https://htmlcolorcodes.com/](https://htmlcolorcodes.com/) - 깃허브 [https://github.com/](https://github.com/) - 리플잇 [https://replit.com/](https://replit.com/) - 넷틀리파이 [https://app.netlify.com/](https://app.netlify.com/teams/jkf87/overview) - 프리넘 [https://www.freenom.com/en/index.html?lang=en](https://www.freenom.com/en/index.html?lang=en) - 카카오 애드핏 [https://adfit.kakao.com/](https://adfit.kakao.com/) - 유튜브 인급동 변경하고 패들렛에 스크린샷 올리기 ![Image](https://upload.cafenono.com/image/slashpageHome/20240622/112710_0p4zP6FbfgBrr6DtDZ?q=75&s=1280x180&t=outside&f=webp) [나의 조화로운 Padlet](https://samyang.padlet.org/fitz87_4/padlet-nbkt2dbwwd8m0ait) --- # 2차시 챗GPT, 인공지능을 이용한 pair programming ## AI 도구 가입하기 챗GPT [https://chatgpt.com/](https://chatgpt.com/) [https://chatgpt.com/](https://chatgpt.com/) MS코파일럿 [Microsoft Copilot: Your everyday AI companion](https://copilot.microsoft.com/) ## 예시 프롬프트 ``` HTML의 기본 문법을 알려줘 ``` ``` 야, 좀 쉽게 설명해줘. 나 엔트리 코딩만 해봤어 ``` ``` 수정할 부분과 해당 코드만 알려줘 ``` ### 티쳐블 머신 이용해서 모델 만들기 [Teachable Machine](https://teachablemachine.withgoogle.com/) ### 파일 일괄 다운로더 [ImageAssistant Batch Image Downloader](https://chromewebstore.google.com/detail/imageassistant-batch-imag/dbjbempljhcmhlfpfacalomonjpalpko?pli=1) ### 사용법 ![Image](https://upload.cafenono.com/image/slashpageHome/20240708/092116_ZC1ww7y98C5m8PYAec?q=75&s=1280x180&t=outside&f=webp) 크롬 브라우져 확장 프로그램을 설치하고 퍼즐 모양 아이콘을 눌러 확장프로그램 핀을 고정한다 ![Image](https://upload.cafenono.com/image/slashpageHome/20240708/092216_NpSzrCFazN5SaL3PlT?q=75&s=1280x180&t=outside&f=webp) 아이콘을 확인한다. 크롬브라우져 탭을 새로 띄워 검색어를 입력한다 댕댕이 구글 검색 - 이미지 탭에 들어가 ![Image](https://upload.cafenono.com/image/slashpageHome/20240708/092256_nu3Fev6pFSwYjY80XE?q=75&s=1280x180&t=outside&f=webp) ![Image](https://upload.cafenono.com/image/slashpageHome/20240708/092421_OH1V9trIdTmwOWNKQY?q=75&s=1280x180&t=outside&f=webp) 확장 프로그램 아이콘을 눌러 메뉴에서 Extract Current Page를 선택한다 그림 파일 사이즈를 100x100 이상으로 선택하여 사이즈를 조절하고 전체를 다운로드 받는다. ![Image](https://upload.cafenono.com/image/slashpageHome/20240708/092710_lfaNcOhvq9pPhhBO5C?q=75&s=1280x180&t=outside&f=webp) ![Image](https://upload.cafenono.com/image/slashpageHome/20240708/092810_m9zjr60DQQzOIBN0hm?q=75&s=1280x180&t=outside&f=webp) ![Image](https://upload.cafenono.com/image/slashpageHome/20240708/115651_LaBlRXg48M1hiRZRci?q=75&s=1280x180&t=outside&f=webp) Continue를 눌러 이미지를 전체 다운로드 합니다. 다운로드가 시작됩니다. [tip] 한번에 다운이 안되고 자꾸 저장하라고 해요 ![Image](https://upload.cafenono.com/image/slashpageHome/20240708/115437_JZCIUherimZG8qCM9H?q=75&s=1280x180&t=outside&f=webp) 이 경우 크롬 브라우져에서 설정을 변경해야합니다 설정에서 다운로드를 검색합니다. ![Image](https://upload.cafenono.com/image/slashpageHome/20240708/115539_7C7oXDMtJculSnLBFY?q=75&s=1280x180&t=outside&f=webp) 다운로드 전에 각 파일의 저장 위치 확인 기능을 끕니다. # 3차시 ![Image](https://upload.cafenono.com/image/slashpageHome/20240713/073557_tNyElUt2HXq7Ad7IGf?q=75&s=1280x180&t=outside&f=webp) ![Image](https://upload.cafenono.com/image/slashpageHome/20240713/073552_Bp4w0lTvgLnykRo7fV?q=75&s=1280x180&t=outside&f=webp) ``` ``` html코드 ``` 모델을 바꿀꺼야. JOY, ANGER, ENVY, ANXIETY, FEAR 5개야. 각각에 맞게 코드를 수정해줘. 한국어로 해줘. ``` 결과 ``` switch (prediction[0].className) { case "JOY": resultTitle = "기쁨"; resultExplain = "기쁨에 대한 설명."; resultCeleb = "기쁨과 관련된 연예인."; resultpic = "./joy.jpg"; resulturl = "https://example.com/joy"; break; case "ANGER": resultTitle = "분노"; resultExplain = "분노에 대한 설명."; resultCeleb = "분노와 관련된 연예인."; resultpic = "./anger.jpg"; resulturl = "https://example.com/anger"; break; case "ENVY": resultTitle = "질투"; resultExplain = "질투에 대한 설명."; resultCeleb = "질투와 관련된 연예인."; resultpic = "./envy.jpg"; resulturl = "https://example.com/envy"; break; case "ANXIETY": resultTitle = "불안"; resultExplain = "불안에 대한 설명."; resultCeleb = "불안과 관련된 연예인."; resultpic = "./anxiety.jpg"; resulturl = "https://example.com/anxiety"; break; case "FEAR": resultTitle = "공포"; resultExplain = "공포에 대한 설명."; resultCeleb = "공포와 관련된 연예인."; resultpic = "./fear.jpg"; resulturl = "https://example.com/fear"; break; default: resultTitle = "알 수 없음"; resultExplain = ""; resultCeleb = ""; resultpic = ""; resulturl = ""; } ``` 펑션을 수정하세요 ![Image](https://upload.cafenono.com/image/slashpageHome/20240706/110435_FmiHcM6ABBh2ZTP48b?q=75&s=1280x180&t=outside&f=webp) 코드가 어디까지인지 모르겠다면 토글버튼을 눌러서 확인 후 복사 → 챗GPT등을 이용해 수정 하여 붙여넣기 합니다 ![Image](https://upload.cafenono.com/image/slashpageHome/20240713/074154_c7P59CQx0FJ7OrC4P1?q=75&s=1280x180&t=outside&f=webp) ![Image](https://upload.cafenono.com/image/slashpageHome/20240713/074158_m9ADZ3um0EHj8fpSeE?q=75&s=1280x180&t=outside&f=webp) 현재까지 결과 게이지바가 표시되지 않는 것이 정상입니다. ![Image](https://upload.cafenono.com/image/slashpageHome/20240706/110538_7SDvqQPfo7wDUZorrs?q=75&s=1280x180&t=outside&f=webp) css 부분을 수정하기 위해 Style.css를 선택하고 코드를 복사합니다 ![Image](https://upload.cafenono.com/image/slashpageHome/20240706/110652_816zThPWNCdhbjDzdg?q=75&s=1280x180&t=outside&f=webp) ``` ``` ``` 기존에 클래스 wooyoungwoo, donggrami, sooyeon, ms, moonu 대신에 JOY, ANGER, ENVY, ANXIETY, FEAR에 대한 css 코드를 만들어주세요 ``` ``` 전체 CSS 코드를 작성해주세요 ``` For the site tree, see the [root Markdown](https://slashpage.com/conanssam.md).