ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • Tag - 텍스트 관련
    프론트엔드/HTML 2020. 8. 18. 17:24

    블록 레벨의 텍스트 태그

     

    <hn> 태그 -  제목 표시하기

    <h1> 제목입니다 </h1>
    <h2> 제목입니다 </h2>
    <h3> 제목입니다 </h3>

     

    <body> 태그 안에서 글의 제목을 표시할 때 써준다.

     

    <hn> 태그는 제목을 뜻하는 'heading'의 줄임말인 h와 숫자(1~6)를 사용해 <h1>~<h6>까지 표현한다.

     

    <p> 태그 - 단락 만들기

    <p> 단락입니다 </p>

     

    'p'는 'paragraph'의 줄임말로, 텍스트 단락을 만드는데 사용한다.

     

    <br> 태그 - 줄 바꾸기

    <span> 줄 바꾸기 예제입니다. </span>
    <br>
    <span> 줄 바꾸기 예제입니다. </span>

     

    <br> 태그를 쓰면 줄바꿈이 된다.

     

    <hr> 태그 - 수평 줄 넣기

    <span> 줄 바꾸기 예제입니다. </span>
    <hr>
    <span> 줄 바꾸기 예제입니다. </span>

     

    <hr>이 있는 줄에 긴 수평 줄을 넣는다.

     

    <blockquote> - 인용문 넣기

    <p> 인용문 테스트입니다 </p>
    <blockquote>
    인용문 테스트입니다. 이 부분은 들여쓰기가 됩니다.
    </blockquote>
    <p> 인용문 테스트입니다 </p>

     

    <blockquote> 사이에 텍스트를 넣어주면 해당 텍스트는 들여쓰기가 되서 다른 텍스트와 구별된다.

     

    <pre> - 입력 내용 그대로 화면에 표시

    <pre> 입력하는 대로 표시됩니다. </pre>

     

    일반적인 방법으로 내용을 표현해줄 경우 내가 입력한 값 그대로 나오지 않는다.

     

    별도의 명령이 없는 경우 자체적으로 깔끔하게 표시한다.

     

    예를 들어 여러 개의 공백을 넣어도 브라우저 상에는 한 개의 공백만 표시된다.

     

    <pre>를 쓰면 그 안에 있는 내용은 내가 쓴 내용 그대로 표시가 된다.

     

    다만 <pre> 태그를 쓰면 웹 접근성이 떨어지기 때문에 사용을 잘 고려해야 한다.

    '프론트엔드 > HTML' 카테고리의 다른 글

    Tag - 목록(list) 관련  (0) 2020.08.19
    Tag - 텍스트 관련 2  (0) 2020.08.18
    HTML 문서 기본 구조  (0) 2020.08.18
    태그(Tag)에 관해서  (0) 2020.08.18
    HTML이란?  (0) 2020.08.18
Designed by Tistory.