인터넷의 역사
•
인류 최초로 인터넷을 창시한 사람은 1991년에 팀버너스리 이다.
◦
하이퍼텍스트를 고안하였고, 이를 웹문서에 적용하기 위해 HTML이란 언어를 만들었다.
•
인류 최초의 웹사이트
•
인터넷 웹문서 제작 언어
◦
HTML(하이퍼텍스트 마크업 랭귀지) : 1991년 팀버너스리가 제작한 웹문서의 구조(제목, 본문, 링크)를 제작할 수 있는 컴퓨터 언어.
◦
CSS(캐스케이드 스타일 시트) : 1996년 컴퓨터연구자들이 제작한 웹문서의 디자인(글꼴, 색상, 레이아웃)을 지정할수 있는 컴퓨터 언어
◦
JS(자바 스크립트) : 1997년 컴퓨터연구자들이 개발한 웹문서의 동작을 구현하기 위한 프로그래밍 언어
인터넷의 구조
•
프론트엔드 와 백엔드
◦
프론트엔드 : 웹사이트의 보여지는 화면을 구성하는 코드
▪
프론트 엔드는 보통 생성형 AI에게 코드를 짜달라고 하거나, 코드펜 등을 써서 웹사이트를 제작함.
◦
백엔드 : 웹사이트의 보여지지 않지만 뒤에서 서버관리, 데이터베이스, 보안 등을 관리함.
▪
호스팅 : 서버 PC에서 내 프론트 엔드 코드와 벡엔드 데이터베이스를 동작시켜 외부에서 내 웹사이트에 들어 올수 있게 하는 것
▪
백엔드는 보통 서버를 제공하는 클라우드 서비스를 이용한다.
•
대표적인 백엔드 서비스로는 아마존의 AWS, 구글의 파이어베이스, ms 애저, neflify 등이 있다.
•
DNS(도메인 네임 시스템)
◦
웹사이트에 들어가기 위해서는 해당 서버 ip주소를 치고 들어가야 하는데, 이것이 외우기 어려워서 문자형태의 도메인(url)을 지정하여 관리하는 시스템이다. 미국에서 관리하고 있다.
[실습] 나만의 웹사이트 만들기
•
기초작업 코드펜 작업링크
Html코드 적용
•
화면 모습
HTML 코드
CSS 적용 코드
•
html 은 head, body, p, h1, a 같은 웹사이트 구성요소 태그로 만들어진다.
•
그 태그를 꾸며주는 코드는 바로 CSS 이다.
JS 자바스크립트 코드 추가
•
자바스크립트는 함수를 정의해서 버튼을 누르면 기능을 하는 함수가 활성화 된다.
•
최종코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>돈이 내리는 웹사이트 💸</title>
<style>
body {
margin: 0;
overflow: hidden;
background: linear-gradient(to bottom, #000000, #0f2027);
font-family: 'Segoe UI', sans-serif;
color: white;
text-align: center;
padding-top: 50px;
}
h1 {
font-size: 2.5em;
text-shadow: 0 0 10px lime;
animation: glow 2s infinite alternate;
}
button {
margin: 20px;
padding: 12px 24px;
font-size: 1.2em;
border: none;
border-radius: 25px;
background-color: #00ff99;
color: #000;
cursor: pointer;
box-shadow: 0 0 10px #00ffcc;
transition: all 0.3s ease;
}
button:hover {
background-color: #00cc77;
box-shadow: 0 0 20px #00ffcc;
}
.money {
position: absolute;
top: -50px;
font-size: 2em;
animation: fall linear;
user-select: none;
pointer-events: none;
}
@keyframes fall {
to {
transform: translateY(110vh) rotate(360deg);
opacity: 0;
}
}
@keyframes glow {
from {
text-shadow: 0 0 5px lime;
}
to {
text-shadow: 0 0 20px lime, 0 0 40px lime;
}
}
</style>
</head>
<body>
<h1>돈이 내리는 웹사이트 💸</h1>
<button onclick="makeItRain()">💸 돈 내리게 하기</button>
<button onclick="toggleBackground()">🌈 배경 바꾸기</button>
<button onclick="goFullScreen()">🔲 전체화면</button>
<script>
// 돈을 떨어뜨리는 함수
function makeItRain(count = 30) {
for (let i = 0; i < count; i++) {
const money = document.createElement('div');
money.classList.add('money');
money.textContent = '💸'; // 💵 or 💰로 바꿔도 됨
money.style.left = Math.random() * window.innerWidth + 'px';
money.style.animationDuration = 3 + Math.random() * 3 + 's';
money.style.fontSize = (20 + Math.random() * 30) + 'px';
document.body.appendChild(money);
// 일정 시간 후 삭제
setTimeout(() => {
money.remove();
}, 6000);
}
}
// 배경 색상 토글
let toggle = false;
function toggleBackground() {
toggle = !toggle;
document.body.style.background = toggle
? "linear-gradient(to bottom, #ff6a00, #ee0979)"
: "linear-gradient(to bottom, #000000, #0f2027)";
}
// 전체화면 전환
function goFullScreen() {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen();
} else {
document.exitFullscreen();
}
}
// 마우스 클릭 시 돈 떨어지기
document.addEventListener('click', () => {
makeItRain(5);
});
</script>
</body>
</html>
HTML
복사