HTML 텍스트(Text) 1

< HTML 텍스트(text) 태그 >

* 텍스트 블록(Block) 처리 관련 태그(tag)

선택한 텍스트 글자에만 적용되는 것이 아니라 텍스트가 포함된 블럭 전체에 적용된다.

---

• <hn> ~</hn>

  : 제목 표시

  : heading의 줄임말

  : 숫자를 사용해 크기를 조절할 수 있다. (1 ~ 6)

  : 숫자가 작을수록 폰트 크기가 크다.

  : 제목 텍스트는 일반 텍스트보다 굵고 진하게 표시된다. (bold)

 

ex) h1 ~ h6 출력 결과

    <h1>주주디의 SW이야기</h1>
    <h2>주주디의 SW이야기</h2>
    <h3>주주디의 SW이야기</h3>
    <h4>주주디의 SW이야기</h4>
    <h5>주주디의 SW이야기</h5>
    <h6>주주디의 SW이야기</h6>

 

 

 

• <p> ~ </p>

  : 단락 만들기

  : paragraph의 줄임말

  : 텍스트 줄이 브라우저 창의 너비보다 길어질 경우 자동으로 줄바꿈된다. (유동적)

 

  !  

<br>

: 줄바꿈 태그

: break의 줄임말

: 원하는 위치에 태그를 넣으면 화면에 줄바꿈되어 표시된다. (절대적)

: 단, 웹 브라우저는 텍스트 단락으로 인식하지 않는다.

: 닫는 태그가 없다.

 

ex) <p> 예시

    <p>비전공자의 개발자 도전기를 기록하는 블로그</p>

ex) <br> 예시

    <p>비전공자의 <br> 개발자 도전기를 기록하는 블로그</p>

 

 

 

• <hr>

  : 수평 줄 삽입 태그

  : horizontal의 줄임말

  : 단락의 주제가 바뀔 때 분위기 전환용으로 사용

  : CSS를 이용해 가로선 제거 가능

  : 닫는 태그가 없다.

 

ex) 

    <p>비전공자의 <br> <hr> 개발자 도전기를 기록하는 블로그</p>

 

 

 

• <blockquote> ~ </blockquote>

  : 인용문 삽입

  : 다른 텍스트보다 안으로 들여 써진다.

 

  !  

<cite> ~ </cite>

: 웹 문서나 포스트에서 참고 내용 표시

: 인용 사이트 주소 표시 가능

 

ex) <blockquote> 예시

<h1>주주디의 SW이야기</h1>
<p>비전공자의 개발자 도전기를 기록하는 블로그</p>
<blockquote>해야 할 일은 과감히 결심하라. 결심한 일은 반드시 실행하라. 벤자민 프랭클린</blockquote>

 

ex) <cite> 예시

<h1>주주디의 SW이야기</h1>
<p>비전공자의 개발자 도전기를 기록하는 블로그</p>
<blockquote>해야 할 일은 과감히 결심하라. 결심한 일은 반드시 실행하라. <cite>벤자민 프랭클린</cite></blockquote>

 

 

 

• <pre> ~ </pre>

  : 입력하는 대로 화면에 표시하기

  : performat의 줄임말

  : 소스에 표시한 공백이 화면에 그대로 표시된다.

  : 화면 낭독기 등에서 <pre> 태그가 적용된 부분은 건너뛰어 버리기 때문에 대체 텍스트를 추가하는 것이 좋다.

 

ex) 

    <pre>
        하늘에서 내린
        그대 이름
        돌시네아
    </pre>

 

---

* 인라벨 태그(tag)

줄바꿈 없이 텍스트 표현

---

• <strong> ~ </strong>

  <b> ~ </b>

  : 굵게 표시

 

→ stong

    굵게 강조할 텍스트

    강조하고 싶은 만큼 태그를 중복 사용

 

→ b

    굵게 표시할 텍스트

 

 

 

• <em> ~ </em>

  <i> ~ </i>

  : 이탤릭체 표시

 

→ em

    이탤릭체로 강조할 텍스트

    emphasis의 줄임말

    문장 흐름상 특정 부분을 강조할 때 사용

 

→ i

    이탤릭체로 표시할 텍스트

    italic의 줄임말

    생각, 꿈, 용어, 다른 언어의 관용구 등 단순하게 표시할 경우 사용

 

 

 

• <q> ~ </q>

  : 인용 내용 표시

  : quote의 줄임말

  : 줄바꿈 없이 다른 내용과 함께 한 줄로 표시됨

  : 따옴표를 붙여 표시된다. (소스 입력 시 자동으로 생성됨)

  : <cite> 태그를 이용해 사이트 주소 표시 가능

 

  !  

<blockquote>와 구별

 

ex)

<p>html 공부하기 <q>텍스트 태그</q> 2일차 공부 주제 </p>

 

 

 

• <mark> ~ </mark>

  : 하이라이트 효과

  : CSS로 배경색 변경 가능

 

ex) 

<p>html 공부하기 <mark><q>텍스트 태그</q></mark> 2일차 공부 주제 </p>

 

 

 

• <span> ~ </span>

  : 영역 묶기

  : 줄바꿈 없이 일부 텍스트만 묶어 스타일 적용

 

  !  

<div>

: 줄 바꿔 단락을 통째로 묶는 태그

 

ex) <span> 예시

 <p>html 공부하기 <span style="color:red;">2일차</span> 공부 주제 </p>

 

ex) <div> 예시

<p>html 공부하기 <div style="color:red;">2일차 공부 주제</div> </p>

 

 

 

• <ruby> ~ </ruby>

  : 동아시아 국가들의 글자에 주석을 함께 표기하기 위한 태그

 

  !  

<rt> ~ </rt>

: 주석으로 표기하고자 하는 내용을 담는 태그

 

ex> <ruby> 내용 <rt> 주석 </rt> </ruby>

 

 

• <abbr> ~ </abbr>

  : 약자 표시

  : title 속성을 함께 사용할 수 있음

 

 

• <code> ~ </code>

  : 컴퓨터 인식을 위한 소스 코드

  : 브라우저 화면에 코드를 표시할 수 있음

 

 

• <kdb> ~ </kdb>

  : 키보드 입력이나 음성 명령 같은 사용자 입력 내용

 

 

• <small> ~ </small>

  : 부가 정보처럼 텍스트를 작게 표시

 

 

• _~

  : 아래 첨자

 

 

• ^~

  : 위 첨자

 

 

• <s> ~ </s>

  : 취소선

 

 

• <u> ~ </u>

  : 밑줄