목표
1. html, css, js의 기초 이해
2. 생성형 AI를 활용한 웹사이트 구축
인터넷의 역사
인터넷의 구조
[실습] 코드펜을 활용 웹사이트 프론트엔드 만들기
[ 1단계 ] 코드펜에서 작업공간 생성하기
[2단계 ] HTML, CSS, JS 코드 기본 구조 살펴보기
•
생성형 AI를 활용해서 웹사이트 기본 작성 코드를 알아보자.
◦
chatgpt.com 접속 후 로그인
◦
GPT 명령어 1
HTML 코드를 처음 공부하는데, 제목, 본문, 목차, 이미지, 링크, 버튼 등
기본 요소만 포함된 HTML 코드 작성해
CSS
복사
GPT 답변 1
태그 설명 :
•
위 코드를 코드펜에 적용해 보자.
◦
gpt 코드 복사
◦
코드펜 붙여 넣기
•
[각자 노션] 아래와 같이 코드 와 결과 기록한다.
◦
코드를 넣을 때는 /코드 를 하여 코드 박스를 만들어서 넣는다.
•
HTML 중요 포인트
◦
<head>, <body>에서 헤드 태그에는 웹사이트의 세팅값을, 바디 태그에는 웹사이트의 본문 을 넣어주었다.
◦
<a>, <h1>, <p> 등 다양한 태그가 있으며 각각 링크, 제목, 본문 등을 태그로 구성한다.
[스스로 하기 ] css, JS 코드도 적용해보고 각자 배움노트에 코드, 결과, 중요 포인트 등을 기록하자.
•
CSS 적용
◦
GPT 명령어
gpt가 작성해준 css 코드
•
css 적용된 모습
•
css 중요 포인트
◦
css 코드에서는 body, h1, p 등 html의 각각의 태그에 디자인 요소 값들을 넣어주었다.
•
JS 적용
◦
일반적으로 특정 기능을 추가하는 JS 코드를 요청하면, html, css 전부 따로따로 수정해야 한다.
•
html, css, js 따로따로 수정하는 것이 귀찮다면 html 코드에 모두 합쳐서 달라고 할수도 있다.
html 코드에 css, js, 모두 합쳐서 한번에 주세요
HTML
복사
•
테스트 웹사이트 돌려보기
◦
웹사이트 url 형태로 호스팅 하기
▪
코드펜 하단에 있는 fork 버튼을 눌러 코드를 코드펜 서버에 올린다.
◦
더보기 버튼을 누른다.
•
아래 와 같이 링크로 나올 수 있다.
•
웹사이트 화면 마우스 오른쪽을 누르면 qr코드 생성하기 가 있다.
•
qr코드 생성후 스마트폰이나 아이패드로 접속하여 모바일 환경에서도 나의 웹사이트를 점검한다.
[ 3단계 ] 생성형 AI를 활용하여 나만의 웹사이트 만들기
•
웹사이트 주제
◦
주제 1. 특정 주제를 소개하는 웹사이트
▪
GPT 명령어 예시
환경보호의 중요성을 알리는 웹사이트 HTML, CSS, JS 코드 작성해
CSS
복사
◦
주제 2. 예술을 표현하는 미디어 아트 사이트
▪
GPT 명령어 예시
마우스 움직임에 따라 삼각형이 떨어지는 예술적 아름다움을 표현하는 웹사이트 HTML, CSS, JS 코드 작성
CSS
복사
코드예시
◦
주제 3. 게임 사이트
▪
GPT 명령어 예시
벽돌깨기 게임 html, css, js 코드 작성해
CSS
복사
◦
주제 4. 실시간 정보 사이트
▪
GPT 명령어 예시
실시간 삼성전자, 비트코인, 환율, 날씨 정보 보여주는 웹사이트 html, css, js 코드 작성해
CSS
복사
◦
주제 5. 쇼핑몰 사이트
▪
GPT 명령어 예시
쇼핑몰 사이트 html, css, js 코드 작성해
CSS
복사
◦
주제 6. 퀴즈 사이트
▪
GPT 명령어 예시
고등학교 수준에서 화학문제 퀴즈를 맞출수 있는 웹사이트 html, css, js 코드 작성해
CSS
복사
◦
주제 7. 포트폴리오사이트
▪
GPT 명령어 예시
내가 만든 마인크래프트 작품 소개하는 포트폴리오 웹사이트 html, css, js 코드 작성해
CSS
복사
◦
주제 8. 영화/책 추천 사이트
▪
GPT 명령어 예시
내가 본 영화, 책 추천하는 웹사이트 html, css, js 코드 작성해
CSS
복사
◦
주제9. ai 기반 웹캠 인식 사이트
▪
GPT 명령어 예시
미디어파이프 ai 모델을 가져와서 손가락을 인식해서 손바닥을 인식하면 "안녕" 이라고 말하는 웹사이트
html, css, js코드 작성해
CSS
복사
◦
주제10. 위 주제에 없는 자유주제
▪
GPT 명령어 예시
여러분들이 창의적으로 생각하는 모든 것.
CSS
복사
과제 제출처 : 본인 구글 학교 계정 로그인시 입장 가능
•
제출 내용
◦
선택 주제 무엇인지
◦
제작한 웹사이트 링크
◦
제작 과정 노션 페이지 게시 링크
◦
제작 과정과 결과 표현 캔바 동영상 링크
•
5반
작성자 : 상암고 교사 성원경
업데이트 날짜 : 25년 4월 3일