자습서/HTML

HTML 인용구 - Quotation

2023. 5. 15. 08:00
목차
  1. <blockquote> 태그
  2. <q> 태그

인용구는 다른 사람의 말이나 글을 인용할 때 사용됩니다. 인용구를 사용함으로써 다른 사람의 생각이 나 의견을 적절하게 표현하면서도 출처를 명확하게 나타낼 수 있습니다. 또한 인용구는 글의 신뢰성을 높이고, 독자에게 더 나은 정보를 제공함으로써 글의 가치를 향상시킵니다.

 

일반적으로 인용구는 다음과 같은 상황에서 사용됩니다.

  • 다른 사람의 말이나 글을 인용하는 경우
  • 문헌이나 연구를 인용하는 경우
  • 자신의 글에서 이전에 썼던 내용을 인용하는 경우

HTML에서 인용구를 표현하는데 사용되는 주요 태그는 <blockquote>와 <q>입니다.

<blockquote> 태그

<blockquote> 태그는 긴 인용구 블록을 표현할 때 사용됩니다. 이 태그는 일반적으로 인용된 내용을 들여쓰기하고, 왼쪽과 오른쪽에 여백을 추가하여 인용구 블록을 구분짓습니다. 브라우저는 이 태그를 사용하여 인용구 블록의 스타일을 변경할 수 있습니다. 또 속성에 cite를 추가하여 인용구의 출처를 명확하게 할 수 있습니다.

 

다음은 <blockquote> 태그를 사용한 예제 코드입니다.

<blockquote>
  <p>언제나 인생에서 새로운 기회를 만들어내고자 노력하라. 대부분의 사람들은 기회가 오기를 기다리는 것이다. 그러나 기회는 찾아오는 것이 아니라 만들어 내는 것이다.</p>
  <cite>존 F. 케네디</cite>
</blockquote>

실제 웹 페이지에서 표시되는 방식

언제나 인생에서 새로운 기회를 만들어내고자 노력하라. 대부분의 사람들은 기회가 오기를 기다리는 것이다. 그러나 기회는 찾아오는 것이 아니라 만들어 내는 것이다.

존 F. 케네디

<q> 태그

<q> 태그는 짧은 인용구를 표시할 때 사용됩니다. 이 태그는 인용구 앞뒤에 따옴표를 추가하여 인용구를 구분짓습니다. 브라우저는 이 태그를 사용하여 인용구에 적합한 스타일을 적용할 수 있습니다.

 

다음은 <q> 태그를 사용한 예제 코드입니다.

<p>그는 말했다, <q>성공의 비결은 노력이다.</q></p>

실제 웹 페이지에서 표시되는 방식

그는 말했다,

성공의 비결은 노력이다.

  1. <blockquote> 태그
  2. <q> 태그
'자습서/HTML' 카테고리의 다른 글
  • HTML 링크 태그 - Link Tags
  • HTML 스타일 속성 - 웹페이지 스타일링을 위한 기본 요소
  • HTML 서식 태그 - Text Formatting Tags
  • HTML 단락 태그
메타보드
메타보드
메타보드는 다양한 학습을 위한 자습서 및 예제를 제공합니다. 궁금한 점이나 요청사항은 댓글 게시판 및 방명록을 통해 언제든지 공유해주세요.

블로그 메뉴

  • 홈
  • 방명록
  • 분류 전체보기
    • 자습서
      • HTML
      • CSS
      • JavaScript
    • 웹 애플리케이션

태그

인기 글

메타보드
HTML 인용구 - Quotation
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.