인터넷의 역사
•
인터넷은 1991년 팀버너스리가 유럽입자가속 연구소에서 처음으로 도입했다.
◦
인류최초의 웹사이트 : https://info.cern.ch/
•
웹사이트 제작 컴퓨터 언어
◦
HTML : 하이퍼텍스트 마크업 랭귀지, 웹사이트의 구조를 생성(제목, 글, 링크, 이미지, 목차 등), 팀버너스리가 최초의 웹사이트를 만들때 HTML언어도 함께 만들었음.
◦
CSS : 캐스케이드 스타일 시트, HTML웹 문서에 디자인적 요소를 넣기 위한 언어(글꼴, 색상, 레이아웃 등)
◦
JS : 자바 스크립트, 웹사이트에 조건에 따른 동작을 구현하기 위한 프로그래밍 언어
웹사이트의 구조
•
백엔드와 프론테엔드
◦
프론트엔드 : 웹사이트이 보여지는 화면, 기능을 관리
▪
나만의 웹사이트를 만들때는 chatgpt 등을 통해 html, css, js 코드를 작성해서 구현
◦
백엔드 : 웹사이트에 보여 지지는 않지만 서버관리, 보안, 고객 데이터베이스 등을 관리
▪
호스팅, 데이터베이스 서비스를 관리하고 있는 백엔드 회사 서비스를 활용(아마존 AWS, 구글 파이어베이스 등)
생성형 AI를 활용한 웹사이트 생성(feat. chatGPT, codepen)
목표 1. 코드펜을 활용해서 웹사이트 개발환경 구축
목표 2. chatGPT를 활용해서 내가 원하는 웹사이트의 코드 생성
목표 3. chatGPT에서 생성한 코드를 코드펜에 넣어서 웹사이트 내 스타일로 변경하기
•
코드펜 개발환경 링크
•
기본 html 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>나의 첫 번째 웹페이지</title>
</head>
<body>
<!-- 페이지 제목 -->
<h1>나의 첫 번째 웹페이지</h1>
<!-- 목차 -->
<h2>목차</h2>
<ul>
<li><a href="#intro">소개</a></li>
<li><a href="#photo">사진</a></li>
<li><a href="#more">더 알아보기</a></li>
<li><a href="#contact">문의하기</a></li>
</ul>
<!-- 본문 소개 -->
<h2 id="intro">소개</h2>
<p>안녕하세요! 저는 웹 개발을 배우기 시작한 고등학생입니다. 이 페이지는 HTML 연습을 위해 만든 샘플입니다.</p>
<!-- 이미지 추가 -->
<h2 id="photo">사진</h2>
<img src="https://via.placeholder.com/300x200" alt="샘플 이미지">
<!-- 링크 -->
<h2 id="more">더 알아보기</h2>
<p>HTML에 대해 더 알고 싶다면 <a href="https://developer.mozilla.org/ko/docs/Web/HTML" target="_blank">MDN 웹 문서</a>를 참고하세요.</p>
<!-- 버튼 -->
<h2 id="contact">문의하기</h2>
<p>궁금한 점이 있다면 아래 버튼을 눌러주세요!</p>
<button onclick="alert('이 기능은 아직 작동하지 않아요!')">문의하기</button>
</body>
</html>
HTML
복사
•
코드 설명
◦
위 코드에서 <head> 태그와 <body>태그로 세팅과 본문이 구분되어 있다.
◦
<h1> 은 제목태그, <p>는 본문태그, <a>는 링크 태그 등 다양한 태그를 활용하여 웹사이트 내용을 구성하였다.
•
css 코드
/* 전체 페이지 기본 설정 */
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
background-color: #f5f5f7;
color: #1d1d1f;
margin: 0;
padding: 40px;
line-height: 1.6;
}
/* 큰 제목 */
h1 {
font-size: 3rem;
font-weight: 600;
text-align: center;
margin-bottom: 30px;
}
/* 부제목 */
h2 {
font-size: 1.8rem;
font-weight: 500;
border-bottom: 1px solid #ccc;
padding-bottom: 10px;
margin-top: 40px;
}
/* 본문 텍스트 */
p {
font-size: 1rem;
max-width: 600px;
margin-bottom: 20px;
}
/* 목차 리스트 */
ul {
list-style-type: none;
padding-left: 0;
}
li {
margin-bottom: 10px;
}
/* 링크 스타일 */
a {
color: #0071e3;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* 이미지 */
img {
width: 100%;
max-width: 600px;
border-radius: 12px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
margin-top: 20px;
}
/* 버튼 */
button {
background-color: #0071e3;
color: white;
border: none;
padding: 12px 24px;
font-size: 1rem;
border-radius: 12px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #005bb5;
}
CSS
복사
•
코드설명
◦
css 코드는 각 html 태그에 필요한 디자인 요소의 설정을 넣어주었다.
•
자바스크립트 적용
자바스크립트 추가된 html 코드 :
