HTML 태그 : 텍스트

 

 

 

1. h1 ~ h6 

<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>

 

실행화면

   > 블록 속성으로, 한 줄씩 차지한다.

   > 제목을 표시하는데 사용한다.

 

2. p 

<p style="border: 1px solid green">이것은 p 태그입니다.</p>

 

실행화면

   > 글자를 표시하는 데 사용

   > 블록 속성으로, 한줄을 차지한다.

 

3. pre

<pre>
             A_____A
            | o   o |---------┐WWWW
            <   w   >         ┘
          ~~~~~~~~~~~~~~~~~~~~~~~~~
</pre>

실행화면

   > 태그 내 공백, 줄바꿈 등의 값을 모두 반영한다

 

4. b, br, i, mark

<p>
    b태그는 <b>볼드 처리</b>를 하는데 사용되고, 
    strong 태그 또한 <strong>마찬가지입니다.</strong>
    br태그는 줄을<br />바꾸는 데 사용하고, 
    i 태그와 em 태그는 <i>이탤릭체</i>, 즉 <em>문자를 기울이는 데</em>사용되며
    mark 태그는<mark>강조</mark> 하는데 사용합니다.
</p>

   - b, strong : bold체, 사용하면 태그 내 텍스트는 굵게 표시된다.

   - br : 줄 바꿈을 수행한다.

   - i , em : 이탤릭체, 사용하면 태그 내 텍스트는 기울여서 써진다.

   - mark : 강조, 태그 내 텍스트는 형광펜으로 칠한것처럼 하이라이트 표시가 된다.

실행화면

 

5. small, sub, sup

<p>small 태그는 <small>글자가 작아집니다.</small> 이렇게요.</p>
<p> 
    2<sup>2</sup> = 4, 
    H<sub>2</sub>O 는 물
</p>

   - small : 작은 글씨, 맨 아래 주석이나 저작권 표시등에 사용되며, 글씨가 작게 나온다.

   - sup : 위 첨자요소, 거듭제곱 등을 표시하는데 사용

   - sub : 밑 첨자요소, 화학식 표현, 각주 등을 표시하는데 사용한다.

실행화면

 

6. del, ins, code, kbd

<p>
     <del>취소선</del>
     <ins>밑줄</ins>
     <code>
        <pre>
        코드블럭
        여러줄일 경우 내부에 pre를 추가하여 작성한다.
        </pre>
    </code>
    <kbd> kbd 태그 </kbd>
</p>

실행화면

   - del : delete, 태그 내 텍스트에 취소선이 그어진다.

   - ins : insert, 태그 내 텍스트에 밑줄이 그어진다.

   - code : 인라인 코드 요소, 코드 블록을 만드는 태그, 문장 중간에 짧은 코드블럭을 넣는 데 사용된다.

            > 여러 줄의 코드블록을 만들고 싶다면 pre 태그를 사용하여 만들면 된다. 

   - kbd : 태그 내 텍스트를 고정폭 글꼴로 표시한다.

 

7. blockquote, q

<blockquote>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim
    cupiditate vero optio, tempora quas exercitationem corporis sint.
    Excepturi illum officiis sint, tempore animi perferendis deserunt
    neque odit dolorem! Voluptate, dignissimos!
</blockquote>
<q>
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laudantium
    obcaecati ratione magni incidunt ipsa voluptatum cupiditate, tempore
    hic necessitatibus porro, vitae quia iusto reprehenderit numquam
    perferendis distinctio aliquid maxime aut.
</q>

실행화면

   > 다른 출처로부터 인용된 블록을 정의할때 사용하며, 보통 들여쓰기를 사용한다.

   - blockquote : 가운데 정렬하여 보여주며, 다른 출처로부터 인용된 블록을 정의할 때 사용한다.

   - q : 따옴표를 앞 뒤에 붙이며, 짧은 인용구를 정의할 때 사용한다.

 

 

8. abbr, address, cite, bdo

<p>
    <abbr title="HyperText Markup Language"> HTML </abbr>과
    <abbr title="Cascading Style Sheets">CSS</abbr>
</p>
<br />
<address>대전광역시 서구 청사로 189 (둔산동)</address>
<br />
<cite>W3School</cite> 참고
<br />
<bdo dir="rtl">거꾸로거꾸로</bdo>

실행화면

   - abbr : abbreviation, 약자, 또는 생략어, 태그 내에 축약어를 적는데 사용하며,

      title 속성을 사용해 커서를 올릴 시 설명을 확인할 수 있다.

   - address : 문서나 글의 저자, 회사와 연락할 수 있는 정보 등을 적는데 사용한다.

      태그 내 텍스트는 주로 이탤릭체로 표시되며, 위쪽과 아래쪽에 약간의 공백을 삽입하여 다른 텍스트와 구분되게 한다.

   - cite : 인용또는 인용 중인 저작물을 표시하거나 창작물의 제목을 표시하는 데 사용한다. 

   - bdo : 글자의 방향을 표시하는데 사용한다. dir 속성에 ltr (왼쪽->오른쪽), rtl (오른쪽->왼쪽)

      두가지 옵션을 사용해 글자의 방향을 정한다.

 

9. a 

<a href="https://www.naver.com">네이버</a>
<a href="https://www.naver.com" target="_blank">네이버(새창)</a>

결과화면

   href 특성을 사용하여 다른 페이지나 같은 페이지의 위치, 파일, 이메일주소와 그 외 다른 URL로 연결할 수 있는

   하이퍼링크를 만든다.

   > 경로 : 절대경로, 상대경로 모두 사용 가능하며, 해당 경로로 이동한다.

   > 메일 : 장치 내 기본 메일 프로그램을 사용하여 경로에 적혀있는 이메일로 메일을 보낼 수 있다.

   > 전화번호 : 장치 내 기본 통화 프로그램을 사용하여 경로에 적혀있는 전화번호로 전화를 걸 수 있다.

 

   target 속성 : 

      > _self : 현재 브라우징 맥학에 표시한다 (기본값)

      > _blank :  별도의 탭을 띄워 경로로 이동한다. 

 

10. Entity

https://www.w3schools.com/html/html_entities.asp

HTML Character Entities

   > 특수 문자, &로 시작하고 ; (세미콜론) 을사용하여 끝낸다.

 

자주 쓰이는 Entity

   &lt : < 

   &gt : >

   &quot : 쌍따옴표

   &apos : 홑따옴표

   &amp : &

   &nbsp : 공백