Large Rainbow Pointer
[HTML] HTML 인용 태그 #2
짱잼
[HTML] HTML 인용 태그 #2💜 프론트엔드/HTML2023. 12. 3. 15:12@짱잼
반응형

시작하며...

이번엔 HTML 태그 중에서 인용에 관련된 blockquote, cite, q, mark, abbr 태그에 대해 알아볼 것이다.

 

HTML 속성

태그를 설명하기 전에 HTML 속성에 대해 알아볼 것이다.

 

HTML 속성은 무엇일까?

사용자가 원하는 기준에 맞도록 요소를 설정하거나 다양한 방식으로 요소의 동작을 조절하기 위한 값

즉 태그의 동작을 설정하고 제어하는 것이다.

 

예를 들어 처음 게시물에서 언어를 한국어로 바꿨을 때, 태그 안에 lang="en" 값을 lang="ko" 로 바꿨다.


  

    
    
    
    
  
<html lang="ko">

이때 태그 안에 값을 넣어 설정하는 것이라고 할 수 있다.

 

자세한 설명은 아래 링크에서 확인가능하다.

 

HTML 특성 참고서 - HTML: Hypertext Markup Language | MDN

HTML의 요소들은 특성을 가지고 있습니다. 특성은 사용자가 원하는 기준에 맞도록 요소를 설정하거나 다양한 방식으로 요소의 동작을 조절하기 위한 값을 말합니다.

developer.mozilla.org

 

HTML 인용 태그

blockquote, cite 긴 인용 태그

<blockquote>는 길이가 긴 인용문을 표시할 때 사용하는 태그이고,

<cite>는 인용문의 출처를 사용할 때 사용되는 태그이다.


  

    
    
    
    
  
    <h2>blockquote, cite 태그</h2>

    <blockquote

      cite="https://developer.mozilla.org/ko/docs/Web/HTML/Element/blockquote"

    >

      <p>

        blockqutoe는 인용문을 표시할 때 사용되고 <br />

        cite는 속성으로 인용문의 출처 URL을 넣는다

      </p>

    </blockquote>

    <cite>blockquote</cite> from MDN

blockquote 태그에 넣은 글자는 인용문이 되어 자동으로 들여 쓰기가 되고,

인용문의 출처 URL을 cite 라는 속성에 넣는다.

그리고 cite 태그는 출처 텍스트를 적는다.

 

결과

해당 태그에 대한 자세한 내용은 아래 링크에서 확인할 수 있다.

 

<blockquote>: 인용 블록 요소 - HTML: Hypertext Markup Language | MDN

HTML <blockquote> 요소는 안쪽의 텍스트가 긴 인용문임을 나타냅니다. 주로 들여쓰기를 한 것으로 그려집니다. (외형을 바꾸는 법은 사용 일람을 참고하세요) 인용문의 출처 URL은 cite 특성으로, 출처

developer.mozilla.org

 

<cite> - HTML: Hypertext Markup Language | MDN

HTML <cite> 요소는 저작물의 출처를 표기할 때 사용하며, 제목을 반드시 포함해야 합니다. 적절한 맥락 아래에서는 출처를 축약해서 표기할 수 있습니다.

developer.mozilla.org

 

q 짧은 인용 태그

<q>는 길이가 짧은 인용문을 표시할 때 사용되는 태그이다.


  

    
    
    
    
  
    <h2>blockquote, cite 태그</h2>

    <q cite="https://developer.mozilla.org/ko/docs/Web/HTML/Element/q"

      >q 태그는 짧은 인용문을 표시할 때 사용되고<br />

      자동으로 큰따옴표가 생긴다.</q

    >

q 태그도 속성 cite에 출처 URL을 넣는다.

결과

해당 태그에 대한 자세한 내용은 아래 링크에서 확인할 수 있다.

 

<q>: 인라인 인용문 요소 - HTML: Hypertext Markup Language | MDN

HTML <q>요소는 둘러싼 텍스트가 짧은 인라인 인용문이라는것을 나타냅니다. 대부분의 브라우저에서는 앞과 뒤에 따옴표를 붙여 표현합니다. <q>는 줄 바꿈이 없는 짧은 경우에 적합합니다. 긴 인

developer.mozilla.org

 

HTML 문자 표시 태그

mark 키워드 표시 태그

<mark> 태그는 검색을 했을 때 해당 키워드에 표시가 되거나,

인용문에 주시해야 될 부분을 표시하는 태그이다.

mark 태그 예시


  

    
    
    
    
  
    <h2>mark 태그</h2>

    <p>mark 태그는 키워드에 <mark>표시</mark> 해준다.</p>

결과

해당 태그에 대한 자세한 내용은 아래 링크에서 확인할 수 있다.

 

<mark> - HTML: Hypertext Markup Language | MDN

HTML <mark> 요소는 현재 맥락에 관련이 깊거나 중요해 표시 또는 하이라이트한 부분을 나타냅니다.

developer.mozilla.org

 

abbr 준말/머리글자 표시 태그

<abbr>은 준말/머리글자를 표시할 때 사용되는 태그이다.


  

    
    
    
    
  
    <h2>abbr 태그</h2>

    <p>

      해당 게시물은

      <abbr title="Hyper Text Markup Language">HTML</abbr>태그 설명을 하고 있다.

    </p>

abbr 태그는 title이라는 속성에 준말의 풀네임을 적어준다.

그러면 아래 사진 처럼 마우스를 가져다 대면 해당 부분의 title 속성 값을 보여준다.

결과

해당 태그에 대한 자세한 내용은 아래 링크에서 확인할 수 있다.

 

<abbr> - HTML: Hypertext Markup Language | MDN

HTML <abbr> 요소는 준말 또는 머리글자를 나타냅니다. 선택 속성인 title을 사용하면 준말의 전체 뜻이나 설명을 제공할 수 있습니다. title 속성은 전체 설명만을 가져야 하며 다른건 포함할 수 없습

developer.mozilla.org

 

 

마무리 하며...

해당 게시물에서 인용과 관련된 html 태그를 알아보았다.

평상시에 사용하지 않아서 잘 모르고 있던 태그였는데 제대로 사용하면 유용한 태그인 것 같다.

 

(해당 게시물은 아래 영상을 참고하여 작성한 글입니다.)

반응형
저작자표시

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

[HTML] HTML 입력(input) 태그 #6  (1) 2023.12.07
[HTML] HTML 링크 태그 #5  (1) 2023.12.06
[HTML] HTML 이미지 / 표 태그 #4  (1) 2023.12.05
[HTML] HTML 나열 태그 #3  (0) 2023.12.03
[HTML] HTML 사용하는 법 / 기초 태그 # 1  (0) 2023.12.02
짱잼
@짱잼 :: 짱잼이의 FE 개발 공부 저장소

FE 개발자가 되고 싶은 짱잼이

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!

💜 프론트엔드/HTML 추천 글
more
image
loading

티스토리툴바