많이 쓰이는 HTML 태그를 기준으로 정리한 글이다.
reperence : https://www.advancedwebranking.com/html/
기본 태그
<html>
<head>
<body>
<title>
<meta>
| <!DOCTYPE html> | 웹 문서의 유형을 html로 지정 | |
| <html lang="언어"> | 문서를 html로 시작, 언어 지정 ex> en, ko 등 | |
| <head> | 주로 브라우저의 정보를 입력하는 곳 | |
| <meta> | 메타 데이터 입력, 주로 <meta charset="UTF-8">처럼 입력 | |
| <title> | 문서 제목 | |
| <body> | 문서 내용을 입력 | |
문서 구조 태그
<div>
<span>
<nav>
<footer>
<header>
| <header> | 헤더 영역 |
| <main> | 메인 영역 |
| <section> | 콘텐츠 영역 |
| <aside> | 사이드 바 영역 |
| <footer> | 푸터 영역 |
| <nav> | 내비게이션 영역, 문서 내 다른 위치, 다른 문서로 연결할 때 사용 |
| <article> | 독립적인 콘텐츠를 사용할 때 |
| <section> | 콘텐츠 영역 |
| <div> | 여러 소스 묶기, 어떤 의미도 없는 무색 무취의 태그, 화면 전체 사용, 줄바꿈 됨 |
| <span> | div와 같지만 화면 전체 사용X, 줄바꿈 안 됨 |
하이퍼 링크 삽입
<a>
| <a> | 하이퍼 링크 삽입 | |
| href= | 링크 주소 | |
| target="_blank" | 새 탭에서 열기 | |
| title= | 페이지 설명 추가 | |
이미지 삽입
<img>
| <img> | 이미지 삽입 | ||
| src= | 이미지 파일 경로 | ||
| alt= | 대체용 텍스트 | ||
| width= height= |
가로, 세로 크기 조절 | ||
| % | 브라우저 창의 크기 단위 | ||
| px | 픽셀 단위 | ||
텍스트 입력
<p>
<strong>
<b>
<h2><h3>
<i>
| <h1>, <h2>, ... | 제목 |
| <p> | 단락 |
| <br> | 줄 바꿈, 닫기태그 없음 |
| <blockquote> | 인용문, 들여쓰기 적용됨 |
| <strong> | 텍스트 굵게, 주로 중요한 내용일 때 |
| <b> | 텍스트 굵게, 단순히 굵게 표시할 때 |
| <em> | 텍스트 기울임, emphasis의 준말, 강조할 때 |
| <i> | 텍스트 기울임, italic의 준말, 단순히 기울여 표시할 때 |
| <u> | 텍스트 밑줄 |
| <s> | 텍스트 취소선 |
| <abbr> | 줄임말 |
| <cite> | 참고 내용 |
| <code> | 소스 코드 |
| <small> | 작은 텍스트 |
| <sub> | 아래 첨자 |
| <sup> | 위 첨자 |
| <ins> | 공동작업문서에 새로운 내용 삽입 |
| <del> | 공동작업문서에 기존 내용 삭제 |
목록 입력
<li> 태그를 이용해 목룍을 생성함
<ul>
| <ol> | 순서가 있는 목록(ordered list) | ||
| type= | "1" | 숫자(기본값) | |
| "a" | 영문 소문자 | ||
| "A" | 영문 대문자 | ||
| "i" | 로마 숫자 소문자 | ||
| "I" | 로마 숫자 대문자 | ||
| start="3" | 3부터 시작 | ||
| <ul> | 순서가 없는 목록(unordered list) | ||
폼 입력
<form>
| <form> | method= | get | 사용자 입력 내용이 드러나게 서버로 넘겨줌 |
| post | 사용자 입력 내용이 드러나지 않게 서버로 넘겨줌 |
||
| name= | 자바스크립트로 폼 이름 지정 | ||
| action= | 서버 프로그램 지정 | ||
| target= | 열어볼 파일 위치 지정 | ||
| autocomplete= | 자동 완성 기능 지정(기본값 on) | ||
| <fieldset> | 폼 내부에서 구역을 나눔 | ||
| <legend> | 구역 제목 붙이기 | ||
<input>의 type 속성 값들
<button>
| type= | text | 한 줄 텍스트 |
| password | 비밀번호 | |
| search | 검색 | |
| url | url | |
| 이메일 주소 | ||
| tel | 전화번호 | |
| checkbox | 체크박스 (중복 체크) | |
| radio | 라디오 버튼 (unique 체크) | |
| number | 숫자 스핀 박스(버튼으로 숫자 조절) | |
| range | 숫자 슬라이드 막대 | |
| date | local - 연, 월, 일 | |
| month | local - 연, 월 | |
| week | local - 연, 주 | |
| time | local - 시, 분, 초, 분할 초 | |
| datetime | UTC - 연, 월, 일, 시, 분, 초, 분할 초 | |
| datetime-local | local - 연, 월, 일, 시, 분, 초, 분할 초 | |
| submit | 전송 버튼 | |
| reset | 리셋 버튼 | |
| image | submit 버튼 이미지 | |
| button | 일반 버튼 | |
| file | 파일 첨부 버튼 | |
| hidden | 사용자에게 보이지 않는 값 필드 |
추가 필요
<style>
<iframe>
<script>
<link>
reperence : HTML 태그 모음 & 요약정리 :: 조윤빈 블로그 (tistory.com)
'Web (~2022.06) > WEB' 카테고리의 다른 글
| [개인 프로젝트_01] 페퍼톤스 팬 사이트 :: 메인 페이지 내용, 링크걸기, 목차, 다크버전 (0) | 2022.03.07 |
|---|---|
| [개인 프로젝트_01] 페퍼톤스 팬 사이트를 만들어보자 :: 기획 초안 (0) | 2022.02.25 |
