[HTML5]자주 사용하는 HTML 요소 정리

📢HTML 요소

TAG를 사용해 만들 수 있는 HTML요소에 대해 알아보겠습니다.

HTML 태그의 종류는 매우 많습니다.(해당 링크로 들어가면 확인하실수 있습니다)

 

이 모든 것을 알아야 할까요? (X)

실무 혹은 프로젝트에서 제가 많이 사용하는 태그들을 모아 보았으니,

제가 부족할 수 있지만 이 태그들은 그만큼 중요하다는 것이니 알아두시면 좋을 거 같습니다.

사용 빈도수에 따른 태그들을 소개해드리겠습니다.

 

🟡가끔씩 사용하는 태그들

<strong>, <iframe>, <button>, <i>

-해당 태그들은

 

🔵 사용 빈도가 높은 태그

<!--Headings 헤더-->
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> 
<!--div,span,Paragraph 문단-->
<div>, <p>, <span> 
<!--Anchor 닻(링크), image 이미지-->
<a>, <img>
<!--List 리스트-->
<ul>, <li>, <ol>
<!--Description List 정의 목록-->
<dl>, <dt>, <dd> ,<dfn>
<!--Quotations 인용문-->
<q>, <blockquote>, <cite>
<!--Form-->
<form>, <input>, <label>

주로 이 태그들로 HTML body부분이 구성되니 잘 보시고 공부하시면 좋을 거 같습니다.

---

해당 글에선 사용빈도가 높은 태그들을 분석해보고자 합니다.

 

HTML 요소는 크게 2가지로 나뉩니다.

1. 블록 요소

2. 인라인 요소

 

1. 블록 요소는 콘텐츠의 내용은 가로 사이즈(width)가 100% 속성을 가지고 줄 바꿈을 합니다.

2. 인라인 요소는 컨텐츠 내용만큼 사이즈가 적용되고 줄바꿈 없이 나란히 출력됩니다.

See the Pen Untitled by YoonMin (@y00nmin) on CodePen.

 자주 사용하는 태그들을 분류해보면

1. <h1>~<h6>, <div>, <p>, <form>, <ul>, <li>, <table>, <input>

2. <a>, <img>, <span>, <label>,  <select>, <label>, <br>

이렇게 분류할 수 있습니다.

 

그중 div와 span을 많이 사용하는 것을 볼 수 있다.

이 둘의 차이점을 상단의 코드 팬을 보고 확실히 구분할 수 있도록 연습해보자

---

✨블록 요소

1. h1~h6 (heading)

<h1>제목1</h1>
<h2>제목2</h2>
<h3>제목3</h3>

h0는 제목을 의미하는 요소로, 숫자가 작을수록 더 중요한 제목을 정의한다.

숫자가 작을수록 더 중요한 제목을 정의한다. 최대한 h3, h4 선에서 끝나는 것이 좋다.

예를 들어 h2요소 이후 h1요소는 안 나오는 것이 중요하다. 

2. p (paragraph)

<p>내용</p>

문장을 의미하는 요소를 의미한다.

3. ul (unorderd list) & li (list item)

<ul>
	<li>키보드</li>
    <li>마우스</li>
    <li>모니터</li>
</ul>

ul은 순서가 필요 없는 목록의 집합을 의미한다.

li는 목록 안에 각 항목을 나타낸다.

ul tag자식으로 li요소는 하나 이상 존재해야 하는 게 규칙이다.

4. input

//ID & password
<input type="text"><br>
<input type="password">

//placeholder & disabled
<input type="text" placeholder='입력해주세요'>
<input type="text" disabled>

사용자가 데이터를 입력하는 요소

---

✨인라인 요소

1. br (break)

<div>공부를 <br>열심히 해보고싶어요</div>

br은 줄 바꿈 요소로 요소 안에 들어가 사용되며

뒤에 closing tag가 존재하지 않는다.

2. a (anchor)

<a href="https://www.naver.com/">네이버</a>

같은 페이지 혹은 다른 페이지로 이동하는 하이퍼링크를 지정하는 요소이다.

3. img (image)

<img src="이미지 경로" alt="삽입하는 이미지 이름 내용">

이미지를 삽입하는 요소

4. label

//체크박스 생성
<label><input type="checkbox"></label>
<label><input type="checkbox" checked></label>

//radio 둘중 하나 택하기
<label><input type="radio" name="color"></label>
<label><input type="radio" name="color"></label>

라벨 기능 요소의 제목