소스를 인용하거나 HTML의 주변 텍스트에서 인용문을 식별하는 방법에는 여러 가지가 있습니다. 오늘은 HTML 인용 요소에 대해 알아보겠습니다. <blockquote> , <q> , <abbr> , <address> , <bdo> 및 <cite> . 각각 고유한 사용 사례가 있습니다. 우리는 각각을 식별하고 마크업에서 사용하는 방법을 보여줍니다.
대문
<blockquote> 요소는 여러 줄의 긴 인용 텍스트에 사용됩니다. 요소는 인용문 자체를 주변 단락이나 다른 HTML 요소와 구별하는 데 사용됩니다. 어떤 유명한 극작가의 독백을 사용하는 이 예를 보십시오.
<html>
<head>
<style>
body {
font-family: 'Roboto';
margin: 20px;
}
blockquote p {
width: 80%;
margin: 0px 20px;
text-align: right;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora doloribus quae mollitia vitae inventore minus sed id ut facere officiis cupiditate corporis, ratione, neque repellat cumque temporibus, dicta at labore. Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos aliquam adipisci at earum, optio consequatur et, alias corrupti voluptatum voluptates repellendus, tenetur suscipit qui nostrum totam veritatis doloremque laborum officia! Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem nostrum voluptate, perferendis amet hic totam perspiciatis excepturi. Nam earum, neque, in nihil magni aliquid id, iste deserunt tempore corporis eaque?</p>
<blockquote>
"To be, or not to be: that is the question:
Whether 'tis nobler in the mind to suffer
The slings and arrows of outrageous fortune,
Or to take arms against a sea of troubles,
And by opposing end them?..."
<p>—<em>Hamlet</em>, Act III, Scene I</p>
</blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora doloribus quae mollitia vitae inventore minus sed id ut facere officiis cupiditate corporis, ratione, neque repellat cumque temporibus, dicta at labore. Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos aliquam adipisci at earum, optio consequatur et, alias corrupti voluptatum voluptates repellendus, tenetur suscipit qui nostrum totam veritatis doloremque laborum officia! Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem nostrum voluptate, perferendis amet hic totam perspiciatis excepturi. Nam earum, neque, in nihil magni aliquid id, iste deserunt tempore corporis eaque?</p>
</body>
</html> q
<q> 요소는 짧은 따옴표 주위에 따옴표를 넣습니다. 이것은 또는 과 매우 유사하지만 따옴표를 위한 인라인 요소입니다. 인용문이 여러 줄에 걸쳐 있는 경우 를 대신 사용해야 합니다.
<html>
<head>
<style>
body {
font-family: 'Roboto';
margin: 20px;
}
</style>
</head>
<body>
<p>
The mission statement for the Make-A-Wish Foundation is <q>Together, we create life-changing wishes for children with critical illnesses.</q>
</p>
</body>
</html> 약어
글의 흐름에 포함하지 않고 두문자어를 정의하고 싶을 때가 있습니다. <abbr>를 사용하면 됩니다. 꼬리표. 또한 , 또는 와 유사한 인라인 요소입니다. 태그의 title 속성 안에 두문자어를 정의하십시오.
<html>
<head>
<style>
body {
font-family: 'Roboto';
margin: 20px;
}
</style>
</head>
<body>
<abbr title="COrona VIrus Disease 2019">COVID-19</abbr> was first discovered in December 2019 in Wuhan, China.
</body>
</html> 주소
address 요소는 작성자의 연락처 정보(개인 또는 비즈니스)와 물리적 주소, 이메일 주소, 소셜 미디어 링크, 전화번호, 개인 웹사이트 및 기타 연락처와 유사한 항목을 정의합니다.
텍스트는 기울임꼴로 표시되며 주소 블록 앞뒤에 줄 바꿈이 있습니다.
<html>
<head>
<style>
body {
font-family: 'Roboto';
margin: 20px;
}
</style>
</head>
<body>
<address>
Written for Career Karma by Christina Kopecky<br />
Other Articles: <a href="https://careerkarma.com/blog/author/christina-kopecky/">Career Karma Author Page</a><br/>
Twitter: <a href="https://twitter.com/cmvnk" target="_blank" rel="noopener noreferrer">@cmvnk</a><br />
Github: <a href="https://github.com/ckopecky" target="_blank" rel="noopener noreferrer">ckopecky</a><br />
</address>
</body>
</html> bdo
오른쪽에서 왼쪽으로 읽는 언어로 작업할 때 텍스트를 직접 렌더링하는 것보다 텍스트를 오른쪽에서 왼쪽으로 렌더링하는 태그를 사용하는 것이 더 쉽습니다. <bdo> 사용 양방향 재정의로 텍스트를 렌더링하는 요소입니다. 방향을 나타내는 dir 속성이 필요합니다. 기본값은 "ltr"입니다. "rtl"은 텍스트를 오른쪽에서 왼쪽으로 렌더링합니다.
<html>
<head>
<style>
body {
font-family: 'Roboto';
margin: 20px;
}
</style>
</head>
<body>
<bdo dir="rtl">This renders Right-to-Left</bdo><br />
<bdo>This renders Left-to-Right</bdo>
</body>
</html> 인용
cite 요소는 오늘 우리가 이야기하는 마지막 인용 요소입니다. 인용 태그는 창작물의 제목을 정의합니다. 인라인 요소이며 기울임꼴로 렌더링됩니다.
참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.
부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.
<html>
<head>
<style>
body {
font-family: 'Roboto';
margin: 20px;
}
p {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<p>
<cite>Mona Lisa</cite>, Leonardo da Vinci <br />
<sup>The Louvre (since 1797)</sup>
</p>
</body>
</html> 결론
재검토 해보자. 오늘 우리는 다음을 살펴보았습니다:
<blockquote>– 더 긴 따옴표에 사용<q>– 한 줄 이하의 짧은 따옴표에 사용<abbr>– 텍스트에서 약어를 정의하는 데 사용됨<address>– 작성자 또는 작성자의 연락처 정보를 정의하는 데 사용<bdo>– 텍스트를 왼쪽에서 오른쪽으로 또는 오른쪽에서 왼쪽으로 렌더링할지 여부를 제어하는 데 사용<cite>– 무언가의 제목을 정의하는 데 사용
많은 인용 요소가 있으며 각 요소에는 사용 사례가 있습니다. 프로젝트에 맞는 것을 수정하십시오!