HTML 태그 더 잘 사용하기

html 과 htm의 차이점은 없다.

• 과거 확장자의 글자수가 제한되어 있었을 때 htm이 사용되었다.

Escaping

&은 &를 의미한다.

&lt;는 <를 의미한다.

&gt;는 >를 의미한다.

&quot;는 "를 의미한다.

&apos;는 '를 의미한다.

&lt;br /&gt;은 줄바꿈을 의미한다. (<br/>)

&nbsp;는 띄어쓰기를 의미한다.

• HTML에서 띄어쓰기 여러 번을 표기하기 위해서는  를 사용한다.

Map 태그

• Map 태그의 자손으로 area 태그를 설정할 수 있다.
• area 태그의 shape, coords, href와 같은 속성을 설정하여 모양, 크기, 연결된 링크를 설정할 수 있다.
• img 태그의 usemap 속성을 이용하여 map 태그에 이미지를 연결할 수 있다.

참고 자료 : https://developer.mozilla.org/ko/docs/Web/HTML/Element/map

ruby 태그

• ruby 태그를 통해서 글자 상단에 주석을 달 수 있다.

<ruby>
  안녕
  <rt>hi</rt>
</ruby>

sub, sup 태그

• sub와 sup 태그를 이용하여 아래 첨자, 위 첨자를 사용할 수 있다.

<div>
  A
  <sub>B</sub>
  C
</div>

<div>
  D
  <sup>E</sup>
  F
</div>

progress 태그

• progress 태그는 어느 작업의 완료 정도를 나타낸다.

<progress></progress>

<progress id="Downloads" max="150" value="50"> 50% </progress>

참고 자료 : https://developer.mozilla.org/ko/docs/Web/HTML/Element/progress

hr 태그

• hr 태그를 통해 수평선을 그을 수 있다.
• 스타일을 적용하여 hr 태그의 스타일을 변경할 수 있다.

<hr style="background-color:green;height:5px;"/>

strong, small 태그

• strong이나 small 태그는 글자를 강조하거나 작은 글자를 표현할 때 사용할 수 있다.
• p태그 내부에 사용하여 글자중에 일부분만 강조하여 사용하는 방법이 있다.

<div>
  <p>
    <strong>강조 텍스트</strong>
    기본 텍스트 1, 2, 3, 4, 5 기본 텍스트 끝
  </p>
</div>