Day 2: HTML 심화 학습
좋습니다 👍 이제 **Day 2 학습 플랜 (HTML 심화)**을 실습 예제까지 포함해서 정리해드릴게요.
🗓️ Day 2: HTML 심화 학습
1. 학습 목표
- 시맨틱 태그 이해 및 활용
<header>,<nav>,<main>,<section>,<footer> - 폼 요소(Form Elements) 작성
<form>,<input>,<label>,<button> - 웹 페이지 구조를 더 의미 있게 설계하기
2. 실습 예제: 회원가입 페이지 만들기
signup.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>회원가입 페이지</title>
</head>
<body>
<header>
<h1>회원가입</h1>
<nav>
<a href="index.html">홈</a> |
<a href="signup.html">회원가입</a>
</nav>
</header>
<main>
<section>
<h2>정보 입력</h2>
<form action="#" method="post">
<label for="username">아이디:</label>
<input type="text" id="username" name="username" required><br><br>
<label for="email">이메일:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="password">비밀번호:</label>
<input type="password" id="password" name="password" required><br><br>
<button type="submit">가입하기</button>
</form>
</section>
</main>
<footer>
<p>&copy; 2026 My Web Project</p>
</footer>
</body>
</html>
3. 실행 방법
- VS Code에서
signup.html열기 - Live Server로 실행 → 브라우저에서 회원가입 페이지 확인
- 입력 필드에 값 넣고 버튼 클릭 → 아직 서버 연결은 없지만 폼 동작 확인 가능
4. 학습 포인트
- 시맨틱 태그로 페이지 구조를 명확하게 설계
- 폼 요소를 통해 사용자 입력을 받을 수 있음
required속성으로 필수 입력 지정
👉 Day 3에서는 CSS 기초를 배우면서 Day 1 자기소개 페이지와 Day 2 회원가입 페이지에 스타일을 입혀보게 됩니다. 원하시면 Day 3 실습 예제도 바로 이어서 정리해드릴 수 있습니다.
