HTML 태그 정리

1. <form>

사용자와 상호작용하기 위한 태그이다.
대표적으로 로그인, 로그아웃 등에 사용이 된다.

<form action="전송할 서버 주소" method="전송할 방식">
  <!-- label, input, textarea, button 등이 들어감 -->
</form>

• action: <form>내용이 전송될 서버의 주소를 기입
• method: <form>내용이 전송할 때 사용할 방식을 기입

2. <input />

사용자에서 정보를 입력받기 위해 사용하는 태그이다. ( 한 줄 )

<input type="" placeholder="" id="" name="" value="" />

• type: 사용 형태를 기입 ( text, radio, file 등 )
• placeholder: 기본 텍스트를 기입 ( 일반적 텍스트와 다름 )
• id: <label>과 연결시키기 위해 같은 값을 기입해야 함
• name: 서버에서 받을 이름을 지정
• value: 해당 <input>의 값

3. <textarea>

사용자에서 정보를 입력받기 위해 사용하는 태그이다. ( 여러 줄 )

<textarea type="" placeholder="" id="" name="" value="" rows="10" cols="20" />

• rows: 현재 폰트 사이트에 맞춰서 세로로 몇 글자 넣을지 지정
• cols: 현재 폰트 사이트에 맞춰서 가로로 몇 글자 넣을지 지정

4. <label>

<input> 이나 <textarea>가 어떤 역할을 하는지 알려주는 태그이다.

<label for="id">아이디</label>
<input type="text" id="id" />

5. <button>

직접 누를 수 있는 버튼이다.

<button type="">click me</button>

• type: 버튼의 타입을 결정함 ( button, submit, reset 등 )

6. <select>와 <option>

7. <fieldset>과 <legend>

<fieldset>은 여러 <input />을 하나로 묶는 태그이고,
<legend>는 <fieldset>에 대한 설명을 적는 태그이다.

<form>
  <fieldset>
    <legend>폼 그룹</legend>
    <input type="text" /><br />
    <input type="checkbox" />
  </fieldset>
</form>

폼 그룹

7. <u> vs <ins>

둘 다 컨텐츠에 밑줄을 긋는 태그이다.

• <u>: 의미없음
• <ins>: 새로 추가된 내용을 의미함

u
ins

8. <map>과 <area>

9. <bdo>와 <bdi>

텍스트의 방향을 결정하는 태그이다.
<bdo>는 자동 결정, <bdi>는 직접 입력해줘야 한다.

<bdo>자동 결정</bdo>
<bdi dir="ltr">좌 -> 우</bdi>
<bdi dir="rtl">우 -> 좌</bdi>

<!--
	display변경하고 width를 부여해야 제대로 확인이 가능함
	style="display: inline-block; width: 100px; background-color: black; color: white;
-->

자동 결정
좌 -> 우
우 -> 좌

10. <dl>, <dt>, <dd>

<dl>
  <dt>용어</dt>
  <dd>용어에 대한 설명</dd>
</dl>

용어 용어에 대한 설명

11. <meter>과 <progress>

<meter>는 단순한 수치를 의미하고, <progress>는 진행 정도를 의미한다.

<meter value="50" min="0" max="100"></meter> 
<progress value="50" max="100"></progress>

12. <video>

영상을 보여주기 위한 태그이다.

<video src="비디오이름.확장자" poster="포스터이름.확장자" autoplay controls loop>
  비디오 재생 불가능할 경우 보여줄 내용
</video>

• src: 비디오 파일
• poster: 비디오 파일을 불러오기전 보여줄 이미지 파일
• autoplay: 자동 재생
• controls: 비디오 컨트롤바 제공
• loop: 반복 재생
• muted: 음소거

13. <audio>

<audio src="오디오.확장자" autoplay controls loop volume>
  오디오 재생 불가능할 경우 보여줄 내용
</audio>

14. <iframe>

비디오, 오디오를 제외한 다른 것들을 넣을 때 사용하는 태그이다.

<iframe width="" height="" src="웹문서 주소">
  아이프레임을 지원하지 않을 경우 표시할 내용
</iframe>

참고한 사이트

• 제로초
• mdn