HTML - 2

텍스트를 묶어주는 태그

• <hn> 태그 - 제목 표시하기.    <h1>(가장 큼) ~ <h6>(가장 작음)

<h1> 제목 </h1> 의 형태로 사용

• <p> 태그 - 단락 만들기.    </p>태그를 만날 때 까지 줄바꿈이 일어나지 않는다. 텍스트를 한 줄로 표기, 너비에 따라서 줄을 자동으로 변경한다

<p> 텍스트 </p> 의 형태로 사용

• <br> 태그 - 줄 바꾸기.    줄을 바꿀 경우에 사용, **닫는 태그 없음!

<br> 의 형태로 사용, 텍스트 단락 처럼 보이지만 실제로는 단락이랑 다름

• <hr> 태그 - 수평 줄 넣기.    단락의 주제가 바뀔 때 분위기 전환용으로 사용, 가본으로 가로선 삽입되며 CSS로 숨김 가능하다

<hr> 의 형태로 사용

• <blockquote> 태그 - 인용문 넣기.    다른 텍스트보다 안으로 들여 써짐. cite속성 이용해 주소 표시도 사용 가능

<blockquote> 인용 내용 </blockquote> 의 형태로 사용

• <pre> 태그 - 입력하는 그대로 표시.    소스에 표시한 공백이 그대로 표시 됨. 프로그램 소시를 표시할 때 유용 ex) <code>,<samp>,<kbd>등등, <pre>태그의 접근성 고려해야함! TTS나 점자위 경우 <pre>태그 만나면 건너뛰기 해서 읽지 않음!

<pre> 텍스트 </pre> 의 형태로 사용

텍스트를 한 줄로 표시하는 태그

• <strong>, <b> 태그 - 굵게 표시.    <strong>은 중요한 내용이라서 강조, <b>는 단순히 굵게 표시 (TTS의 경우 강조 여부 알려줌)

<strong> 굵게 강조할 텍스트 </strong> , <b> 굵게 강조할 텍스트 </b>의 형태로 사용

• <em>, <i> 태그 - 이탤릭체로 표시.    <em>은 흐름상 특정부분 강조, <i>는 단순히 이탤릭체로 표시

<i> 이탤릭체로 표시할 텍스트 </i> , <em> 이탤릭체로 표시할 텍스트 </em>의 형태로 사용

• <q> 태그 - 인용 내용 표시.    줄 바꿈 없이 다른 내용과 한 줄에 인용 내용 표시. 인용 내용 앞뒤에 따옴표(" ") 추가 됨

<q> 인용 내용 </q> 의 형태로 사용

• <mark> 태그 - 형광팬 효과.    태그로 묶은 부분의 배경색이 노랑으로 표시됨

<mark> 텍스트 </mark> 의 형태로 사용

• <span>, <div> 태그 - 영역 묶기.    <span>은 인라인 묶기, <div>는 블록 묶기

<span> 내용 </span> , <div> 내용 </div>의 형태로 사용

• <ruby> 태그 - 동아시아 글자에 주석 표시.    <rt>태그를 사용해 주석 표시

<ruby> 내용 <rt> 주석 </rt> </ruby> 의 형태로 사용

기타 텍스트 관련 태그들

• <abbr> 태그 - 약자 표시.    title 속성을 함께 사용할 수 있음

<p> 내용 <abbr title=" "> 약자 </abbr> </p> 의 형태로 사용

• <cite> 태그 - 웹 문서나 포스트에서 참고 내용 표시

<p> 내용 <cite> 내용 </cite> </p> 의 형태로 사용

• <code> 태그 - 컴퓨터 인식을 위한 소스코드

<pre><code> 내용 </code></pre> 의 형태로 사용

• <kbd> 태그 - 키보드 입력이나 음성 명령 같은 사용자 입력 내용

<p> 내용 <kbd> 명령 </kbd> </p> 의 형태로 사용

• <small> 태그 - 부가 정보처럼 작게 표시해도되는 텍스트

<p> 내용 <small> 내용 </small> </p> 의 형태로 사용

• <sub> 태그 - 아래 첨자

<p> 내용 _내용 </p> 의 형태로 사용

• <sup> 태그 - 위 첨자

<p> 내용 ^내용 </p> 의 형태로 사용

• <s> 태그 - 취소선

<p> 내용 <s> 내용 </s> </p> 의 형태로 사용

• <u> 태그 - 밑줄

<p> 내용 <u> 내용 </u> </p> 의 형태로 사용