HTML - 인용: 웹 콘텐츠에 깊이와 신뢰성을 더해주기

안녕하세요, 웹 개발자 지망생 여러분! 오늘 우리는 HTML 인용의 세계로 빠져들어가겠습니다. 친절한 이웃 컴퓨터 교사로서, 이 여정을 안내해드리는 것을 기쁜 마음으로 생각합니다. 믿으세요, 이 수업이 끝나면 당신은 HTML로莎士比亚처럼 인용할 수 있을 것입니다! ?

HTML - Quotations

HTML 인용 태그 목록

시작하기 전에, 오늘 다룰 인용 관련 태그들을 빠르게 살펴보겠습니다:

이제 이 태그들을 하나씩 자세히 탐구해보겠습니다!

<q> 태그는 짧은, 인라인 인용에 완벽합니다. 인용 태그 중에서는 스위스 아ーノ이Knife 같은 존재 - 작지만 아주 유용합니다!

<p>莎士比亚가 한 말처럼, <q>죽는 것인가, 살아 있는 것인가, 그것이 문제로다.</q></p>

브라우저에서 렌더링되면 다음과 같이 보입니다:

莎士比亚가 한 말처럼, "죽는 것인가, 살아 있는 것인가, 그것이 문제로다."

브라우저가 <q> 태그 내 텍스트 주위에 인용符를 자동으로 추가해줍니다. 작은, 헌신적인 편집자가 뒤에서 일하고 있는 것 같네요!

그렇다면 전체 문단을 인용하고 싶다면 어떻게 하나요? 그때 우리의 친구 <blockquote>가 유용합니다. <q>의 큰 형제로, 더 긴 인용에 사용됩니다.

<blockquote>
<p>두 길이 나무 속에서 갈라지고, 나는—
나는 덜 간다가 말한 길을 선택했네,
그것이 모든 차이를 만들었다.</p>
</blockquote>

이는 다음과 같이 렌더링됩니다:

두 길이 나무 속에서 갈라지고, 나는— 나는 덜 간다가 말한 길을 선택했네, 그것이 모든 차이를 만들었다.

테스트 팁: <blockquote>는 웹사이트의 추천문에 훌륭합니다. 인용이 더 두드러지게 보이고 더 큰 무게를 가집니다!

이제 누군가를 인용했으니, 공정하게 그들에게 공을 돌려야 하지 않나요? 그때 <cite> 태그가 등장합니다. 인용의 원천을 참조하는 데 사용됩니다.

<blockquote>
<p>위대한 작업을 수행하는 유일한 방법은 당신이 하는 일을 사랑하는 것입니다.</p>
<cite>스티브 乔布斯</cite>
</blockquote>

이는 다음과 같이 표시됩니다:

위대한 작업을 수행하는 유일한 방법은 당신이 하는 일을 사랑하는 것입니다.

— 스티브 乔布斯

<cite> 태그는 일반적으로 기본적으로 이탤릭체로 렌더링되어 독특한 외관을 가집니다.

<address> 태그라는 이름에도 불구하고, 이 태그는 단순히 거리 주소에만 사용되지 않습니다. 문서나 기사의 저자의 어떤 종류의 연락처 정보에도 사용됩니다.

<address>
John Doe에 의해 쓰여졌습니다.<br>
방문하십시오:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

이는 다음과 같이 렌더링됩니다:

John Doe에 의해 쓰여졌습니다. 방문하십시오: Example.com Box 564, Disneyland USA

<address>는 일반적으로 이탤릭체로 표시되며 브라우저는 요소 앞과 뒤에 줄 바꿈을 추가합니다.

뒤로 쓰고 싶은 적이 있었나요? <bdo> (Bi-Directional Override) 태그는 텍스트 방향 조작의 티켓입니다!

<p>이 텍스트는 왼쪽에서 오른쪽으로 갑니다.</p>
<p><bdo dir="rtl">이 텍스트는 오른쪽에서 왼쪽으로 갑니다.</bdo></p>

이는 다음과 같이 표시됩니다:

이 텍스트는 왼쪽에서 오른쪽으로 갑니다.

.tfel ot thgir og lliw txet sihT

dir 속성은 "ltr" (왼쪽에서 오른쪽) 또는 "rtl" (오른쪽에서 왼쪽)으로 설정할 수 있습니다. 이는 아랍어나 히브리어와 같은 오른쪽에서 왼쪽으로 쓰는 언어에 특히 유용합니다.

마지막으로, <abbr> 태그를 소개합니다. 이 태그는 약자나 축약어를 나타내는 데 사용됩니다.

<p>세계보건기구(<abbr title="World Health Organization">WHO</abbr>)는 1948년에 창립되었습니다.</p>

이는 다음과 같이 표시됩니다:

세계보건기구(WHO)는 1948년에 창립되었습니다.

하지만 이 cool한 부분은: "WHO"에 올라가면 전체 명칭 "World Health Organization"을 볼 수 있습니다. webpage에 비밀 디코더 링을 가진 것 같네요!

그럼 여러분! HTML 인용 태그의 도구키트를 마련했습니다. 기억하세요, 이 태그들은 단순히 포맷ting하는 것에 관한 것이 아니라 - 콘텐츠에 의미와 구조를 더해주어 접근성을 높이고 SEO 친화적으로 만듭니다.

마무리하면서, 한 학생이 한 말이 떠오릅니다. "HTML은 성인을 위한 레고와 같아!" 그리고 알고 보면 그말이 맞았습니다. 각 태그는 다른 레고 블록처럼, 당신은 놀라운 웹 구조를 만드는 주인공입니다.

그러므로 마음껏 인용하고, 인용하고 축약해 보세요. 그리고 기억하세요, 지혜로운 웹 개발자가 한 말처럼: <q>위대한 HTML 권력은 큰 책임을 동반합니다!</q> 즐겁게 코딩하세요! ?

Credits: Image by storyset