3일째 날 학습 강의
오늘은 HTML의 폼(form)과 테이블(table)을 중점적으로 다룰 거예요. 폼은 사용자 입력을 받을 때 사용되며, 테이블은 데이터를 구조화하여 표시할 때 사용돼요. 두 가지 모두 웹 개발에서 매우 중요한 요소들이에요. 그럼 시작해 볼까요?
폼(Form)의 이해
폼은 사용자로부터 데이터를 입력받아 서버로 전송하는 역할을 해요. 회원가입, 로그인, 검색 등 다양한 기능을 구현할 때 사용되죠.
폼 태그와 속성
폼을 작성할 때는 <form> 태그를 사용해요. action 속성은 데이터를 전송할 URL을, method 속성은 데이터 전송 방식을 지정해요. method는 주로 GET과 POST를 사용해요. GET은 데이터를 URL에 포함해 전송하고, POST는 데이터를 본문(body)에 포함해 전송해요.
<form action="/submit" method="post">
<!-- 폼 요소들이 여기에 들어갑니다 -->
</form>
이 예제는 데이터를 "/submit" URL로 POST 방식으로 전송하는 폼을 만들어요.
입력 요소들
폼에는 다양한 입력 요소들이 있어요. <input> 태그는 여러 유형의 입력 필드를 만들 수 있어요. type 속성에 따라 텍스트, 비밀번호, 이메일, 버튼 등 다양한 입력 필드를 만들 수 있죠.
<form action="/submit" method="post">
<label for="username"> 사용자 이름:</label>
<input type="text" id="username" name="username">
<label for="password">비밀번호:</label>
<input type="password" id="password" name="password">
<label for="email">이메일:</label>
<input type="email" id="email" name="email">
<button type="submit">제출</button>
</form>
이 예제는 사용자 이름, 비밀번호, 이메일을 입력받는 필드와 제출 버튼을 포함한 폼을 만들어요. label 태그는 입력 필드와 관련된 텍스트를 표시하며, for 속성은 연결할 입력 필드의 id를 지정해요.
텍스트 영역과 선택 요소들
텍스트 영역은 여러 줄의 텍스트를 입력받을 때 사용해요. <textarea> 태그를 사용하며, 기본적으로는 rows와 cols 속성으로 크기를 지정할 수 있어요.
<form action="/submit" method="post">
<label for="message">메시지:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea>
<button type="submit">제출</button>
</form>
이 예제는 사용자가 메시지를 입력할 수 있는 텍스트 영역을 포함해요. 선택 요소로는 체크박스, 라디오 버튼, 드롭다운 메뉴가 있어요. 체크박스는 여러 개의 선택지를, 라디오 버튼은 하나의 선택지를, 드롭다운 메뉴는 여러 개의 항목 중 하나를 선택할 수 있게 해 줘요.
<form action="/submit" method="post">
<label>취미:</label>
<input type="checkbox" id="hobby1" name="hobby" value="reading">
<label for="hobby1">독서</label>
<input type="checkbox" id="hobby2" name="hobby" value="traveling">
<label for="hobby2">여행</label>
<label>성별:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">남성</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">여성</label>
<label for="country">국가:</label>
<select id="country" name="country">
<option value="kr">한국</option>
<option value="us">미국</option>
<option value="jp">일본</option>
</select>
<button type="submit">제출</button>
</form>
이 예제는 취미, 성별, 국가를 선택할 수 있는 입력 요소들을 포함해요.
테이블(Table)의 이해
테이블은 데이터를 행과 열로 구성하여 시각적으로 정리해 보여주는 역할을 해요.
테이블 태그와 구조
테이블을 작성할 때는 <table>, <tr>, <td> 태그를 사용해요. <tr> 태그는 행(row)을, <td> 태그는 셀(cell)을 나타내요. <th> 태그는 표의 머리글을 나타내며, <td> 태그와 달리 기본적으로 텍스트가 굵게 표시돼요.
<table>
<tr>
<th>이름</th>
<th>나이</th>
<th>직업</th>
</tr>
<tr>
<td>홍길동</td>
<td>30</td>
<td>개발자</td>
</tr>
<tr>
<td>김철수</td>
<td>25</td>
<td>디자이너</td>
</tr>
</table>
이 예제는 이름, 나이, 직업을 포함한 간단한 테이블을 만들어요. 각 행은 <tr> 태그로, 각 셀은 <td> 태그로 감싸요.
테이블 속성들
테이블에는 다양한 속성을 사용할 수 있어요. border 속성은 테이블과 셀에 테두리를 추가해요. cellpadding 속성은 셀의 여백을, cellspacing 속성은 셀 간의 간격을 설정해요.
<table border="1" cellpadding="10" cellspacing="0">
<tr>
<th>이름</th>
<th>나이</th>
<th>직업</th>
</tr>
<tr>
<td>홍길동</td>
<td>30</td>
<td>개발자</td>
</tr>
<tr>
<td>김철수</td>
<td>25</td>
<td>디자이너</td>
</tr>
</table>
이 예제는 테두리, 여백, 간격이 설정된 테이블을 만들어요.
테이블의 헤더와 본문
테이블은 <thead>, <tbody>, <tfoot> 태그로 헤더, 본문, 푸터를 구분할 수 있어요. 이를 통해 테이블의 구조를 더 명확하게 만들 수 있어요.
<table border="1">
<thead>
<tr>
<th>이름</th>
<th>나이</th>
<th>직업</th>
</tr>
</thead>
<tbody>
<tr>
<td>홍길동</td>
<td>30</td>
<td>개발자</td>
</tr>
<tr>
<td>김철수</td>
<td>25</td>
<td>디자이너</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">총 2명 </td>
</tr>
</tfoot>
</table>
이 예제는 테이블을 헤더, 본문, 푸터로 구분하여 작성한 예시예요. <tfoot> 태그의 colspan 속성은 셀을 병합할 때 사용돼요.
폼과 테이블을 함께 사용하기
이제 폼과 테이블을 함께 사용하여 더 복잡한 예제를 만들어 볼게요.
<! DOCTYPE html>
<html>
<head>
<title>폼과 테이블 예제 </title>
</head>
<body>
<h1>회원가입</h1>
<form action="/submit" method="post">
<table border="1">
<tr>
<th>항목</th>
<th>입력</th>
</tr>
<tr>
<td><label for="username"> 사용자 이름:</label></td>
<td><input type="text" id="username" name="username"></td>
</tr>
<tr>
<td><label for="password">비밀번호:</label></td>
<td><input type="password" id="password" name="password"></td>
</tr>
<tr>
<td><label for="email">이메일:</label></td>
<td><input type="email" id="email" name="email"></td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<button type="submit">가입하기</button>
</td>
</tr>
</table>
</form>
</body>
</html>
이 예제는 폼과 테이블을 결합하여 회원가입 폼을 만드는 예시예요. 테이블을 사용하여 폼 요소들을 정리하고, 사용자 입력을 받는 구조를 만들었어요.
학습 팁
HTML을 잘 배우기 위해서는 꾸준히 연습하고 다양한 예제를 작성해 보는 것이 중요해요. 이번 학습 내용을 바탕으로, 직접 폼과 테이블을 활용한 웹페이지를 만들어 보세요. 또한, 다른 웹사이트의 소스 코드를 분석해 보고, 필요하다면 인터넷 강의나 튜토리얼을 참고하는 것도 큰 도움이 돼요. 오늘도 열심히 학습했어요! 폼과 테이블을 잘 이해하면, 웹페이지의 기능과 구조를 더욱 풍부하게 만들 수 있어요. 내일은 더 흥미롭고 유익한 내용으로 돌아올게요. 계속해서 즐겁게 학습해 봅시다!