0023 HTML에서 인용하기(Quotation)


글을 쓰다보면 소설이나 뉴스 등 다른 글을 인용해야하는 상황이 종종 생긴다. 이런 상황을 위하여 HTML에도 글의 성격이 인용인지 단순한 텍스트인지 등의 요소를 구별할 수 있도록 이에 맞는 요소들을 갖추고 있다. 

    

<q> 요소는 짧은 인용구를 정의하는 요소다. 브라우저는 보통 <q> 요소의 주위에 큰 따옴표를 둘렀거나 굵게 표시한다.

   

<blockquote> 요소는 다른 자료로부터 거의 문단 단위 이상을 인용할 때 사용한다. 브라우저는 <blockquote> 요소를 보통 들여쓰기(indent)로 나타낸다. 

    

<q> 요소가 짧고 핵심적인 인용구라면, <blockquote> 요소는 책이나 시처럼 완전한 문단을 기억하는 인용구이다.

    

<abbr> 요소는 약어(abbreviation)이나 두문자(acronym)를 정의하는 요소이다.

    

<address> 요소는 해당 문건의 작가나 저작자의 연락처를 정의하는 요소이다. <address> 요소는 보통 이탤릭으로 표시되고 대부분의 브라우저는 <address> 요소 위아래로 줄바꿈(line break)을 집어넣는다.

     

<cite> 요소는 해당 작품의 작품명(타이틀)을 정의하는 요소이다. 브라우저에는 보통 이탤릭으로 표시된다.


이제 배운 내용들이 실제로 브라우저에 어떻게 나타나는지 확인해보기 위해서 다음과 같이 작성해서 0023.html 파일로 저장하고 실행해보자. 


<!DOCTYPE html>

   

<html>

<head><title>HTML로 인용하기 예제</title></head>

<body>

<p>

최근 말라리아로 고생하는 사람이 자주 보인다. 특히 해외여행으로 인한 감염이 많은 것으로 나타났다. 다음은 신문기사다.

</p>

<blockquote>

말라리아의 위험성은 해외에서 더 심각하다. <abbr title="world health orginization">who</abbr>는 <q>2015년 전 세계 말라리아감염자가 2억 1400만명, 사망자가 43만8000명에 달한다</q>라고 밝혔다. 이 중 상당수는 아프리카에서 발생했고 국내에도 지난해 해외에서 감염되어 온 환자가 72명으로 전체 국외유입감염병 중 2번째로 많은 수가 감염되었다.

</blockquote>

<P>말라리아에 대해서 좀 더 알고 싶다면 로버트 데소비츠가 쓴 <cite>말라리아의 씨앗</cite>을 추천한다.

</p>

<address>

저자 : 방구석 책벌레<br>

블로그 : deliciouslearning.tistrory.com

</address>

</body>

</html>


그러면 크롬 브르우저에서 아래와 같이 나타난다. 



우선 <blockquote> 요소로 인용한 곳은 들여쓰기(indent)가 된 문단처럼 나타났다. 그리고 <abbr> 요소로 집어넣은 내용은 아래에 점선으로 밑줄이 그어졌다. <q>요소는 큰 따옴표("")로 내용을 묶었고, <cite> 요소와 <address> 요소로 묶인 내용들은 이탤릭체로 나타났다.

    

브라우저에 어떻게 표현되었는지는 별로 중요하지 않다. 중요한 것은 브라우저가 각각의 내용에서 어떤 것이 인용구이고 어떤 것이 두문자이고 어떤 것이 인용된 작품명인지 안다는 사실이 중요하다.그러면 검색엔진은 이 웹 페이지가 말라리아에 대한 신문기사나 공신력 있는 단체의 말을 인용하고 있으며, 말라리아의 씨앗이라는 작품을 소개하고 있다는 것을 알게 되고 저자 자신과 접촉할 수 있는 연락처를 제시하고 있는 신뢰할만한 문서라고 판단하여 적절하게 이 웹 페이지를 소개할 것이다. 또, <abbr> 요소를 적절히 사용함으로써 브라우저와 검색엔진, 번역 시스템 등에 잘못된 단어 사용으로 오해받지 않게 될 것이다.

   

게다가 CSS를 이용하면 인용구가 전부 적절한 요소로 묶여 있으므로 각각의 요소에 대한 스타일을 명확하게 지정할 수 있게 된다.

Anki 파일


아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 


Ankilog 파일:   0023 HTML에서 인용하기(Quotation).apkg






저작자표시 비영리 변경금지

'Anki로 공부하기 > HTML공부' 카테고리의 다른 글

0025 HTML style 속성(attribute) 및 배경색 설정  (0) 2018.11.27
0024 블록(block) 요소와 인라인(inline) 요소  (0) 2018.11.26
0022 HTML로 글자의 형식 정하기  (0) 2018.11.23
0021 HyperText 링크를 제공하는 앵커(anchor)의 a요소 03 target 속성  (0) 2018.11.22
0020 HyperText 링크를 제공하는 앵커(anchor)의 a요소 02 title 추가하기  (0) 2018.11.21

0022 HTML로 글자의 형식 정하기


앞서부터 계속 스타일링은 CSS의 몫이라고 이야기해왔지만 HTML에서도 글자의 형식을 어느 정도 조작할 수 있다. 

   

<b> - 굵게 처리한 텍스트

<strong> - 중요한 텍스트(굵게)

<i> - 이탤릭으로 처리한 텍스트

<em> - 강조 텍스트(이탤릭)

<mark> - 특별히 표시한 텍스트(하이라이트)

<small> - 작은 텍스트

<del> - 삭제된 텍스트(가운데 줄)

<ins> - 삽입된 텍스트(밑줄)

<sup> - 위에 첨부된 텍스트(위첨자)

<sub> - 아래에 첨부된 텍스트(아래첨자)


이제  0022.html 파일을 다음과 같이 작성하여 실행해보자. 

    

<!DOCTYPE html>


<html>

 <head><title>HTML Formatting</title></head>

 <body>

  <p>

   <b>b-굵게 처리한 텍스트</b><br />

   <strong>strong-중요한 텍스트</strong><br />

   <i>i-이탤릭으로 처리한 텍스트</i><br />

   <em>em-강조 텍스트</em><br />

   <mark>mark-특별히 표시한 텍스트</mark><br />

   <small>small-작은 텍스트</small><br />

   <del>del-삭제된 텍스트</del><br />

   <ins>ins-삽입된 텍스트</ins><br />

   위첨자<sup>sup-위에 첨부된 텍스트</sup><br />

   아래첨자<sub>sub-아래에 첨부된 텍스트</sub>

  </p>

 </body>

</html>


크롬, 엣지, 파이어폭스 세가지 브라우저로 실행한 결과는 아래와 같이 나타난다.

    


지금부터는 이제 개발을 공부하기 시작하는 초보의 개인적인 이런 저런 생각이다.

    

최근의 실무에서는 CSS의 스타일시트로 글자를 꾸미고 있어 HTML의 글자 형식은 잘 사용하지 않는다고 들었다.

    

하지만 생각해보면 HTML의 마크업적인 측면은 내용을 구조화하는 것이다. 이는 화면에 디스플레이되는 측면보다는 검색엔진이 그 텍스트의 의미를 파악하기 위하여 어떤 요소가 사용되었는지 참조하는 측면이 더 중요하다. 그리고 그런 구조화는 영어권의 문서 작성 전통을 상당부분 수용하지 않을 수 없을 것이다. 가령, 영어권에서 이탤릭체를 사용하는 경우는 영화, 연극, 소설, 시 등의 제목을 인용하는 경우 단어 그 자체, 외국어, 고유명사 등등을 표시할 때 사용한다. 따라서 검색엔진은 <i> 요소로 감싼 텍스트를 어떤 작품의 제목, 고유명사, 하나의 단어나 인용구처럼 판단할 것이다. 이에 <em> 요소는 화면으로 보기에는 <i> 요소와 똑같이 이탤릭체로 강조되는 것으로 보이겠지만 검색엔진은 여기에 강조라는 가중치를 더할 것이다. 

    

만일, 검색엔진이 ‘phantom’이라는 검색어로 검색을 한다고 해보자. 검색엔진은 ‘phantom'이라는 용어를 <strong>요소로 감싼 웹페이지의 주제가 'phantom'과 큰 관계가 있을 것이라고 판단하고 <b>라는 요소로 감쌌다면 적어도 웹페이지에서 'phantom'이라는 단어를 사람들이 놓치지 않길 바란다고 판단할 것이다. 

    

또, <i> 요소로 감쌌다면 'phantom'이라는 단어가 "The Phantom of the Opera"와 같은 공연이나 작품과 관계있다고 판단할 것이고 더 나아가 <em> 요소로 감쌌다면 강조의 의미가 더해져 이 웹페이지가 "The Phantom of the Opera"와 같은 공연에 대한 이야기를 하는 웹페이지로 판단할 것이다. 

    

따라서 이러한 점을 고려하여 단지, CSS의 스타일링으로 눈으로 보기에 예쁜 웹페이지를 만드는 것에서 멈추지 말고 웹페이지가 전달하고자 하는 정보를 검색엔진이 정확히 이해하고 다른 사람들에게 연결시켜줄 수 있도록 하려면 CSS로만 스타일링하지 말고 HTML 요소들도 적절히 잘 활용할 필요가 있다고 생각한다.



Anki 파일


아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 


Ankilog 파일:  0022 HTML로 글자의 형식 정하기.apkg






저작자표시 비영리 변경금지

'Anki로 공부하기 > HTML공부' 카테고리의 다른 글

0024 블록(block) 요소와 인라인(inline) 요소  (0) 2018.11.26
0023 HTML에서 인용하기(Quotation)  (0) 2018.11.25
0021 HyperText 링크를 제공하는 앵커(anchor)의 a요소 03 target 속성  (0) 2018.11.22
0020 HyperText 링크를 제공하는 앵커(anchor)의 a요소 02 title 추가하기  (0) 2018.11.21
0019 HyperText 링크를 제공하는 앵커(anchor)의 a요소 01 사용법 및 href 속성  (0) 2018.11.20

+ Recent posts

티스토리툴바