2024-07-22 :: 001 HTML 태그 정리

 

   HTML에서 기본적으로 지원하는 태그 이외에 사용자가 임의적으로 생성한 태그 또한 쓸 수 있다. 하지만 태그에 속성값을 넣는 것 말고는 주어진 효과가 없어서 구분을 지어 나열했을 시에 한줄로 입력이 되는 것을 확인할 수 있었다.

 

글로벌 속성의 종류

accesskey="단축키"	공백으로 구분하여 여러 개의 단축키를 지정
class="클래스 명"	공백으로 구분하여 여러 개의 클래스 명을 지정 (여러개의 태그에 중복 가능)
contrteditable="편집 가능 여부"	편집할 수 있는 경우 true, 편집할 수 없는 경우 공백(" ")이나 false로 지정
contextmenu="menu 요소의 id 속성값"	메뉴 요소의 id 속성값을 지정
dir="텍스트표시 방향"	왼쪽 정렬인 경우 ltr, 오른쪽 정렬인 경우 rtl 로 지정
draggable="드래그 사용 여부"	드래그 할 수 있는 경우 true, 드래그 할 수 없는 경우 false로 지정
dropzone="드롭한 아이템 처리 방법"	- copy : 드래그한 데이터가 이 장소에 복사 - move : 드래그한 데이터가 이동 - link : 오리지널 데이터와 드롭된 곳 사이에 통로를 만듦
hidden="hidden"	웹 문서에 표시하지 않음
id="고유 이름"	해당 태그를 유일하게 식별하는 기능으로 동일 문서 내 같은 이름 사용 금지
lang="언어 코드"	한국어(ko), 영어(en), 프랑스어(tr), 일본어(ja) 등 언어 속성값 지정
spellcheck="철자 체크 여부"	철자 체크 사용 여부를 결정
style="CSS 선언"	세미콜론(;)으로 구분하면 여러 개의 CSS 선언이 가능
tabindex="이동 순서"

---

<section> ~ </section>	본문의 구역을 나누는 데 사용됨, 하위 컨텐츠들을 모아둔 그룹
<article> ~ </article>	하위 컨텐츠를 담당함
<p> ~ </p>	빈 줄을 만들어 다음 단락으로 넘어감
<b> ~ </b>	해당 텍스트를 볼드체(굵음) 으로 표시
<strong> ~ </strong>	해당 텍스트를 강조하여 굵게 표시 (볼드체와 유사함)
<i> ~ </i>	해당 텍스트를 이태릭체(기울임) 로 표시
<em> ~ </em>	해당 텍스트를 강조하여 기울인 채 표시 (이태릭체와 유사함)
<ins> ~ </ins>	해당 텍스트에 밑줄을 표시
<del> ~ </del>	해당 텍스트에 취소선을 표시
<sub> ~ </sub>	해당 텍스트를 아랫첨자로 표시
<sup> ~ </sup>	해당 텍스트를 윗첨자로 표시
<mark> ~ </mark>	해당 텍스트에 하이라이트를 표시

 

 

<a href="URL">

<a> ~ </a>	다른 사이트 혹은 같은 문서 내 다른 위치로 이동할 때 사용
href	연결하고자 하는 웹 사이트의 URL이나 경로를 지정함
target	링크를 클릭했을 때 웹 사이트가 열리는 곳을 지정함 _blank : 새로운 웹 브라우저에서 창 열기 _self : 현재 웹 브라우저에서 창 열기 (기본값) _parent : 부모 웹 브라우저에서 창 열기 _top : 웹 브라우저 전체 영역에 창 열기
id (name)	페이지 내 요소 위치 지정을 위해 임의로 값을 입력

 

<table> 태그

<table> ~ </table>

표

<tr> ~ </tr>

적용된 갯수만큼 행을 생성

<td> ~ </td>

적용된 갯수만큼 열을 생성

<th> ~ </th>

표의 머리에서 셀 제목 글자를 강조 (볼드체 및 가운데 정렬)

<caption> ~ </caption>

표의 머리에 제목을 삽입

rowspan

셀을 세로로 병합, 속성값으로 병합하려는 행의 수만큼 지정

colspan

셀을 가로로 병합, 속성값으로 병합하려는 열의 수만큼 지정

 

<img> 태그

<img> ~ </img>	웹 문서에 이미지 삽입을 위한 태그
src	이미지 파일이 저장된 경로 지정
alt	이미지를 윕 브라우저에 불러내지 못했을 경우 표시되는 대체 텍스트 지정
width	이미지의 가로 길이를 픽셀 단위로 지정 (% 사용 시, 브라우저 크기의 비율에 맞춰 반영됨)
height	이미지의 세로 길이를 픽셀 단위로 지정 (% 사용 시, 브라우저 크기의 비율에 맞춰 반영됨) ex. style="height:60px" 또는 height=40%
style	이미지의 스타일을 픽셀 단위로 지정
border	이미지 경계선의 두께를 픽셀 단위로 지정

 

<audio>, <video> 태그

<audio> ~ </audio>	웹 문서에 오디오 파일을 삽입하는 태그
<video> ~ </video>	웹 문서에 비디오 파일을 삽입하는 태그
<source> ~ </source>	여러 형식의 미디어 파일을 동시에 제공할 때 사용
src	오디오/비디오 파일이 저장된 경로 지정
controls	재생 제어기 표시
loop	반복 재생
autoplay	웹 문서가 열림과 동시에 자동으로 재생 (브라우저에서 이 기능을 막아둠)
muted	음소거 상태로 재생되게 함
preload	오디오/비디오 파일 사용 여부와 관계없이 미리 다운로드 함
poster	비디오 파일 재생 전, 또는 다운로드 하지 않은 상태에서 표시될 이미지의 URL을 표시

 

<form> 태그

<form> ~ </form>	웹 양식을 만드는 데 사용하는 태그 (데이터 전달 가능)
<input> ~ </input>	텍스트를 나타낼 수 있는 입력 필드를 나타내는 태그
<textarea> ~ </textarea>	텍스트를 여러 줄에 걸쳐 자유롭게 입력 가능한 텍스트 상자를 생성
<fieldset> ~ </fieldset>	입력 폼이 여러 개 존재할 때, 경계선을 둘러 하나의 그룹으로 만들 때 사용
<select> ~ </select>	펼침 목록에서 한 가지만 선택할 수 있도록 지원하는 태그
<datalist> ~ </datalist>	펼침 목록에서 텍스트 입력 시 자동완성 기능을 제공하는 태그
<option> ~ </option>	드롭 다운 리스트에서 사용되는 하나의 옵션 값을 지정하기 위한 태그
multiple	다중 선택을 위한 속성
action	사용자가 입력한 데이터를 받아 처리하기 위한 웹 프로그램의 페이지 지정
name	폼의 이름을 결정
required	null 값을 허용하지 않을 때 쓰는 속성
maxlength / minlength	글자 수의 최댓값/최솟값을 적용할 때 쓰는 속성
placeholder	특정 내용을 미리 표기할 때 쓰는 속성
readonly	읽기 전용 속성
max / min	숫자의 최댓값/최솟값을 적용할 때 쓰는 속성
type	폼의 모양과 기능 결정	- text : 텍스트를 받음 - password : 비밀번호를 받음 - number : 숫자만 받음 - color : 색상을 받음 - radio : 여러 항목 중 단일 선택을 위해 사용 - checkbox : 여러 항목 중 중복 선택을 위해 사용 - button : 클릭 가능한 버튼을 만듦 - reset : 웹 문서 초기화 - submit : action 주소로 전송 - date : 년-월-일 단위로 원하는 날짜 입력 - month : 년-월 단위로 원하는 날짜 입력 - week : 년-주 단위로 원하는 주일을 입력 - time : 시간만 입력 - range : 특정 범위의 숫자를 선택할 때 사용 - email : 이메일 형식에 맞게 입력되지 않으면 경고창을 띄움 - url : 주소 형식에 맞게 입력되지 않으면 경고창을 띄움
method	웹 서버와 클라이언트 간의 통신 방법을 지정	GET 방식 - URL 뒤에 파라미터를 붙여 데이터를 전송 - 사용자가 입력한 값이 데이터와 결합되어 문자열 형식으로 전송 - 서버로 보낼 수 있는 글자 수는 2,048자 - URL에 데이터 값이 그대로 노출되기 때문에 보안에 취약함
		POST 방식 - HTTP Request 헤더에 파라미터를 붙여 데이터를 전송 - 서버로 보낼 수 있는 글자 수에 한계 없음 - 보안에 강하나 처리가 복잡해 느리고 무겁다는 단점이 있음