개발 도구 (Development Tools)/HTML & CSS

한 장으로 정리하는 HTML

BiCute 2022. 4. 21. 10:00
반응형

 

#1 텍스트 관련 태그

종류 설명
<hn>   제목. <h1>~<h6>까지 사용할 수 있으며 숫자가 커질수록 글자 크기는 작아짐
<p>   텍스트 단락. 내용이 길면 웹브라우저 창의 너비에 맞게 자동으로 줄 바꿈
<br>   줄 바꿈. 텍스트 단락 중 원하는 위치에서 줄 바꿈
<blockquote>   내용 인용. 다른 내용보다 들여 쓰고 단락으로 표시
<strong>   중요한 텍스트를 굵게 표시. 화면 낭독기에서 강조해서 읽어 줌
<b>   중요하지는 않지만 굵게 표시
<em>   중요한 텍스트를 기울게 표시(문장), 화면 낭독기에서 강조해서 읽어 줌
<i>   중요하지는 않지만 기울게 표시(마음속의 생각이나 용어)
<ins>   내용을 편집할 때 추가한 내용을 표사
<del>   내용을 편집할 때 삭제한 내용을 표시
<sup>   위 첨자
<sub>   아래 첨자

 

 

#2 목록 관련 태그

종류 설명
<ol>   순서 있는 목록의 시작과 끝
<ul>   순서 없는 목록의 시작과 끝
<li>   순서 있는 목록이나 순서 없는 목록의 각 항목을 표시
<dl>   설명 목록의 시작과 끝
<dt>   설명 목록의 이름(제목)
<dd>   설명 목록의 값(설명)

 

 

#3 표 관련 태그

종류 설명
<table>   표의 시작과 끝
<caption>   표의 제목
<tr>   표의 행
<td>   표의 셀
<th>   제목 셀
<thead>   표 구조에서 제목 부분
<tbody>   표 구조에서 본문 부분
<tfoot>   표 구조에서 요약이나 정리 부분
<col>   표에서 열의 스타일을 지정
<colgroup>   표에서 여러 열을 함께 묶어서 스타일을 지정

 

 

#4 멀티미디어 관련 태그

종류 설명
<object>   멀티미디어, PDF 파일 등 다양한 형식의 파일을 삽입
<embed>   <audio>, <video> 태그와 <object> 태그도 지원하지 않을 경우 멀티미디어 파일을 삽입
<img>   이미지 파일을 삽입
<audio>   오디오 파일을 삽입
<video>   비디오 파일을 삽입

 

 

#5 폼에서 사용하는 태그

종류 설명
<form>   폼의 시작과 끝
<fieldset>   폼 요소를 그룹으로 묶음
<legend>   필드 셋에 제목을 붙임
<input>   사용자가 내용을 입력할 필드를 삽입
<select>, <option>   드롭다운 목록을 삽입
<textarea>   텍스트를 여러 줄 입력할 수 있는 텍스트 영역을 삽입
<datalist>   데이터 목록을 삽입

 

 

#6 input 태그의 유형(type)

종류 설명
text   한 줄짜리 텍스트를 입력하는 텍스트 상자를 삽입
password   비밀번호를 입력할 수 있는 필드를 삽입
search   검색할 때 입력하는 필드를 삽입
url   URL 주소를 입력할 수 있는 필드를 삽입
email   이메일 주소를 입력할 수 있는 필드를 삽입
tel   전화번호를 입력할 수 있는 필드를 삽입
checkbox   복수를 선택할 수 있는 체크박스를 삽입
radio   1개만 선택할 수 있는 라디오 버튼을 삽입
number   숫자를 조절할 수 있는 스핀 박스를 삽입
range   숫자를 조절할 수 있는 슬라이드 막대를 삽입
date   사용자 지역을 기준으로 날짜(연, 월, 일)를 삽입
month   사용자 지역을 기준으로 날짜(연, 월,)를 삽입
week   사용자 지역을 기준으로 날짜(연, 주)를 삽입
time   사용자 지역을 기준으로 시간(시, 분, 초, 분할 초)를 삽입
datetime   국제 표준시(UTC)로 설정된 날짜와 시간(연, 월, 일, 시, 분, 초, 분할 초)를 삽입
datetime-local   사용자 지역을 기준으로 날짜와 시간(연, 월, 일, 시, 분, 초, 분할 초)를 삽입
submit   전송 버튼을 삽입
reset   리셋 버튼을 삽입
image   submit 버튼 대신 사용할 이미지를 삽입
button   일반 버튼을 삽입
file   파일을 첨부할 수 있는 버튼
hidden   사용자에게는 보이지 않지만 서버로 넘겨주는 값이 있는 필드를 생성

 

 

#7 input 태그의 속성

종류 설명
autofocus   웹 문서가 열리면 입력 필드 안에 마우스 포인터를 표시
placeholder   텍스트 필드에 힌트를 표시
readonly   입력 필드를 읽기 전용으로 지정
required   필수 입력 필드를 지정
max   숫자 입력 필드에서 최대값을 지정
min   숫자 입력 필드에서 최소값을 지정
step   숫자 입력 필드에서 증감할 간격을 지정
maxlength   텍스트 관련 필드에서 입력할 수 있는 최대 길이를 지정
minlength   텍스트 관련 필드에서 입력할 수 있는 최소 길이를 지정
size   텍스트 관련 필드에서 화면에 표시할 크기를 지정
list   연결할 데이터 목록을 지정

 

 

 

반응형