Day 1: 환경 셋업 & HTML 기초
좋습니다 👍 이제 Day 1 학습 플랜을 실습 예제까지 포함해서 구체적으로 정리해드릴게요.
🗓️ Day 1: 환경 셋업 & HTML 기초
1. VS Code 환경 준비
- VS Code 설치 후 확장 기능 추가:
- Live Server → HTML 저장 시 자동 새로고침
- Prettier → 코드 자동 정렬
- Auto Rename Tag → 태그 자동 동기화
- 프로젝트 폴더 생성:
my-first-web/ └── index.html
2. HTML 기본 구조 이해
- HTML 문서는
<!DOCTYPE html>선언으로 시작 <head>에는 문서 정보(제목, CSS 연결 등),<body>에는 실제 화면에 표시될 내용 작성
3. 실습 예제: 자기소개 페이지 만들기
index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>나의 첫 웹 페이지</title>
</head>
<body>
<h1>안녕하세요! 👋</h1>
<p>저는 웹 개발을 배우고 있는 학생입니다.</p>
<h2>관심사</h2>
<ul>
<li>HTML/CSS/JS 배우기</li>
<li>작은 웹 앱 만들기</li>
<li>GitHub에 프로젝트 올리기</li>
</ul>
<h2>연락처</h2>
<p>Email: myemail@example.com</p>
<a href="https://github.com/myprofile" target="_blank">GitHub 프로필</a>
</body>
</html>
4. 실행 방법
- VS Code에서
index.html파일 열기 - 우클릭 → Open with Live Server 선택
- 브라우저에서 자기소개 페이지 확인
5. 학습 목표
- HTML 기본 태그(
<h1>,<p>,<ul>,<a>) 익히기 - VS Code와 Live Server로 빠른 피드백 경험하기
- 웹 개발의 첫 성취감 느끼기 🎉
👉 Day 2에서는 HTML 심화 학습으로 시맨틱 태그와 폼 요소를 활용해 회원가입 페이지를 만들어볼 수 있습니다. 원하시면 Day 2 실습 예제도 바로 이어서 정리해드릴게요.
