🔖 HTML 기본 태그
| 태그 | 설명 |
|---|
<!DOCTYPE> | 문서의 형식을 지정하는 태그 |
<head> | HTML 문서의 메타데이터를 정의하는 태그 |
<body> | HTML 문서의 내용(Content)을 정의하는 태그
화면에 출력되는 내용을 작성 |
🔖 글자 관련 태그
| 태그 | 설명 |
|---|
<abbr> | 마우스 오버 시 텍스트의 설명을 출력하는 태그 |
| └ title : 텍스트의 설명을 지정하는 속성 |
<mark> | 텍스트에 형광펜 효과를 나타내는 태그 |
<pre> | HTML 문서에 작성된 텍스트 그대로 화면에 출력되는 태그 |
<s> | 취소선을 나타내는 태그 |
<b> | 텍스트를 굵게 표시하는 스타일 태그 |
<strong> | 텍스트를 굵게 표시하며, 내용을 강조하는 태그 |
<i> | 텍스트를 이탤릭체로 표시하는 스타일 태그 |
<em> | 텍스트를 이탤릭체로 표시하며, 내용을 강조하는 태그 |
🌼 웹 접근성 : 모든 사용자들이 신체적 / 환경적 조건과 관계 없이
동등하게 웹 페이지의 정보를 이용할 수 있도록 보장하는 것
🔖 표 관련 태그
| 태그 | 설명 |
|---|
<table> | 1차원 이상의 데이터를 표 형태로 나타내는 태그 |
<tr> | 테이블의 행을 정의하는 태그 |
<th> | 행이나 컬럼의 제목을 정의하는 태그 |
<td> | 데이터 셀을 정의하는 태그 |
| └ rowspan : 해당 셀이 미치는 범위의 행 수를 지정하는 속성 |
| └ colspan : 해당 셀이 미치는 범위의 열 수를 지정하는 속성 |
<caption> | 테이블의 제목이나 설명을 추가하는 태그 |
<thead> | 테이블의 상단 영역을 그룹화하기 위해 지정하는 태그 |
<tbody> | 테이블의 데이터 영역을 그룹화하기 위해 지정하는 태그 |
<tfoot> | 테이블의 하단 영역을 그룹화하기 위해 지정하는 태그 |
🔖 이미지 관련 태그
| 태그 | 설명 |
|---|
<img> | HTML 문서에 사진, 그림을 삽입할 때 사용하는 태그 |
| └ alt : 이미지가 화면에 출력되지 않을 경우 이미지에 대한 설명을 표시하는 속성 |
🔖 하이퍼링크 관련 태그
| 태그 | 설명 |
|---|
<a> | 텍스트에 링크를 지정하는 태그 |
| └ target : 링크 클릭 시 페이지가 열리는 프레임을 지정하는 속성 |
* target 속성 값
_self : 현재 창에서 열기 (기본 값)_blank : 새 창에서 열기_parent : 부모 창에서 열기_top : 가장 상위 창에서 열기
🔖 폼 관련 태그
| 태그 | 설명 |
|---|
<form> | 내부에 작성된 input 태그의 값을 서버로 전달하는 역할을 하는 태그 |
| └ method : 데이터 전송 방식을 지정하는 속성 |
<select> | 콤보박스를 생성하는 태그 |
<option> | select 태그의 자식 태그로 콤보박스의 선택 항목을 정의하는 태그 |
<fieldset> | 여러 개의 태그를 그룹으로 묶는 태그 |
<legend> | fieldset 태그로 그룹화한 범위의 이름을 지정하는 태그 |
* method 속성 값
get : url 주소를 통해 값을 '?'로 구분하여 전달 (기본 값)post : HTTP 메시지의 body에 내용을 담아서 전달
🔖 리스트 관련 태그
| 태그 | 설명 |
|---|
<dl> | 용어와 그에 대한 정의를 표현할 때 사용하는 태그 |
<dt> | 용어를 나타내는 태그 |
<dd> | 용어에 대한 정의 또는 설명을 나타내는 태그 |
⭐ <ul>, <ol>은 단순히 항목을 나열하는 구조이지만,
<dl>은 용어(<dt>)와 설명(<dd>)이 하나의 세트로 항목을 이루는 구조이다.
