이번 글에서는 기본 태그와 자주 쓰이는 요소들을 한번 살펴보겠습니다.
1. p 태그
- paragraph(문단)을 의미하는 태그
- 자동으로 줄 바꿈이 적용되며, 문단 간 기본 여백이 존재합니다.
<p>이 문장은 하나의 문단</p>
<p>여기는 새로운 문단</p>
2. br 태그
- 줄바꿈(line break) 태그
- 문단이 아니라 줄만 바꿉니다.
<p>이것은<br>줄바꿈</p>
3. a 태그 (anchor)
- 하이퍼링크를 만드는 태그
- href 속성으로 이동할 리소스 지정
- 외부 링크(URL) 또는 내부 페이지 내 위치(#id) 가능합니다.
외부 링크
내부 이동
- 경로 지정
- 절대 경로: http://example.com/path/file.html
- 상대 경로: ./file.html 또는 ../상위폴더/file.html
4. style 태그
- HTML 문서 내에서 CSS 정의
- <head> 안에 배치하는 것이 일반적
<style>
p { color: blue; }
</style>
5. list
- 순서 없는 목록 : <ul> + <li>
- 순서 있는 목록 : <ol> + <li>
- HTML5에서는 type 속성이 deprecated → CSS list-style-type 사용 권장
<ul>
<li>react</li>
<li>vue</li>
</ul>
<ol>
<li>1단계</li>
<li>2단계</li>
</ol>
6. table 태그
- 데이터를 행(row) × 열(column) 구조로 표현할 때 사용
- 레이아웃 목적이 아니라, 데이터 표현에만 사용해야 합니다.
<table border="1">
<caption>예시 테이블</caption>
<tr><th>이름</th><th>나이</th></tr>
<tr><td>홍길동</td><td>20</td></tr>
</table>- 태그 정리
- <tr>: 행
- <th>: 제목 셀
- <td>: 일반 셀
- <thead>, <tbody>, <tfoot>: 시맨틱 구조
- rowspan, colspan: 셀 병합
7. image 태그
- 이미지를 삽입할 때 사용
- alt 속성은 접근성과 SEO에 필수적입니다.
<img src="cat.png" alt="고양이 사진" width="200">
8. audio 태그
- 오디오 파일을 삽입하는 태그
- controls 속성을 넣으면 UI가 보입니다.
<audio src="song.mp3" controls autoplay></audio>
- 브라우저 정책 때문에 autoplay는 muted와 함께 사용해야 자동재생 가능합니다 !
9. video 태그
- 영상 삽입 태그
- controls, autoplay, loop 속성 지원합니다.
<video src="movie.mp4" controls width="400"></video>
10. form 태그
- 사용자 입력을 서버로 전송하는 영역
- action(전송 경로), method(GET/POST) 지정
- enctype으로 데이터 인코딩 방식 선택합니다.
- application/x-www-form-urlencoded (기본)
- multipart/form-data (파일 업로드)
- text/plain (거의 안 씀)
<form action="/submit" method="post">
<input type="text" name="user">
<input type="submit" value="전송">
</form>
11. input 태그
- 다양한 입력 필드를 제공
- type 속성에 따라 기능 달라짐 (text, password, file, button 등)
12. checkbox 태그
- 여러 개 중 복수 선택 가능
<label>
<input type="checkbox" name="hobby" value="sleep" checked> 취침
</label>
13. radio 태그
- 동일한 name 그룹 내에서 하나만 선택 가능
<input type="radio" name="gender" value="f">여자
<input type="radio" name="gender" value="m">남자
14. select 태그
- 드롭다운/리스트 선택 UI
<select name="skill">
<option value="react">리액트</option>
<option value="vue">뷰</option>
</select>- multiple 속성으로 다중 선택 가능
15. fieldset 태그
- 관련 입력 요소를 그룹화
- <legend>와 함께 사용합니다.
<fieldset>
<legend>회원정보</legend>
<input type="text" name="name">
</fieldset>
16. div 태그
- 구역을 나누는 블록 요소
- 의미 없는 단순 컨테이너
<div class="box">내용</div>
17. span 태그
- 인라인 요소를 묶을 때 사용
- 보통 CSS 적용용
<p>이 문장에서 <span style="color:red">여기만</span>빨간색</p>
18. semantic 태그
- 의미를 가진 레이아웃 태그
- SEO, 접근성, 가독성을 높임
- 대표 태그 : <header>, <nav>, <main>, <article>, <section>, <footer>
<header>헤더</header>
<nav>메뉴</nav>
<main>본문</main>
<footer>푸터</footer>
마무리
어떤 태그가 있는지 확인하면서 동시에 “언제 어떤 목적에 써야 하는지”를 함께 살펴봤습니다.
데이터는 <table>, 레이아웃은 <div>/시맨틱 태그, 의미 없는 묶음은 <span>처럼 의도에 맞게 써야 SEO와 접근성도 보장됩니다 !
'FRONTEND > HTML' 카테고리의 다른 글
| HTML 기초 정리 (2) | 2025.08.25 |
|---|