[HTML] 자주 사용하는 태그 모음/헷갈리는 태그 모음

 

 
 
 
HTML을 영단어 외우듯이 암기하고 있는 개발자는 없다. 
 
항상 필요할 때 마다 검색을 해보고, 그때 그때 사용하는 편이다
 
이번 글에서는 진짜 자주 사용하는데, 정작 헷갈리는 태그들에 대해 정리해보자
 
반드시 다 외우라는 것이 아니다!
 
여러번 보면 자연스럽게 익숙해듯이, 이번 기회에 한번 더 보라는 취지의 글이다.
 
 

https://css-tricks.com/average-web-page-data-analyzing-8-million-websites/

 
 
CSS-Tricks 에서 제공한 자료에 따르면 가장 유명한(자주 쓰는) HTML 태그는 위와 같다
 
그럼 진짜 자주 쓰지만, 정작 헷갈릴 때가 많아 항상 검색해보는 태그들에 대해 알아보자
 
 
 

<!--   -->

 주석이다
 
가끔  // 나 /* 을 사용하는 경우가 있는데, 이건 Javasciprt 주석이다.

이걸 헷갈리는것 만큼이나 쪽팔린건 없으니까 꼭 기억하자
 
 
 

<div></div>

문서의 구획을 정의한다.
 
실제 프로젝트에서 CSS와 함께 활용할 때 가장 가장 가장 많이 사용하는 태그이다
 
그냥 마구 마구 여기저기 사용한다
 
 

<a href=“index.html”>

하이퍼링크를 정의한다.
 
출력 예시:

<a href="https://example.com">이 링크를 클릭하세요</a>

 
 
 

<b></b>

볼드 텍스트로 만들어준다

일반 글씨 입니다 <b>볼드체입니다</b>

 
 
 

<basefont size=3></basefont>

문서의 기본 글꼴 크기를 정한다.
자주 사용하지는 않는다
 
 출력 예시:

 <basefont size="3">기본 글꼴 크기가 3입니다.</basefont>

 
 
 
 
 

<blockquote></blockquote>

인용문을 정의한다
자주 쓰지는 않는다

<blockquote>인용할 내용</blockquote>

 
 
 
 
 

<br> 또는 </br>

줄을 바꿔준다. 출력 결과에서 '엔터'를 치고 싶을 떄 사용한다.
 
닫는 태그는 필요하지 않다.
 
<br>과 </br> 둘 중 어느 것을 써도 상관 없다
 
 
출력 예시:

첫 번째 줄<br>두 번째 줄</br>세 번째 줄

 
 
 
 

<p> </p>

문단을 정의한다
 
문단끼리 줄바꿈을 만들어주기 때문에, <br>태그와 비슷한 용도로 사용된다
 
다만 <br>태그는 한 문단 내에서, <p>태그는 문단과 문단을 구분하는 용으로 사용한다
 
<br>태그와 달리 닫는 태그가 필요하다
 
출력예시: 

<p>이것은 문단이다.</p>
<p>저것도 문단이다.</p>

 
 
 
 
 

<button> </button>

버튼을 만들어준다
정말 자주 쓰인다!
출력 예시:

<button>클릭하세요</button>

 

<caption></caption>

표 제목을 정의해준다
출력 예시:

<table>
  <caption>표 제목</caption>
  <tr>
    <td>셀 내용</td>
  </tr>
</table>

 

 
 
 

<em></em>

텍스트를 강조한다.
 
출력 예시:

 <em>강조된 텍스트</em>

 

 
 
 
 

<h1> …. <h6> </h6>

 
제목 태그이다. <h1> 부터 <h6>까지 있다
 
출력예시:

    <h1>제목1</h1>
    <h2>제목2</h2>
    <h3>제목3</h3>
    <h4>제목4</h4>
    <h5>제목5</h5>
    <h6>제목6</h6>
    <h7>제목7</h7>

 

 
<h7>는 없다
 
 
 
 

<hr> 또는 </hr>

 
수평 선을 만들어준다
문단이나 섹션을 나눌 때 사용한다
 
닫는 태그가 필요하지 않는다
 
출력 예시:

   안녕하세요
   <hr>
   반갑습니다

 

 

 

 

 

 

&nbsp;

공백문자이다
 

태그는 아니고 엔티티(entity)이다

"non-breaking space"의 약어로, 일반적인 공백 문자와 달리 브라우저에 의해 무시되지 않고 텍스트 내에서 공백으로 취급된다
HTML에서 일반적인 공백 문자를 사용하면 여러 개의 공백이 하나로 압축되거나 줄 바꿈이 무시될 수 있다.
 
그러나 &nbsp;를 사용하면 여러 개의 공백이 유지되며, 텍스트의 줄바꿈이 일어나지 않는다
 
 

 
 
태그는 이 정도만 알면 된다.
 
코딩을 하다가, 정리할 만한 태그가 있으면 글을 수정해서 추가하겠습니다!