인터넷의 역사
•
인터넷의 창시자 팀 버너스리
◦
팀 버너스리가 1991년에 인류 최초로 유럽입자가속연구소의 웹사이트를 창시하였다.
•
인류 최초의 웹사이트 주소
◦
하이퍼텍스트 구조로 전세계 웹사이트들이 연결되기 시작함.
•
팀버너스리가 만든 인터넷 언어 : HTML
◦
HTML(하이퍼텍스트 마크업 랭귀지) : 팀 버너스리가 만든 링크형태를 지원하는 웹문서 제작 언어.
▪
웹사이트의 구조(제목, 본문, 링크, 이미지 등)를 생성할 수 있다.
◦
CSS(캐스케이드 스타일 시트) : 1996년에 웹사이트의 디자인 기능을 추가 하기 위해 나온 언어.
◦
JS(자바스크립트) : 1997년에 웹사이트의 동작을 구현하기 위한 프로그래밍 언어.
인터넷의 구조
[실습] 나만의 웹사이트 만들기
•
코드펜 작업링크
•
gpt가 작성해준 html 기본 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>나의 첫 번째 웹페이지</title>
</head>
<body>
<!-- 제목 -->
<h1>원킹의 첫 번째 웹페이지</h1>
<!-- 본문 -->
<p>안녕하세요! HTML 공부를 시작했어요. 이것은 아주 기본적인 웹페이지입니다.</p>
<!-- 목차 -->
<h2>목차</h2>
<ul>
<li><a href="#section1">HTML이란?</a></li>
<li><a href="#section2">기본 태그들</a></li>
<li><a href="#section3">이미지와 링크</a></li>
</ul>
<!-- 본문 내용 섹션 -->
<h2 id="section1">HTML이란?</h2>
<p>HTML은 HyperText Markup Language의 약자로, 웹페이지를 구성하는 데 사용되는 마크업 언어입니다.</p>
<h2 id="section2">기본 태그들</h2>
<p>제목, 본문, 리스트, 이미지, 링크, 버튼 등이 있습니다.</p>
<h2 id="section3">이미지와 링크</h2>
<!-- 이미지 -->
<img src="https://via.placeholder.com/300" alt="예시 이미지" width="300">
<!-- 링크 -->
<p><a href="https://www.w3schools.com" target="_blank">HTML 배우기 (W3Schools)</a></p>
<!-- 버튼 -->
<button onclick="alert('버튼을 클릭했어요!')">클릭하세요</button>
</body>
</html>
HTML
복사
•
결과
CSS, JS 적용하기
•
css 는 각 h1, p, body 같은 태그 마다 디자인 값들을 넣어준다.
•
JS는 특정 동작을 하는 function 코드를 작성해서 버튼에 넣어준다.