내가 보려고 만든 HTML 태그 정리

2021. 7. 2. 23:59

html 태그 정리

html Basic Form 관련 태그

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>
  1. <! doctype html> : 마크업 언어용 DTD 태그. 해당 문서(페이지)가 html 형식으로 구성되어있음을 알려준다.
  2. <html></html> : html 문서의 시작과 끝을 의미하는 태그, 1.의 DTD 태그를 제외한 전체를 <html></html> 코드로 둘러쌈
    1. <title></title> : html의 제목을 선언하는 태그
    2. <meta></meta> : html의 메타데이터를 선언하는 태그
    3. <link></link> : css 선언파일 등을 연결하는 태그
  3. <head></head> : html 문서의 속성을 지정하기 위한 태그
  4. <body></body> : html 문서의 모양을 지정하기 위한 태그
    1. <script></script> : scirpt(스크립트), 자바 스크립트 타입을 지정해서 사용
    2. <div></div> : 레이아웃의 레이어

Text 관련 태그

  • <h[1~6]></h[1~6]> : heading(제목)
  • <p></p> : paragraph(문단)
  • <br></br> : line break(문단내 줄바꿈)

h1 Title 1

h2 Title 2

h3 Title 3

h4 Title 4

h5 Title 5
h6 Title 6

강조

  • <b></b> : bold(굵게 표시)
  • <i></i> : italic(기울임꼴)
  • <strong></strong> : strong(강하게 강조)
  • <em></em> : (약하게 강조)
  • <ins></ins> : insert(밑줄 표시)
  • <del></del> : delete(취소선 표시)

Bold
Italic
strong
em

under line
delete line

작은 텍스트

  • <small></small> : small(작게 표시)
  • <sup></sup> : superscript(위첨자)
  • <sub></sub> : subscript(아래첨자)

목록

<ul></ul> 또는 <ol></ol> 사이에 <li></li>를 넣어 목록을 만듦. 여러 list 를 중첩해 사용할 수 있음.

  • <ul></ul> : unordered list(순서 없는 목록)
  • <ol></ol> : ordered list(순서 있는 목록)
  • <li></li> : list item(목록)

링크

  • <a href></a> : 하이퍼 링크

Hyper link - Google

미디어

  • <img src="이미지파일 경로" alt="이미지 설명" title="제목" height="" width=""></img> : image(이미지)

주황버섯

  • <video src="동영상파일 경로" controls="컨트롤러 표시" autoplay="자동재생여부" loop="반복재생여부" height="" width="" muted="음소거여부" ></video> : video(비디오)
    유투브는 해당 방식으로 작동X, iframe을 이용하면 됨

  • <audio></audio> : audio(오디오)

테이블

  • <table></table> : table(테이블)
  • <tr></tr> : table row(행의 시작)
  • <th></th> : table heading(열의 머리말)
  • <td></td> : table data(표의 내용, 셀 데이터를 표현), colspan, rowspan 사용 가능

기타

  • <hr></hr> : horizontal rule(가로줄)
  • <blockquote></blockquote> : block quote(인용구)

'Web > Frontend' 카테고리의 다른 글

npm install 에러 해결하다가 package-lock.json의 중요성을 알아버린건 대하여  (0) 2021.10.16

BELATED ARTICLES

more

티스토리툴바