conanssam
conanssam
비공개
conanssam
conanssam
수강생 작품 모음
No Image

오징어게임 닮은꼴 테스트

T
TV_코난쌤__코난쌤TV
Jun 22, 20242y ago
No Image
오징어게임 인물 닮은꼴
오징어게임 인물 닮은꼴 찾기, 인공지능 오징어게임 인물 닮은꼴 찾기, 나와 닮은 연예인, squid game, 얼굴 평가, 오징어게임, 기훈, 상우, 새벽, 일남, 덕수
squidgameai.netlify.app
👍
Made with Slashpage

옥천교육지원청 중등영재 ai pair progamming for web

1차시 웹 개발 맛보기, HTML/CSS 개념알기, 코딩 환경설정하기

실제 제작 작품
대통령 후보 닮은꼴
뉴진스(NewJeans) 닮은꼴
OH MY GIRL! 닮은꼴
남스 닮은꼴
에스파 닮은꼴
이상한 변호사 우영우 닮은꼴
수강생 작품 모음
New
오징어게임 닮은꼴 테스트
뉴진스 닮은꼴
2
우영우 닮은꼴
예제 소스코드
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://htmlcolorcodes.com/
•
깃허브 https://github.com/
•
리플잇 https://replit.com/
•
넷틀리파이 https://app.netlify.com/
•
프리넘 https://www.freenom.com/en/index.html?lang=en
•
카카오 애드핏 https://adfit.kakao.com/
•
유튜브 인급동 변경하고 패들렛에 스크린샷 올리기
나의 조화로운 Padlet
Made with Padlet
samyang.padlet.org

2차시 챗GPT, 인공지능을 이용한 pair programming

AI 도구 가입하기

챗GPT
https://chatgpt.com/
https://chatgpt.com/
chatgpt.com
MS코파일럿
Microsoft Copilot: Your everyday AI companion
Microsoft Copilot leverages the power of AI to boost productivity, unlock creativity, and helps you understand information better with a simple chat experience.
copilot.microsoft.com

예시 프롬프트

HTML의 기본 문법을 알려줘
야, 좀 쉽게 설명해줘. 나 엔트리 코딩만 해봤어
수정할 부분과 해당 코드만 알려줘

티쳐블 머신 이용해서 모델 만들기

Teachable Machine
Train a computer to recognize your own images, sounds, & poses. A fast, easy way to create machine learning models for your sites, apps, and more – no expertise or coding required.
teachablemachine.withgoogle.com

파일 일괄 다운로더

ImageAssistant Batch Image Downloader
An image extractor for sniffing, analyzing and batch downloading images from web page.
chromewebstore.google.com

사용법

크롬 브라우져 확장 프로그램을 설치하고 퍼즐 모양 아이콘을 눌러 확장프로그램 핀을 고정한다
아이콘을 확인한다.
크롬브라우져 탭을 새로 띄워 검색어를 입력한다 댕댕이
구글 검색 - 이미지 탭에 들어가
확장 프로그램 아이콘을 눌러 메뉴에서 Extract Current Page를 선택한다
그림 파일 사이즈를 100x100 이상으로 선택하여 사이즈를 조절하고 전체를 다운로드 받는다.
Continue를 눌러 이미지를 전체 다운로드 합니다. 다운로드가 시작됩니다.
[tip] 한번에 다운이 안되고 자꾸 저장하라고 해요
이 경우 크롬 브라우져에서 설정을 변경해야합니다
설정에서 다운로드를 검색합니다.
다운로드 전에 각 파일의 저장 위치 확인 기능을 끕니다.

3차시

```
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 = "";
}
펑션을 수정하세요
코드가 어디까지인지 모르겠다면 토글버튼을 눌러서 확인 후 복사 → 챗GPT등을 이용해 수정 하여 붙여넣기 합니다
현재까지 결과
게이지바가 표시되지 않는 것이 정상입니다.
css 부분을 수정하기 위해 Style.css를 선택하고 코드를 복사합니다
```
<css코드>
```

기존에 클래스 wooyoungwoo, donggrami,  sooyeon, ms, moonu 대신에 
JOY, ANGER, ENVY, ANXIETY, FEAR에 대한 css 코드를 만들어주세요
전체 CSS 코드를 작성해주세요
11
👍
1
Made with Slashpage