HTML 태그 정리본

여태 사용하는 태그 위주로 사용하다보니

Semantic하게 작성하지 못하는 듯 해서 정리하는 <태그 정리본>!

 

 

---

HTML을 작성 할 때 염두해야 할 사항

1. 정보전달을 위해 Semantic하게 작성 할 것

2. 위계 질서를 잘 정리하여 한 눈에 파악하기 용이할 것

---

 

<p attr="value"> 내용 </p>

태그는 일반적으로 열린 태그, 닫힌 태크가 쌍으로 이룬다.

attribute는 태그의 성격을 조금 더 디테일하게 만들기 위한 것으로 value와 함께 사용한다.
예) <p lang="ko"> 안녕하세요 </p>

 

1. 구획 구분 (Sectioning Elements)

*Sectioning Element 내에는 반드시 heading 태그가 포함되어야 함. (책의 목차와도 같은 의미이기 때문)

구분	태그	추가 설명
	<section>
	<article>
	<nav>
	<aside>

+) 추가적으로 구역을 나눌 때 알아둬야 할 태그

<header> : 도입부 (어디든 사용 가능)

<main> : 본문 내 가장 핵심적인 부분 (페이지에 단 하나만 사용)

<footer> : 

 

2. 정보 제공

구분	태그 (반드시 필요한 attr)	추가 설명
제목	<h1>, <h2>, <h3> ~ <h6>	- 폰트 사이즈가가 큼 - bold - 숫자가 커질수록 폰트 사이즈가 작아짐 - 숫자가 클수록 중요도가 높음을 뜻함
내용	<p>	- 한줄로 쭉 화면에 보임 (줄바꿈, 띄워쓰기 적용X)
	<pre>	- Preformatted Text - 작성한 그래도 화면에 보임 (줄바꿈, 띄워쓰기 적용O)
강조	<strong>	- bold
	<em>	- italic
	<u>	- underline
링크	<a href="주소값">	Hypertext Reference에 들어갈 수 있는 value - URL - 상대 경로 - 페이지 내 이동 (id값 사용) 예) href="#id" - 메일 주소 (메일쓰기 창 활성화) 예) href="mailto:메일주소" - 전화 번호 (다이얼 활성화) 예) href="tel:전화번호"
이미지	<img src="주소값" alt="대체문구" />	Source에 들어갈 수 있는 value - URL - 상대 경로 -Alternative Text는 엑박으로 뜰 때 노출되는 대체문구로, 사용자 경험 개선에 도움이 됨 (시각장애인을 위한 screenleader에서 정보 제공용으로도 사용)
목록	<ul>	- 순서가 중요하지 않은 목록에 사용 - <li> 자식요소가 반드시 필요함
	<ol>	- 순서가 중요한 목록에 사용 - <li> 자식요소가 반드시 필요함
	<li>	- <ul>, <ol> 의 자식요소 - 다른 태그들이 <li> 안에 들어오는 것 가능
정의 목록	<dl>	- 용어에 대한 정의 (Description List) - key-value 형태로 구성되어 <dt>, <dd> 자식요소가 필요함
	<dt>	- key에 해당하는 자식요소 (Description Term)
	<dd>	- value에 해당하는 자식요소 (Description Data)
	<dfn>	- <dt>, <dd> 내 좀 더 강조해서 정의하는 부분에 추가 사용 (잘 안쓰지 않을까....?)
테이블	<table>	- 테이블은 하나의 행을 기준으로 구성됨
	<tr>	- Table Row - <th> 또는 <td> 자식요소가 필요 - <tr>에 있는 자식요소의 수는 모두 같아야 함
	<th>	- 테이블 헤더 - <tr>의 자식요소
	<td>	- 테이블 데이터 - <tr>의 자식요소 - rowspan="숫자", colspan="숫자" 로 병합 가능
인용	<blockquote>	- 문단 전체를 인용할 때 사용 - 들여쓰기 스타일 적용됨 - cite="원본 주소" attribute와 함꼐 사용되는 편 - <q> 보다 자주 쓰이는 편
	<q>	- 문단 내 일부를 인용할 때 사용 - 큰따옴포 스타일 적용됨
	<cite>	- <blockquote>의 자식요소로 사용됨 - 누구의 말을 인용한 것인지를 뜻함 - italic 스타일 적용
구역 구분 (의미가 없는 태그)	<div>	- display: block 스타일 - 의미는 없으나, 요소들을 묶어 구역을 구분할떄 유용한 태그! (실제로 가장 많이 써서 div 지옥...)
	<span>	- <p>와 스타일이 같음 - 실무에서 잘 사용하지 않는다고... (사실일까?)
연락처	<address>	- 스타일적으로 차이는 없고 의미를 위한 태그 <address> 내 들어갈 수 있는 내용 - 물리적인 주소 (지도, 위도, 경도) - URL - 메일 주소 - 전화번호 - SNS
약자	<abbr title="풀네임">	- 약자를 사용할때 사용 - underline 점선 스타일 - hover시 풀네임에 대한 정보 제공
코드	<code>	- 스타일적으로 차이는 없고 의미를 위한 태그
구분선	<hr>	- 구분선 (실선)
줄바꿈	<br>	- <p> 또는 <span> 내 줄바꿈을 하고 싶은 경우 사용

* 이 밖에도 다양한 태그들이 있다!

 

3. 사용자로부터 정보를 제공 받는 용도

구분	태그 (반드시 필요한 attr)	추가 설명
폼	<form action="API주소값"            method="GET/POST">	- 데이터 목록의 집합체 - 실무에서 action의 경우 FE에서는 #을 기재해두고, BE에 요청하여 기입하는 편 method="POST" - 입력 및 전송되어야 하는 정보의 양이 많은 경우 사용 - 중요한 정보일때 - 일반적으로 GET 보다 많이 사용되는 듯
입력/선택	<input type="속성" />	- 한줄의 내용을 입력 받을 때 사용 Type에 들어갈 수 있는 value - text - number (min="숫자", max="숫자" 추가적으로 사용 가능) - email - tel - password - url - file (accept="확장자" 추가적으로 사용 가능) Type 외 자주 사용되는 attr - placeholder="무엇을 입력할지 예시 문구" - value="입력된 value값" - maxlength="숫자" / minlenght="숫자"
	<input type="radio" />	- 하나만 선택 가능 (checked로 미리 선택 가능) - 여러개의 radio 버튼을 하나로 묶기 위해 name="그룹명"을 반드시 사용해줘야 함 - 각각의 항복에 대한 내용은 value="이름" 으로 구분 - GET 방식으로 데이터 전송시 URL 끝 부분 : ?name=value
	<input type="checkbox" />	- 중복 선택 가능 (선택 안하기 가능) - 여러개의 checkbox 버튼을 하나로 묶기 위해 name="그룹명"을 반드시 사용해줘야 함 - 각각의 항복에 대한 내용은 value="이름" 으로 구분 - GET 방식으로 데이터 전송시 URL 끝 부분 : ?name=value (여러개 선택시 &로 이어서 URL이 나타남!)
	<select>	- <option> 자식요소가 반드시 필요함 - name="그룹명"을 사용해주는 것이 좋음 - 복수선택을 가능하게 하고 싶다면 multiple 사용 (모양 안이쁨..)
	<option>	- <select>의 자식요소 - value="이름"을 사용해주는 것이 좋음
	<textarea />	- 여러줄의 내용을 입력 받을 때 사용 - rows="숫자", cols="숫자"로 영역을 지정해 줄 수 있음 하지만, 실제로는 사용하지 않고 css로 영역을 지정하는 편 - <input>과 동일하게 placeholder="무엇을 입력할지 예시 문구" 와 잘 사용됨
라벨	<label>	- 폼 양식에 이름을 붙이는 태그 - input과 함께 사용됨 예) <label for="id값"> 이름 </label>       <input id="id값" placeholder="이름을 입력하세요." />
버튼	<button type="속성">	- 폼을 제출할 때 사용됨 - 그외 다른 액션이 생겨날 때 사용됨 Type에 들어갈 수 있는 value - button : 일반적으로 가장 많이 사용 - submit : form을 제출하는 용도 - reset : <input>에 작성된 내용을 없애는 용도

 

4. 미디어 파일

구분	태그 (반드시 필요한 attr)	추가 설명
오디오	<audio src="주소값">	- 사이트가 켜지자 마자 자동재생 되려면 autoplay - 계속 반복하게 하고 싶으면 loop * 환경에 따라 확장자를 지원하지 않을 경우가 있음 예시) <audio controls>     <source src="audio.mp3" type="audio/mpeg" />     <source src="audio.wav" type="audio/wav" />     <source src="audio.ogg" type="audio/ogg" /> </audio>
비디오	<video src="주소값">