[HTML] html 태그의 종류

html의 태그는 각각 고유한 웹 요소가 있다.
예를 들어 p태그는 블록 레벨 요소를 가지고 있어 자기가 속한 영역의 너비를 모두 차지하며
span태그는 인라인 텍스트 요소를 가지고 있어 자기에게 필요한 만큼의 공간만 차지한다.

블록 레벨 요소

복수로 사용하면 다음 문단에서 시작되며 아래쪽으로 구현된다.

• h1~6
• p
• div
  ...

인라인 텍스트 요소

복수로 사용하면 아래쪽으로 구현되는 것이 아닌 오른쪽에 붙는 방식으로 구현된다.

• mark
• strong
• em
• q
• s
  ...

컨테이너

각각의 속성들을 가지고 있는 평균적인 태그와 달리
div, span과 같이 내용에 아무런 영향을 주지 않지만 다른 요소 여럿을 묶어 관리하기 편하게 만드는 역할을 하는 태그도 있다. 이러한 태그를 '컨테이너'라고 한다.

전역 속성

모든 html태그에 사용할 수 있는 속성이다.
속성은 여러가지가 있으며 각자의 특징이 있다.

• id : 요소에 고유한 이름을 부여하는 식별자 역할
• class : 요소를 그룹 별로 묶을 수 있는 식별자 역할
• style : 요소에 적용할 css 스타일 선언
• title : 요소의 추가 정보를 제공하는 텍스트로 툴팁 제공.(마우스를 hover했을 때 뜨는 설명이나 속성)

이미지

이미지를 화면에 표시할 때 사용하는 태그이며 src(이미지의 위치정보나 파일명, 이미지의 url)속성을 사용한다.
아래와 같이 구성되어 있다.

<img src="url" />

링크 표시하기

링크란 현재 웹 페이지에서 다른 웹 페이지로 이동할 수 있는 수단이다.
href(이동하고자 하는 url), target("_blank", "_self" 등이 있으며 새 페이지를 현재 탭에서 열지, 또 다른 탭에서 열지 결정)
아래와 같은 구조이다.

<a href="https://www.youtube.com/">
	유튜브 이동
</a>

목록 만들기

ul과 ol 2가지의 태그가 있으며 순서의 유무에 따라 나뉜다. 모두 블록 레벨 요소를 가지고 있다.

순서가 없을 경우

<ul>
	<li></li>
    <li></li>
    <li></li>
</ul>

순서가 있는 경우

<ol>
	<li></li>
    <li></li>
    <li></li>
</ol>

표 만들기

행과 열로 만들어진 구조이며 여러가지의 태그를 사용하며 표 안의 내용을 구분한다.

• table : 하나의 표를 나타내는 태그
• tr : 표 안에서 하나의 행을 나타내는 태그
• th : 행 안에서 제목에 해당하는 셀을 나타내는 태그
• td : 행 안에서 콘텐츠에 해당하는 셀을 나타내는 태그

<table border="1">
	<tr>
    	<th>한국 선수</th>
        <th>일본 선수</th>
        <th>미국 선수</th>
    </tr>
    	<tr>
    	<th>김철수</th>
        <th>오오다</th>
        <th>제임스</th>
    </tr>
</table>

입력 태그 (input)

위의 태그들은 모두 콘텐츠를 보여주기 위한 '출력' 태그였다. 이제 서버에 값을 입력해주는 '입력'태그를 알아보자

<input type="데이터 유형">

타입에 따라 값을 문자로 받을지, 숫자로 받을지, 날짜 입력 태그가 될지 결정된다.
타입의 예시

• text : 기본값, 문자
• email : 이메일
• password : 비밀번호
• search : 검색할 문자
• date : 날짜와 시간을 지정한다.
• color : 색깔 선택 (컬러 팔레트)
• number : 수치 선택
• range : 수준(달성도) 선택

• input에는 그 용도를 설명하기에 좋은 label 태그를 함께 사용한다.
  사용자에게 직관적인 입력 요소를 알릴 수 있고 코드의 가독성이 향상되기 때문이다.

input의 id, label의 for 속성에 같은 이름을 넣어 서로를 연결한다.
id, for속성을 쓰지 않더라도 label태그 안에 input태그를 넣어도 동일하다.

입력 태그에는 select, texterea, progress 등이 더 있다.

양삭을 만들고 값 전송하기

입력 양식을 만들어주는 form 태그는 사용자가 입력한 데이터를 서버로 보내는 것을 목적으로 한다.
주로 로그인, 회원가입, 검색어 입력 등에 사용된다.
action(입력값을 전송할 서버의 url), method(클라이언트가 입력한 데이터의 목적 GET or POST) 속성을 사용한다.

<form method="post" action="fake_server.php"
	<label for="id">아이디</label>
    <input type="text" id="id">
    <br>
    <label for="pw">비밀번호</label>
    <input type="password" id="pw">
    <br>
    <button>로그인</button>
</form>

위와 같이 form태그 안에 입력 태그를 사용한다.

위에서 설명한 태그들 이외에도 무궁무진하게 많은 html태그가 있다. 그 중 가장 대표적인 것을 공부해 보았다.