-
Html 태그 총정리Web/Html 2020. 7. 10. 21:43
Summary
- 이 글은 www.advancedwebranking.com/html이 정한 가장 많이 쓰이는 html 태그들을 각 종류별로 묶어서 정리했다.
- 현재 decrypted tag들을 작성하지 않았다.
- 필자가 경험상 자주 쓰이는 태그들과 속성들로 작성했다.
Core scope
<html>
html 문서의 범위를 나타낸다.
속성 의미 예시 lang 스크린 리더기가 해당 언어의 정확한 발음을 할 수 있도록 도와준다. lang="ko" <head>
html 문서의 정보를 브라우저에게 알려준다.
<body>
html 문서의 내용을 나타낸다.
Metadata
<link>
외부 리소스를 가져온다.
속성 의미 예시 rel 현재 문서와 링크된 문서 사이의 연관 관계(relationship)를 명시한다. rel="stylesheet" href 외부 리소스의 주소다. href="./css/styles.css" <meta>
<base>, <link>, <script>, <style>, <title> 요소와 같은 다른 메타데이터 관련 요소들이 나타낼 수 없는 메타데이터를 나타낸다. <meta>는 여러가지 속성이 있지만 http header는 서버에 의해 명시되어야 하기 때문에 최대한 간단하게 작성해야 한다.
속성 의미 예시 chartset html의 인코딩 방식을 설정한다. charset="utf-8" <style>
문서에 적용할 css를 설정한다. html 파일 안에서 <style> 태그를 사용하는 것보다 .css 파일을 따로 만들어서 관리하는 것이 코드 관리를 하는데 좋다.
<title>
문서의 제목(브라우저 탭)을 나타낸다.
Content sectioning
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
6단계의 문서의 제목을 적는다. h1이 가장 (중요도가)높고 h6가 가장 낮다.
<header>
문서의 소개 및 탐색(search)을 담당한다. 제목, 로고, 검색 폼, 작성자 이름 등을 포함한다.
<main>
문서의 주요 컨텐츠를 담당한다.
<article>
문서의 글을 담당한다. 게시판과 블로그 글, 매거진이나 뉴스 기사 등이 있다.
<aside>
문서의 별도의 컨텐츠를 담당한다. 광고 등이 있다.
<section>
문서의 일반적인 컨텐츠 영역이다.
<nav>
문서의 navigation을 담당한다. 다른 페이로 가는 메뉴 영역이나 카테고리를 나타낸다.
<address>
문서의 사람이나 단체의 주소나 연락처를 나타낸다.
<footer>
문서의 작성자나 저작권 정보 혹은 단체의 추가 연락망을 담당한다.
Text Content
<div>
컨텐츠를 박스 단위로 분할한다. 문서의 레이아웃을 짜기위해 사용한다.
<ol>
정렬된 리스트다. 하위 요소로 <li>태그를 가진다.
<ul>
정렬되지 않은 리스트다. 하위 요소로 <li>태그를 가진다.
<li>
리스트의 항목을 나타낸다. 부모 요소로 <ul>이나 <ol>을 반드시 가져야 한다.
<p>
paragraph로 문단을 나타낸다.
Inline text semantics
<a>
anchor의 약자로 html 문서의 의의를 나타내는 태그다.다른 페이지나 파일, 이메일 주소와 그 외 다른 URL로 갈 수 있는 하이퍼 링크를 설정한다. 속성 값으로 반드시 href와 함께 사용해야 한다.속성 의미 예시 href 링크를 걸 주소를 뜻한다. href="somewhere.html" target 문서가 열릴 위치를 나타낸다. target="_self" -> 링크된 문서를 현재 탭에서 연다.
target="_blank" -> 링크된 문서를 새로운 탭에서 연다.<span>
구문 콘텐츠를 위한 통용 인라인 컨테이너다. css로 꾸며주기 위해 주로 사용한다.
<br>
줄바꿈을 한다.
<i>
아이콘을 생성한다. 주로 www.fontawesome.com에서 icon을 가져와서 사용한다.
<strong>
글씨를 굵게 표시한다.
Image and multimedia
<img>
문서에 image를 불러온다. 필수 속성으로 src와 alt를 사용해야 한다. alt를 사용하지 않아도 이미지를 불러올 수 있지만 html의 "정보"라는 의의를 따르기 위해 alt를 사용해야만 한다.
속성 의미 예시 src 불러올 이미지의 주소를 의미한다. src="images/bg1.jpg" alt 이미지에 대한 설명이다. 스크린 리더기를 위해 사용해주자. alt="Profile picture" <audio>
문서에 소리 컨텐츠를 담을 수 있다.
속성 의미 예시 src 불러올 audio 파일의 주소를 의미한다. src="audio/music.mp3" controls 재생, 멈춤 등의 제어 메뉴를 제공한다. boolean(default=true) autoplay 자동으로 파일을 재생한다. boolean(default=true) loop 재생이 끝나면 처음부터 다시 재생한다. boolean(default=true) muted 음소거 기능을 추가한다. boolean(default=false) <video>
문서에 영상 컨텐츠를 담을 수 있다.
속성 의미 예시 src 불러올 video 파일의 주소를 의미한다. src="video/video.mp4" controls 재생, 멈춤 등의 제어 메뉴를 제공한다. boolean(default=true) autoplay 자동으로 파일을 재생한다. boolean(default=true) loop 재생이 끝나면 처음부터 다시 재생한다. boolean(default=true) muted 음소거 기능을 추가한다. boolean(default=false) Scripting
<script>
실행 가능한 코드를 불러올 때 사용한다. 주로 자바스크립트 파일을 불러온다.
async와 defer 둘 중 하나만 사용해야 하는데 개인적으로 defer를 추천한다. async는 브라우저가 html을 파싱하면서 동시에 script도 불러오는데(fetching) script 파일의 fetching이 끝났으면 브라우저는 html 파싱을 멈추고 스크립트를 실행한다. 이 과정에서 html 페이지가 로딩되는 시간이 더 길어진다. defer도 브라우저가 html을 파싱하면서 동시에 script 파일을 fetching하지만 fetching이 끝나도 브라우저는 html을 파싱하는 것을 멈추지 않고 계속 진행한다. html 파싱이 다 끝난 이후에 script 파일을 실행한다.
속성 의미 예시 src 불러올 외부 리소스(파일) src="js/clock.js" async 브라우저가 페이지를 파싱하는 동안 스크립트가 실행된다. boolean(default=true) defer 페이지가 모두 로드된 후에 스크립트가 실행된다. boolean(default=true) Table content
<table>, <tr>, <td>
행(tr)과 열(th, td)를 포함한 테이블 표를 만든다.
<thead>
행의 헤더 부분이다. 셀을 정의한다. 하위 요소로 <tr>과 <th>를 가진다.
<tbody>
thead에 의해 정의된 셀의 데이터들이다. 하위 요소로 <tr>과 <td>를 가진다.
예시
<table> <thead> <tr> <th>Element</th> <th>Empty</th> <th>Tag omission</th> </tr> </thead> <tbody> <tr> <th><code>pre</code></th> <td>No</td> <td>Neither tag is omissible</td> </tr> <tr> <th><code>img</code></th> <td>Yes</td> <td>No end tag</td> </tr> </tbody> </table>Forms
<form>
정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획을 나타냅니다.
속성 의미 예시 method 서버로 전송될 데이터의 Http 메소드(get이나 post)를 지정한다. method="get" action form의 데이터를 처리할 서버의 주소를 지정한다. action="action_target.js" name form의 이름이다. name="login" target 문서가 열릴 위치를 나타낸다. target="_self" -> 링크된 문서를 현재 탭에서 연다.
target="_blank" -> 링크된 문서를 새로운 탭에서 연다.<input>
사용자로부터 데이터를 입력 받는다. <input>은 여러가지 type을 지정할 수 있다.
input[type="?"] 의미 text 사용자로부터 텍스트를 입력 받는다. hidden 사용자에게는 보이지 않는 필드 값을 정의한다. 사용자는 이 필드를 건드릴 수가 없다. 서버에게 고유한 토큰 값을 전달할 때 사용한다. search 사용자로부터 검색어를 입력 받는다. 검색 필드에는 반드시 name 속성이 설정되어야 서버에게 전송이 된다. checkbox checkbox를 생성한다. email 사용자로부터 email을 입력받는다. email을 입력 하지 않고 전송하면 email을 입력하라고 경고창이 뜬다. submit form 데이터를 전송하는 버튼을 생성한다. radio radio 버튼을 생성한다. file file 업로드 버튼을 생성한다. date 날짜를 입력 받는 창을 생성한다. password password를 입력 받도록 입력 값 검은 원 모양으로 보인다. <label>
사용자의 인터페이스의 설명을 나타낸다. <label for="remember">의 for속성과 <input id="remeber">의 id 값이 같을 때 서로가 이어진다. 즉 내가 텍스트인 Remeber Me를 클릭하면 checkbox가 check된다.
예시
<input type="checkbox" id="remember" class="form__checkbox" /> <label for="remember" class="form__label">Remember Me</label>
<button>
일반적인 button을 생성한다.
<select>, <optgroup>, <option>
옵션을 선택하는 group을 생성한다.
예시
<select> <optgroup label="Hacking"> <option>Web</option> <option label="System"></option> <option label="Network" value="network"></option> </optgroup> <optgroup label="Front-end"> <option label="Html"></option> <option label="Css"></option> <option label="JavaScript"></option> </optgroup> <optgroup label="Back-end"> <option label="node.js"></option> <option label="Django"></option> <option label="Go"></option> </optgroup> </select>
dropbox