옥천교육지원청 중등영재 ai pair progamming for web
1차시 웹 개발 맛보기, HTML/CSS 개념알기, 코딩 환경설정하기
실제 제작 작품
예제 소스코드
1차시 웹 기초 안내 및 개발 환경 셋팅
•
유튜브 인급동 변경하고 패들렛에 스크린샷 올리기
2차시 챗GPT, 인공지능을 이용한 pair programming
AI 도구 가입하기
챗GPT
MS코파일럿
예시 프롬프트
HTML의 기본 문법을 알려줘야, 좀 쉽게 설명해줘. 나 엔트리 코딩만 해봤어수정할 부분과 해당 코드만 알려줘티쳐블 머신 이용해서 모델 만들기
파일 일괄 다운로더
사용법
크롬 브라우져 확장 프로그램을 설치하고 퍼즐 모양 아이콘을 눌러 확장프로그램 핀을 고정한다
아이콘을 확인한다.
크롬브라우져 탭을 새로 띄워 검색어를 입력한다 댕댕이
구글 검색 - 이미지 탭에 들어가
확장 프로그램 아이콘을 눌러 메뉴에서 Extract Current Page를 선택한다
그림 파일 사이즈를 100x100 이상으로 선택하여 사이즈를 조절하고 전체를 다운로드 받는다.
Continue를 눌러 이미지를 전체 다운로드 합니다. 다운로드가 시작됩니다.
[tip] 한번에 다운이 안되고 자꾸 저장하라고 해요
이 경우 크롬 브라우져에서 설정을 변경해야합니다
설정에서 다운로드를 검색합니다.
다운로드 전에 각 파일의 저장 위치 확인 기능을 끕니다.
3차시
```
html코드
```
모델을 바꿀꺼야.
JOY, ANGER, ENVY, ANXIETY, FEAR 5개야.
각각에 맞게 코드를 수정해줘. 한국어로 해줘.결과
펑션을 수정하세요
코드가 어디까지인지 모르겠다면 토글버튼을 눌러서 확인 후 복사 → 챗GPT등을 이용해 수정 하여 붙여넣기 합니다
현재까지 결과
게이지바가 표시되지 않는 것이 정상입니다.
css 부분을 수정하기 위해 Style.css를 선택하고 코드를 복사합니다
```
<css코드>
```
기존에 클래스 wooyoungwoo, donggrami, sooyeon, ms, moonu 대신에
JOY, ANGER, ENVY, ANXIETY, FEAR에 대한 css 코드를 만들어주세요전체 CSS 코드를 작성해주세요