자주 사용하는 주요 HTML 태그 정리해드림

자주 사용하는 주요 HTML 태그를 알아보겠습니다.

HTML 태그 종류는 정말 많지만, 자주 사용하는 것은 정해져 있는 것 같습니다.

아래 태그들만 숙지하셔도 꽤 유용하게 사용하실 수 있습니다.

 

 

div

<div></div>

• 네모난 박스라고 생각하면 됩니다.
• 대부분의 레이아웃은 div태그로 구성합니다.
• css, js를 특정 부분을 제어할 때 유용합니다.
• class, id 속성을 함께 사용하는 것이 일반적입니다.

h1~h6

<h1>안녕</h1>

• 제목이나 강조하고 싶은 부분을 나타내는 태그입니다.
• h1의 폰트 사이즈가 가장 크고 숫자가 커질수록 사이즈가 작아집니다.

img

<img src="" alt="" />

• <img>: 이미지를 보여줄 수 있는 기능을 하는 태그입니다.
• 반응형 이미지

How To Create Responsive Images

 

input

<input type="" />

• 사용자의 입력을 받는 태그입니다.
• 자주 사용하는 type 속성값
  • text
  • button
  • checkbox
  • password
  • number
  • radio

button

<button>클릭</button>

• 사용자가 클릭할 수 있는 버튼을 만드는 태그입니다.

a

<a href="" target=""></a>

• 다른 구획 또는 다른 페이지로 이동할 때 사용하는 태그입니다.
• 자주 사용하는 속성
  • href: 이동할 페이지의 링크
  • target: 어떤 방식으로 페이지를 이동할 것인가
    • _blank: 새창

span

<span></span>

• CSS, JS를 적용시키기 위한 보이지 않는 의미상 존재하는 태그

ul, ol, li

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>

• 리스트를 표현하기 위해 사용하는 태그
• ol (ordered list): 순서가 있는 리스트
• ul (unordered list): 순서가 없는 리스트
• li: 리스트 요소

form

<form action="" method="" target="">
</form>

• 사용자 입력을 받아 서버에 네트워크 요청을 할 때 사용하는 태그
• 속성
  • action: 입력받은 데이터를 처리할 URL
  • method: HTTP 메서드 ex) GET, POST ..
  • target: 링크 이동 방법 설정 ex) _self, _blank

태그 분류

1. Block Element vs Inline Element (추후 css display 속성과 연관)
   • 블록 엘리먼트
     • 언제나 줄바꿈
     • 블록 엘리먼트 종류
     • <address><article><aside><blockquote><canvas> <dd><div><dl><dt><fieldset><figcaption><figure> <footer><form><h1>-<h6><header><hr><li><main> <nav><noscript><ol><p><pre><section><table><tfoot><ul><video>
   • 인라인 엘리먼트
     • 공간이 충분하다면 줄바꿈을 하지 않고 옆에 표시
     • 인라인 엘리먼트 종류
     • <a><abbr><acronym><b><bdo><big><br> <button><cite><code><dfn><em><i><img> <input><kbd><label><map><object><output> <q><samp><script><select><small><span><strong> <sub><sup><textarea><time><tt>< var >
2. Box Element vs Item Element
   • 박스 엘리먼트
     • 자체로는 아무것도 표시되지 않지만, 레이아웃을 나누고 다른 태그를 담는 태그
     • 박스 엘리먼트 종류
     • <header><section><footer><article><nav><div><span><form> etc..
   • 아이템 엘리먼트
     • 특정 기능을 수행하는 태그
     • 아이템 엘리먼트 종류
     • <a><button><input><img><video> ..etc