data: 참조 또는 인용 문구를 나타내는 방법 - q, blockquote

참조 또는 인용 문구를 나타내는 방법 - q, blockquote

Full Screen

참조 또는 인용 문구를 나타내는 방법 - q, blockquote



인용




다른 블로그나 웹 사이트의 글을 인용할 경우, 인용임 나타내는 태그에는
<blockquote> >와 <q> >가 있습니다. <blockquote> 태그는
새로운 문단에서 인용하는 블록 요소이고,
<q> 태그는 문단 안에서 인용할 때
사용하는 인라인 요소입니다.





 



기본형




<blockquote cite="xxx">...</blockquote>
<q cite="xxx">...</q>




인용문의 출처는 cite 속성으로 나타냅니다. cite 속성 입력은 선택 사항이고, 웹
브라우저에서는 보이지 않습니다.



 



blockquote



blockquote 요소의 기본 모양은 양쪽에 여백이 있는 것입니다.




<p>Blockquote</p>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla.</p></blockquote>



class="codepen"
data-default-tab="html,result"
data-editable="true"
data-preview="true"
data-height="441"
data-pen-title="HTML 인용하기 q,blockquote 예제2"
data-slug-hash="eYZQaWQ"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 441px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.





 



q



q 요소의 기본 모양은 인용 문구를 큰 따옴표로 감싸는 것 입니다.




<p>Lorem ipsum dolor sit amet <q cite="https://google.com">consectetur adipiscing</q> elit.</p>



class="codepen"
data-default-tab="html,result"
data-editable="true"
data-preview="true"
data-height="441"
data-pen-title="HTML 인용하기 q,blockquote 예제1"
data-slug-hash="poyQmja"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 441px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.






 



예제



인용문을 꾸미는 몇 가지 예제를 살펴봅니다.



class="plus"
href="https://urliveblogger.blogspot.com/2021/01/css-blockquote.html"
>인용문(blockquote) 스타일링하기
>

 



기타 HTML 참조






class="plus"
href="https://urliveblogger.blogspot.com/search/label/HTML/?max-html,results=6"
>HTML로 돌아 가기
>


Please write your comments