제목을 나타내는 < hn >태그

• 웹 문서에서 제목은 다른 텍스트보다 크고 진하게 표시됨
• 별다른 스타일 지정없이 제목으로 사용할 수 있는 태그
• 닫는 태그 필수

<hn>제목</hn>

< hn >태그에서 h는 제목을 뜻하는 heading의 줄임말이고 n은 1~6자리 숫자가 들어가고, 제목 텍스트를 크기별로 표시할 수 있음(숫자가 커질수록 크기가 작아짐)

h1

h2

h3

h4

h5

h6

텍스트 단락을 만드는 < p >태그, 줄바꾸는 < br >태그

• p 태그 사이에 텍스트를 입력하면 텍스트 앞뒤로 빈줄이 생기면서 텍스트 단락이 만들어 짐
• 편집기에서 줄을 바꾸더라도 태그를 따로 사용해주지 않으면 실제로는 줄바꿈 안됨
  ->이럴때 사용하는 태그가 < br >

<p>동해물과 백두산이 마르고 닳도록 
하느님이 보우하서 우리 나라만세</p>
<p>무궁과 삼천리 화려강산 대한사람 대한으로 길이 보전하세</p>

위의 코드가 실행되면

동해물과 백두산이 마르고 닳도록 하느님이 보우하서 우리 나라만세

무궁과 삼천리 화려강산 대한사람 대한으로 길이 보전하세

이렇게 p 태그가 쌓여있는 문장으로 줄바꿈이 일어남
내가 만약 닳도록 다음 줄바꿈을 하고 싶다면 이때 사용하는 태그가 < br >

<p>동해물과 백두산이 마르고 닳도록 <br>
하느님이 보우하서 우리 나라만세</p>
<p>무궁과 삼천리 화려강산 대한사람 대한으로 길이 보전하세</p>

동해물과 백두산이 마르고 닳도록
하느님이 보우하서 우리 나라만세

무궁과 삼천리 화려강산 대한사람 대한으로 길이 보전하세

< br >태그와 < p >태그의 차이점

< br >태그는 두번 사용하면 빈줄이 생기면서 텍스트 단락이 나뉘것처럼 보이지만 실제로 단락이 만들어 진게 아니기 때문에 CSS사용해 텍스트 단락 스타일을 적용할때 문제가 생김. 따라서 단락을 만들때는 < p >태그 사용

인용할때 쓰는 < blockquote >태그

-웹 브라우저가 인용문을 인식하게 할때 사용하는 태그

• blockquote 태그를 사용하면 일반 텍스트와 구분해서 인식함

<p>동해물과 백두산이 마르고 닳도록 하느님이 보우하서 우리 나라만세</p>
<p>무궁과 삼천리 화려강산 대한사람 대한으로 길이 보전하세</p>
<blockquote>이것이 우리나라 애국가이다</blockquote>

동해물과 백두산이 마르고 닳도록 하느님이 보우하서 우리 나라만세

무궁과 삼천리 화려강산 대한사람 대한으로 길이 보전하세

이것이 우리나라 애국가이다

텍스트를 굵게 표시하려면 < string >, < b >태그

• 이 태그들은 눈으로 볼때는 별 차이가 느껴지지 않지만 구분해서 사용해야함
  그 이유는 화면낭독기의 기능때문인데 경고나 주의사항처럼 중요한 내용을 강조할때는 strong 태그를 사용해야 하고 일반 키워드처럼 글자만 굵게 할때에는 b 태그를 사용함
  (보이는 것 중심이 아닌 의미 중심)
  화면낭독기는 strong 태그를 사용한 부분을 강조해서 읽음

<strong>굵게 강조할 텍스트</strong>
<b>굵게 강조할 텍스트</b>

굵게 강조할 텍스트
굵게 강조할 텍스트

**벨로그에선 b태그가 안먹힘..

기울인 텍스트를 입력해주는 < em >, < i >태그

• em: 강조(emphasis)줄임말
• i: 이탤릭체, 기울기체(italic)줄임말
• em 태그는 문장에서 흐름상 특정 부분을 강조하고 싶을 때 사용
• i 태그는 마음속의 생각이나 용어, 관용구 등에 사용12

<em>기울기</em>
<i>기울기</i>

기울기
기울기

기타 다양한 텍스트 관련 태그

<abbr> - 줄임말을 표시하고 title 속성 함께 사용 가능
	   ex)<abbr title="Internet of Things">IOT</abbr>

IOT

<cite> - 웹문서나 포스트에서 참고내용을 표시
       ex)<p>내가 경험한 가장 흥미진진한 일은 누군가를 만나는 일이다. -영화
       <cite>'비포선셋'</cite></p>

내가 경험한 가장 흥미진진한 일은 누군가를 만나는 일이다. -영화 '비포선셋'

<code> - 컴퓨터 인식을 위한 소스코드 
       ex)<code>function savetheLocal()</code>

function savetheLocal()

<small> - 부가 정보처럼 작게 표시해도 되는 텍스트
       ex)<p>가격 : 13000원<small>(부가세별도)</small></p>

가격 : 13000원(부가세별도)

<sub>  - 아래첨자 표시
       ex)<p>물의 화학식은 H<sub>2</sub>O입니다.</p>

물의 화학식은 H2O입니다.

<sup>  - 위첨자 표시
     ex)<p>E=mc<sup>2</sup></p>

E=mc2

<s>  - 취소선을 표시
      ex) <p><s>34,000원</s>19,000원</p>

34,000원19,000원

<u>  - 밑줄 표시
     ex)<u><텍스트 단순 밑줄긋기/u>

텍스트 단순 밑줄긋기

<ins> - 공동 작업 문서에 새로운 내용 삽입
      ex) <ins>새로운 내용 삽입</ins>

새로운 내용 삽입

<del>  - 공동문서에서 기존 내용 삭제
      ex)<del>기존 내용 삭제</del>

기존 내용 삭제