HTML을 공부해보자, Tag (2)

무꾸씨·2023년 8월 19일

html tag

백엔드 하려고 공부하는 HTML&CSS&JS

목록 보기

4/14

안녕하세요?
날이 엄청 덥네요 😮‍💨 곧 처서인데, 올해도 처서매직이 통할지 한번 지켜봐야겠어요~
이번시간엔 저번 시간에 이어서 HTML의 태그에 대해 몇가지 더 알아보겠습니다!
그럼 출발~~

`<table>`

table

<table> 태그는 표를 만들기 위한 태그입니다
컴퓨터를 사용하다보면 누구나 한번씩은 엑셀을 사용해본적이 있었죠?
엑셀처럼 행, 열로 이루어진 데이터셋을 정리해서 보여주기 위해 사용하는 태그입니다!

th

<th> 태그는 table header를 뜻합니다
표를 작성하면 보통 가장 첫번째 행에는 열에 대한 타이틀을 작성할텐데요
그럴때 활용하는 태그입니다

tr

<tr> 태그는 table row를 뜻합니다
표의 행을 그릴 때 사용하는 태그입니다

td

<td> 태그는 table data를 뜻합니다
데이터를 집어넣을 때 사용하는 태그입니다

<table>
        <thead>
            <tr>
                <th>번호</th>
                <th>이름</th>
                <th>나이</th>
                <th>생일</th>
                <th>MBTI</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>김우동</td>
                <td>28</td>
                <td>1996.05.23</td>
                <td>ISFJ</td>
            </tr>
            <tr>
                <td>2</td>
                <td>김스시</td>
                <td>29</td>
                <td>2000.11.19</td>
                <td>INTJ</td>
            </tr>
        </tbody>
    </table>

`<form>`

form

<form> 태그는 사용자에게 입력받은 데이터를 전달하기 위해 사용하는 태그입니다.
뭔가 전달하고자 하는 내용이 없다면 굳이 사용할 필요가 없다는 말씀~!

<method> 속성을 통해 데이터 제출 시 사용할 HTTP 메소드를 지정합니다.
RESTful API에 의하면 HTTP 메소드는 크게 GET/POST/PUT/DELETE 이렇게 4가지가 있죠?
다만 <form>의 <method> 속성에선 GET, POST만 사용한답니다.

GET Method

데이터를 action 지정 URL 뒤에 ? 구분자를 넣고 queryString(a.k.a queryParameter) 형태로 전송합니다
GET 메소드 방식의 요청은 브라우저에 캐싱됩니다
쿼리 파라미터가 포함되다보니, 길이에 제한이 있고 URL 뒤에 데이터가 노출되다보니 보안상 취약점이 존재하여 중요한 데이터는 POST 메소드 방식으로 보내야합니다

http://mukkusi.blog?name=HUNY&year=2023

POST Method

POST Method는 queryString으로 데이터를 전송하는 GET 방식과는 다르게 Body에 담아 전송합니다.
브라우저에 캐싱되지 않고, 히스토리에도 남지 않아요~
데이터의 길이제한이 없습니다.
POST의 경우 application/json, application/x-www-form-urlencoded, multipart/form-data 등 데이터의 유형을 나타내는 속성인 enctype을 같이 보내야 합니다

http://mukkusi.blog

POST 
{
	"name" : "HUNY",
    "year" : 2023
}

<form method="POST" action="/login" enctype="application/json">

<input/Button type="submit">

<form> 태그로 감싼 데이터를 전달하기 위해선 데이터를 보내겠다는 이벤트를 주어야겠죠?
대부분 <input> 태그나 <button> 태그를 통해 버튼을 만들고, 버튼에 이벤트를 걸어 전달하는 방식일 텐데요
이렇게 데이터를 전달하기 위해선 type은 꼭 submit이어야 한다는 점 잊지말자구요!?