이번 포스팅에서는 html의 <table>엘리먼트를 이용하여 기본적인 게시판 형태를 만들어 보려고 한다. 이전 포스팅에서 <table>엘리먼트에 대해 다뤘었는데 짧게 복습해보자.
html 코드에서 테이블을 만들 때는 <table>엘리먼트 안에 <tr>엘리먼트와 <td>엘리먼트를 사용한다. 테이블을 구성할 때는 몇개의 줄과 칸으로 구성할 것인지를 먼저 생각해야 한다. 이 때 줄을 생성하는 것이 <tr>엘리먼트이고 칸을 생성하는 것이 <td>엘리먼트이다. 다시말하면, <tr>엘리먼트의 개수만큼 row(행)를 생성하고 <td>엘리먼트의 개수만큼 column(열)을 생성한다. 기본적인 게시판 모양의 코드는 아래와 같다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>practice</title>
</head>
<body>
<h1>
<a href="#">게시판 로고</a>
</h1>
<table border=1>
<tr>
<td>번호</td>
<td>제목</td>
<td>작성자</td>
<td>작성일</td>
<td>조회수</td>
</tr>
<tr>
<td>1</td>
<td><a href=".\view.html">안녕하세요.</a></td>
<td>web7722</td>
<td>2021-12-29</td>
<td>0</td>
</tr>
<tr>
<td>2</td>
<td><a href=".\public\web.html">안녕하세요2.</a></td>
<td>web7722</td>
<td>2021-12-29</td>
<td>2</td>
</tr>
</table>
<a href=".\write.html">글쓰기</a>
</body>
</html>
<body>엘리먼트 안에 게시판 로고로 사용될 <h1>엘리먼트를 사용하였고 그 아래 <table>엘리먼트를 사용하여 테이블을 생성한 것을 볼 수 있다. 3개의 <tr>엘리먼트를 통해 3줄(row)짜리 테이블로 구성하였고 각각의 <tr>엘리먼트 안에 5개의 <td>엘리먼트를 통해 한 줄당 5칸(column)을 가지게끔 하였다. 이로써 3행 5열짜리 테이블이 완성되었다. 코드를 조금 더 살펴보면 <td>엘리먼트 안에 작성된 텍스트들에 <a>엘리먼트를 통해 링크가 걸려져 있는 것을 확인할 수 있는데, 이는 우리가 게시판에서 제목을 클릭했을 때 해당 제목을 가진 게시글로 이동하는 효과를 주기 위함이다. 그리고 테이블 밑에 <a>엘리먼트를 사용하여 "글쓰기"를 클릭하였을 때 글을 작성할 수 있는 페이지로 넘어갈 수 있도록 하였다.
이제 "글쓰기"를 클릭하였을 때 넘어가게 되는 페이지를 다음과 같이 제작해보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>write</title>
</head>
<body>
<h1>
<a href=".\index.html">게시판 로고</a>
</h1>
<form method="get" action="./view.html">
<table>
<tr>
<td>제목</td>
<td><input type="text" name="subject"></td>
</tr>
<tr>
<td>이름</td>
<td><input type="text" name="writer"></td>
</tr>
<tr>
<td>비밀번호</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td>내용</td>
<td>
<textarea name="content"></textarea> <!--input 박스는 너무 작다. 내용 작성란을 만들때는 textarea엘리먼트 사용-->
</td>
</tr>
</table>
<input type="submit" value="글쓰기">
</form>
</body>
</html>
앞에서 게시판 페이지를 만들 때 사용했던 <tr>, <td>엘리먼트와 <input>엘리먼트를 사용하여 글 작성 페이지를 구성하였다. 여기서 알아두고 넘어가야할 부분이 있는데 바로 <form>엘리먼트이다.
<form>엘리먼트
<input>엘리먼트에 의해 생성된 input 박스의 역할은 홈페이지를 이용하는 사람들이 내용을 입력할 수 있는 공간을 만들어 주는 것이다. 사이트는 이렇게 사용자가 입력한 내용을 저장하게 되고 해당 내용들을 어딘가로 보내야만 하는데 이 때 사용하는 엘리먼트가 <form>엘리먼트 이다. 다시말해, 사용자가 input 박스에 입력한 내용을 어딘가로 보내기 위한 작업을 수행해주는 엘리먼트가 <form>이라고 보면된다.
위에 적혀있는 코드에서는 <table>을 감싼 형태로 <form>엘리먼트가 작성되었다. <form>을 사용하는 목적은 input 박스에 입력된 내용들을 다른 페이지에 전달하기 위함이기 때문에 기본적으로 <form>을 사용하는 구간은 input 박스가 처음 생길 때부터 끝나는 지점까지 이다.
<form>엘리먼트의 대표적인 2가지 속성으로는 action="" 과 method=""가 존재한다. action 속성에는 input 박스에 입력된 내용을 어디에 보낼 것인지를 속성값으로 주면 된다. ( input 내용을 보낼 페이지를 속성값으로 입력 ) action 속성과 연결지어서 생각해야할 것이 있는데 이는 바로 <table>엘리먼트 아래에 위치한 <input type="submit" value="글쓰기">이다. <form>엘리먼트의 action을 동작시키는 버튼이 바로 <input type="submit">에 의해 생성되는 submit 버튼이기 때문이다.
submit 버튼을 클릭하면 input 박스에 입력된 내용들이 <form>엘리먼트의 action 속성값에 있는 경로로 이동한다. 다시말해, <input type="submit">에 의해 생성된 submit 버튼은 <form action="이동경로">의 action 속성값에 이동할 경로를 작성하게 된다. 주의해야할 점은 <input type="submit">을 <form>엘리먼트 안에서 작성해야 한다는 것이다. submit 버튼은 기본적으로 <input>엘리먼트의 type이기 때문에 <form> 안에 존재해야만 한다.
위의 사진처럼 input 박스에 내용들을 작성하고 submit 버튼을 눌렀을때 입력된 내용들이 <input method="get" action=".\view.html">에 의해 view.html 페이지로 이동하는 것을 확인할 수 있다.
여기서 체크해야할 것은 바로 빨간색으로 표시된 uri 부분이다. submit 버튼을 클릭하면 input 박스에 작성한 내용들이 uri에 실어져서 보내진다는 사실을 확인할 수 있다. 이는 <input>엘리먼트에서 method를 "get" 방식으로 지정하였기 때문에 보이는 것처럼 input 박스에 입력된 내용들이 uri에 들어가게 된 것이다. 하지만 이 방식은 비밀번호와 같은 민감한 정보들 역시 uri에 그대로 노출된다는 사실을 알 수 있다. 이러한 문제 때문에 "post" 방식을 사용하기도 한다.
정리하면, <form>엘리먼트의 method 속성을 이용해 input 박스에 입력된 내용을 어떤 방식으로 보낼지를 지정할 수 있는데 method의 속성값으로는 method="get"과 method="post" 두가지가 존재한다. get 방식은 input박스에 입력한 내용을 url을 통해 전송하고 post 방식은 안보이는 곳에서 내용을 전달한다.
추가로 위에 작성된 코드에서 <form>엘리먼트를 <form method="post" action=".\view.html">과 같이 수정하게 되면 submit 버튼을 눌렀을 때 아래와 같은 화면이 뜨는 것을 확인할 수 있다.
이는 웹브라우저가 기본적으로 get 방식으로 요청된 것만 랜더를 하기 때문이다. post를 쓰는 목적은 화면에 랜더를 하기 위함이 아니라 데이터를 전달하기 위함이기 때문이라고 간단히 알고 넘어가도록 하자.
- GET : url로 내용을 전달합니다. 전달하는 데이터 형식은 queryString.
- POST : 안 보이는 곳에서 내용을 전달합니다. 데이터 형식은 queryString.
'HTML' 카테고리의 다른 글
| HTML의 기초(4) - <label> 엘리먼트 (0) | 2021.12.27 |
|---|---|
| HTML 응용(1) - element들 간의 관계, 이미지 삽입하기 (0) | 2021.12.22 |
| HTML의 기초(3) - table 생성하기 (0) | 2021.12.21 |
| HTML 코드 (1)~(2) (0) | 2021.12.20 |
| HTML의 기초(2) - <a>, <input> element (0) | 2021.12.20 |