HTML 자주 쓰는 태그(Tag) 정리하기

1. 구역을 나누는 태그

 

 

1) div : <div></div>

2) p : <p></p>

3) ul 또는 ol  그리고 그 안의 li : <ul></ul> <li></li>

 

<!-- 구역을 나누는 태그들 -->

<div>나는 영역을 나누죠. 속성을 주어야 눈에 보이는 모양이 달라져요.</div>
<p>나는 문단이에요. p태그는 위,아래로 여백을 자동으로 줍니다. 자동으로 줄 바꿈이 됩니다.</p>
<ul> ul은 순서가 없는 리스트를 뜻합니다. 순서를 표시하고 싶다면 ol를 씁니다. 

    <li> li는 리스트 아이템입니다.</li>
    <li> ul이나 ol모두 li가 들어가야합니다.</li>
</ul>

 

2. 구역 내 컨텐츠

 

 

1) h1 ~ h6  : <h1></h1>

2) hr : <hr/>

 

<!-- 구역 내 콘텐츠 태그들 -->

<h1>h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.</h1>
<h2>h2는 소제목입니다. 숫자가 커지면 제목 크기가 작아집니다. </h2>
<h3>h3은 h2보다 작습니다.</h3>
<h4>h4은 h3보다 작습니다.</h4>
<h5>h5은 h4보다 작습니다.</h5>
<h6>h6은 h5보다 작습니다.</h6>

<hr/><!-- hr은 구역을 나누어 주는 선을 만들어 줍니다. 닫히는 태그가 없습니다. -->
<br/><!-- br은 줄을 바꾸어줍니다. 줄 간격은 폰트의 크기에 따라 다릅니다. 닫히는 태그가 없습니다. -->

 

3) span : <span></span>

4) a : <a href = ""></a>

5) img : <img src = ""/>

6) input : <input type=""/>

7) button : <button></button>

8) textarea : <texarea></textarea>

 

<!-- 구역 내 콘텐츠 -->
span 태그입니다: 특정 <span style="color:red">글자</span>를 꾸밀 때 써요. style이 없으면 div처럼 비어 있는 태그입니다. 

a 태그: <a href="http://naver.com/"> a태그 안에서만 작동합니다. </a>

img 태그: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"/>

<form action="">
    <p>input 태그 텍스트타입: <input type="text"/></p>
    <p>input 타입 숫자: <input type="number"/></p>
    <p>input 타입 이메일: <input type="email"/></p>
    <p>input 타입 비밀번호: <input type="password"/></p>
    <p>input 타입 날짜: <input type="date"/></p>
</form>

button 태그:
<button> 버튼입니다.</button>

textarea 태그입니다: <textarea>텍스트 에어리아는 엔터가 입력 되어 줄바꿈이 됩니다.</textarea>

 

 

※ 쌍으로 이루어 지지 않고 혼자 있는 태그 정리

 

1) hr : <hr/>

2) br : <br/>

3) img : <img src = ""/>

4) input : <input type=""/>

 

 

 

 

위의 태그들만 적당히 조합해서 쓰면 웬만한 웹 페이지는 만들 수 있다.