HTML 태그는 HTML(HyperText Markup Language) 문서의 구성 요소로서 웹 페이지의 콘텐츠를 정의하고 구조화하는 데 사용된다. 태그는 꺾쇠괄호(<와 >)로 둘러싸인 키워드로 구성되며 대부분의 경우 시작 태그와 종료 태그로 이루어져 있다. 종료 태그는 시작 태그와 동일한 키워드를 사용하되 키워드 앞에 슬래시(/)가 붙는다.
자주 사용되는 태그
- span: 인라인 스타일을 사용하여 글자색과 배경색을 변경합니다.
- ul, ol, li: 목록을 만드는 데 사용되는 요소입니다. ul은 글머리 기호 목록, ol은 번호 매기기 목록, li는 목록을 의미합니다.
- a: 하이퍼링크를 생성하는 요소입니다.
- img: 이미지를 삽입하는 요소입니다.
- table, tr, td, th, thead, tbody, tfoot: 테이블을 만드는 데 사용되는 요소입니다.
- form: 사용자 입력을 수집하는 양식을 생성하는 요소입니다.
- input: 사용자 입력을 받는 데 사용되는 요소로 다양한 유형의 입력을 처리할 수 있습니다.
- textarea: 여러 줄의 텍스트 입력을 받는 데 사용되는 요소입니다.
- button: 버튼을 생성하는 요소입니다.
- label: 양식의 레이블을 정의하는 요소입니다.
span
<p>저는 <span style="color: white; background-color: blue;">프로그래머</span>이고
<span style="color: black; background-color: red;">디자이너</span>입니다.</p>color: "글자색", background-color: "배경색을 지정합니다.
출력 결과
저는 프로그래머이고 디자이너입니다.
ul, ol, li
<ul>
<li>사과</li>
<li>바나나</li>
</ul>
<ol>
<li>빵</li>
<li>우유</li>
</ol><ul>태그는 글머리 기호 목록, <ol>태그는 번호 매기기 목록을 생성하며, <li>태그는 목록을 나타냅니다.
출력 결과
- 사과
- 바나나
- 빵
- 우유
a
<a href="https://tip1spoon.tistory.com">방문하기</a><a>태그는 하이퍼링크를 생성하며, 클릭할 때 해당 URL로 이동합니다.
출력 결과
img
<img src="image.jpg" alt="예시 이미지"><img> 태그는 이미지를 삽입하며, src 속성은 이미지 파일의 경로를 지정합니다.
table, tr, td, th, thead, tbody, tfoot
<table>
<thead>
<tr>
<th>이름</th>
<th>나이</th>
</tr>
</thead>
<tbody>
<tr>
<td>홍길동</td>
<td>25</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>합계</td>
<td>25</td>
</tr>
</tfoot>
</table>
<table>은 테이블을 생성하며, <tr>은 행, <td>는 셀, <th>는 헤더 셀, <thead>는 테이블의 헤더 영역, <tbody>는 테이블의 본문 영역, 그리고 <tfoot>는 테이블의 바닥글 영역을 나타냅니다.
출력 결과
| 이름 | 나이 |
|---|---|
| 홍길동 | 25 |
| 합계 | 25 |
form
<form action="/submit" method="post">
이름: <input type="text" name="name"><br>
<button type="submit">제출</button>
</form><form> 태그는 사용자 입력을 수집하는 양식을 생성합니다. action 속성은 제출될 URL을 지정하고 method 속성은 HTTP 메소드를 설정합니다.
출력 결과
input
<label>이름: <input type="text" name="name"></label><input> 태그는 다양한 유형의 사용자 입력을 받습니다. 이 예시에서는 텍스트 입력을 받습니다.
출력 결과
textarea
<label>메시지: <textarea name="message" rows="5" cols="30"></textarea></label><textarea> 태그는 여러 줄의 텍스트 입력을 받는 데 사용되며, rows와 cols 속성으로 행과 열의 크기를 설정합니다.
출력 결과
button
<button type="submit">제출</button><button> 태그는 버튼을 생성하며, 이 예시에서는 양식 제출 버튼으로 사용됩니다.
출력 결과
label
<label for="username">사용자 이름: </label><input type="text" id="username" name="username"><label> 태그는 양식의 레이블을 정의하며, for 속성은 연관된 입력 요소의 id를 참조합니다. 이렇게 하면 레이블을 클릭하면 해당 입력 요소에 포커스가 맞춰집니다.
출력 결과