01
완벽한 페이지보다 내 페이지를 띄우는 경험
오타가 나도 괜찮습니다. 막히면 바로 손을 들고, 옆사람과 화면을 비교하면서 고치면 됩니다. 목표는 “인터넷에 내 페이지가 뜨는 순간”입니다.
WORKSHOP / 2H · 왕초보 코스
코딩, 오늘 처음 해봐도 괜찮아요.
HTML로 내용을 적고, CSS로 꾸미고, JavaScript로 버튼을 움직입니다. 마지막에는 Cloudflare Pages로 내 자기소개 페이지를 인터넷에 올립니다.
오늘 만드는 것
인사말, 소개 문장, 좋아하는 것, 링크, 버튼이 들어간 나만의 첫 웹페이지입니다.
결과물
https://my-first-page.pages.dev처럼 친구에게 보낼 수 있는 링크 한 줄
Today
2시간 안에 파일 한 장이 웹사이트가 됩니다
웹페이지는 결국 크롬이 열어 보여주는 파일입니다. 오늘은 그 파일을 직접 만들고, 꾸미고, 움직이고, 인터넷에 공개하는 경험까지 가져갑니다.
HTML은 글이 적힌 종이
제목, 문단, 사진, 링크처럼 페이지에 무엇이 들어가는지 정합니다.
CSS는 색연필, JS는 움직이는 손
CSS는 색과 여백을 정하고, JavaScript는 버튼을 눌렀을 때 일이 일어나게 합니다.
Roadmap
오늘 2시간, 이렇게 갑니다
PPTX 흐름을 따라 왕초보가 따라칠 수 있는 순서로 구성했습니다. 설치, 작성, 꾸미기, 움직임, 배포까지 한 번에 연결됩니다.
0:00 - 0:30
HTML · 웹의 뼈대
제목, 문단, 이미지, 링크, 목록, 버튼, 상자를 만들며 index.html을 시작합니다.
0:30 - 1:00
CSS · 페이지 꾸미기
색, 글꼴, 여백, 둥근 모서리, 가운데 정렬을 적용해서 페이지 인상을 바꿉니다.
1:00 - 1:30
JavaScript · 움직임 만들기
버튼 클릭, 메시지 변경, 색 바꾸기처럼 화면 안의 요소를 움직입니다.
1:30 - 2:00
Deploy · 인터넷에 공개
Cloudflare Pages에 폴더를 드래그해서 전 세계에서 열리는 주소를 받습니다.
First File
첫 파일 이름은 반드시 index.html
브라우저와 배포 서비스가 가장 먼저 찾는 파일입니다. 파일명은 소문자 그대로 쓰고, 작업 폴더는 영문 소문자와 하이픈으로 만드는 것이 안전합니다.
메모장으로도 가능하지만 VS Code를 쓰면 훨씬 편하게 따라갈 수 있습니다.
index.html
copy and save
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>나의 첫 페이지</title>
</head>
<body>
<h1>안녕하세요!</h1>
<p>제 첫 페이지입니다.</p>
</body>
</html>
Ctrl + S 저장 후 index.html 더블클릭
Practice
왕초보가 오늘 기억할 핵심만
외울 필요는 없습니다. 만들면서 익숙해지면 됩니다. 오늘은 아래 정도만 알면 충분합니다.
태그는 열고 닫습니다
<h1>안녕</h1>처럼 여는 태그와 닫는 태그 사이에 내용이 들어갑니다. 자주 쓰는 태그는 h1, p, img, a, ul, li, button, div입니다.
CSS 한 줄은 “누가 + 어떻게”입니다
h1 { color: red; }는 모든 h1 글자색을 빨갛게 하라는 뜻입니다. 오늘은 style 태그 안에 직접 작성합니다.
모든 것은 네모 박스입니다
content를 중심으로 안쪽 여백은 padding, 테두리는 border, 바깥 여백은 margin입니다.
클릭하면 실행됩니다
getElementById로 요소를 잡고, addEventListener("click", ...)로 버튼 클릭 후 메시지를 바꿉니다.
Deploy
Cloudflare Pages로 공개하기
내 컴퓨터 안의 파일은 친구가 볼 수 없습니다. Cloudflare Pages에 올리면 누구나 열 수 있는 주소가 생깁니다.
Cloudflare 가입
dash.cloudflare.com에서 이메일과 비밀번호로 가입합니다. 무료 플랜은 카드 등록 없이 시작할 수 있습니다.
Pages 프로젝트 만들기
대시보드에서 Compute 또는 Workers 영역으로 이동한 뒤 Create, Pages, Upload assets를 선택합니다.
폴더째 드래그하기
index.html이 들어 있는 작업 폴더를 점선 박스에 올리고 Deploy site를 누릅니다.
주소 복사해서 공유
30초에서 1분 뒤 Success 메시지가 뜨면
pages.dev 주소를 열고 친구에게 보냅니다.
Troubleshooting
잘 안 될 때는 여기부터 확인하세요
초보 실습에서 가장 자주 막히는 지점만 모았습니다. 대부분 파일명, 위치, 저장, 오타 문제입니다.
페이지가 안 뜨면
파일명이 정확히 index.html인지, 폴더 최상위에 있는지, 배포 후 1분 정도 기다렸는지 확인합니다.
꾸미기가 안 먹으면
<style>이 <head> 안에 있는지, 중괄호와 세미콜론을 빠뜨리지 않았는지 확인합니다.
이미지가 X로 뜨면
사진 파일이 같은 폴더에 있는지, 파일명이 정확한지, 한글이나 공백이 없는 파일명인지 확인합니다.
버튼이 안 움직이면
F12를 누르고 Console 탭의 빨간 메시지를 봅니다. id 오타와 script 위치가 원인인 경우가 많습니다.
이제 내 페이지를 인터넷에 올릴 수 있습니다
다음에는 실제 사진 넣기, 다크 모드 버튼 만들기, 배포 주소 공유하기까지 이어가면 됩니다.