HTML 태그 - 서식에 사용되는 태그들

html에서 코딩을 작성할 때

아무리 엔터나 스페이스를 눌러서 공간을 띄어도 

실제 보이는 화면에서는 줄 바꿈이 일어나지 않는다.

따라서 서식을 꾸미는 태그들이 따로 존재한다.

 

서식은 문서를 꾸미는 형식을 말하는데,

글자의 크기, 글자의 색, 글자의 정렬을 조절한다.

 

 

서식에 사용되는 태그들

• <h1>제목 h1</h1>
  <h2>제목 h2</h2>
  <h3>제목 h3</h3>
  <h4>제목 h4</h4>
  <h5>제목 h5</h5>
  <h6>제목 h6</h6>

제목을 나타내는 태그

태그 안에 글씨를 굵게 보이는 속성이 포함되어 있다.

숫자가 작을수록 화면에 크게 나타난다.

• <br> 한 줄 띄어쓰기 태그, 닫는 태그가 없다.
• <hr> 가로줄 태그, 닫는 태그가 없다.

---

• <p> </p> 문단 태그로, 문단 사이에 줄 바꿈이 일어난다.

• <b> </b> 굵은 텍스트
• <strong> </strong> 중요 텍스트, 매우 중요한 텍스트를 정의
• <i> </i> 기울임 꼴 텍스트
• <em> </em> 기울임꼴 텍스트, 강조 텍스트를 정의
• <mark> </mark> 표시된 텍스트, 형광색표시
• <small> </small> 더 작은 텍스트, 글씨 크기가 작아진다.
• <del> </del> 삭제 텍스트,  화면에 표시될 때 
• <ins> </ins> 삽입 텍스트, 화면에는 밑줄로 표시된다. 
•  아래 첨자 텍스트, 화면에 _{이 부분만 아래로 살짝 내려가서} 표시된다.
•  위첨자 텍스트, 화면에 ^{이 부분만 위로 올라가서} 표시된다.

 

* <b>나 <i>를 사용하는 것보다는 CSS를 사용하는 것이 더 낫다.

태그를 하나 하나 사용하는 것은 비효율적

style 태그를 활용하자!

<style>

font-style: italic;
font-weight: bold;

</style>

 

 

 

*스크린리더는 컴퓨터의 화면 낭독 소프트웨어이다.

 

<b>와 <strong> 태그의 차이

화면에 표시될 때는 같지만, 브라우저에 인식될 때 다르다.

스크린리더로 읽을 때 <b> 태그는 강조 없이 읽히지만, <strong> 태그는 강조하는 목소리로 읽힌다.

 

<i>와 <em> 태그의 차이

화면에 표시될 때는 기울어진 글꼴체로 똑같지만, 

스크린리더로 읽을 때 <i> 태그는 강조 없이 읽히지만, <em> 태그는 강조하는 목소리로 읽힌다.