HTML Quotation & Comments (인용구 & 주석)

인용과 관련된 html 요소

태그(Tag)	내용
<blockquote>	다른 소스에서 인용되는 부분을 정의
<q>	짧은 인용문의 정의
<abbr>	약어(abbreviation) 및 머리글자(acronym)를 정의
<address>	문서의 작성자 / 소유자에 대한 연락처 정보를 정의
<cite>	제목을 정의
<bdo>	텍스트의 방향을 정의

인용이란, 남의 말이나 글을 빌려 사용하는 것으로서 html은 위의 태그들을 이용하여 해당 텍스트가 인용, 인용문임을 표시할 수 있습니다.

인용을 표현하지 않은 경우 잘못하면 타인의 말이나 글을 가로채는 것이 될 수 있기 때문에 인용에 대한 언급은 대단히 중요합니다.

---

<blockquote>

여러줄의 인용문을 표시하는 용도로 사용합니다. 해당 태그를 사용해서 기입한 내용들을 실제 웹 페이지 상에서 모두 들여쓰기(indent) 처리되어 일반적인 내용들과 구분되게 됩니다.

<p> 주어진 시간을 어떻게 사용해야 하는 지에 대한 답은 다음을 통해서 얻을 수 있다. </p>
<blockquote>
<p>
일하는 시간과 노는 시간을 뚜렷이 구분하라<br>
시간의 중요성을 이해하고 매순간을 즐겁게 보내고 유용하게 활용하라<br>
그러면 젋은 날은 유쾌함으로 가득찰것이고 늙어서도 후회할 일이 적어질것이며<br>
비록 가난할 때라도 인생을 아름답게 살아갈수있다  – 루이사 메이올콧
</p>
</blockquote>

다음과 같이 인용문 부분을 들여쓰기를 통해서 구분하여 표시해주는 것을 확인할 수 있다.

일반적으로 웹 브라우져에서 <blockquote> 태그 안에 작성된 내용들은 들여쓰기를 통해서 작성되는 것을 확인할 수 있습니다.

---

<q>

짧은 한 줄의 인용문을 표시하는 용도로 사용합니다. 웹 페이지 상에서는 해당 태그를 사용하여 기록한 내용의 주위에 인용부호("")가 삽입되어 화면 상에 나타나게 됩니다.

 

<p>로버트 엘리엇은 다음과 같이 말했다.
<q>피할 수 없으면 즐겨라.</q>
그의 이러한 말은 우리에게 많은 깨달음을 준다.</p>

다음과 같이 인용문의 주위에 인용부호"" 가 삽입된 것을 확인할 수 있다.

---

<abbr>

html 문서에서 약어(abbreviation) 또는 두문자어(acronym) 등을 표시, 정의할 때 유용하게 사용할 수 있는 태그 입니다. 예를 들어 WHO(국제 보건기구,World Health Organization) 를 표시한다고 할 때 다음과 같이 코드를 작성할 수 있습니다.

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

위와 같이 약어를 표시, 정의하게 되는 경우 이는 웹 브라우져, 번역 시스템 및 검색엔진에 유용한 정보를 제공할 수 있게 됩니다. 만약 해당 약어 위에 커서를 올렸을 때 이에 대한 설명을 보고 싶은 경우 이전에 공부했었던 title 태그를 사용할 수 있습니다.

---

<address>

해당 html 문서 작성자 / 소유자에 대한 정보를 기입할 때 주로 사용하게 되는 태그 입니다. 여기서 말하는 작성자, 소유자에 대한 정보는 전화번호, 이메일 주소, SNS 주소, 실제주소 등에 대한 정보를 포함할 수 있습니다. html 문서에서 <address> 태그로 작성된 내용들은 웹 페이지에서 기울임꼴(Italic)로 렌더링 되며 웹 브라우져는 항상 <address> 요소의 앞 뒤에 줄 바꿈을 추가합니다.

<p>The HTML address element defines contact information (author/owner) of a document or article.</p>

<address>
Written by Juyoung Ha.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

위의 코드를 렌더링한 모습, address 태그로 작성된 부분이 Italic 채로 표시되는 것을 확인할 수 있음

---

<cite>

주로 페이지에 어떤 창의적인 작품 or 제품 등의 이름을 표시하는 용도로 사용합니다. <cite> 태그를 사용하여 작성된 내용은 웹 브라우져 상에서 기울임꼴(Italic)로 렌더링 되어서 나타납니다. 즉, 다음과 같이 활용할 수 있습니다.

<p>The HTML cite element defines the title of a work.</p>
<p>Browsers usually display cite elements in italic.</p>

<img src="img_the_scream.jpg" width="220" height="277" alt="The Scream">
<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>

The Scream 부분이 Italic 채로 표시된 것을 볼 수 있다.

---

<bdo>

텍스트가 출력되는 방향을 재정의할 때 사용합니다. 여기서 BDO는 Bi-Directional Override의 약자 입니다.

<bdo dir="rtl">This line will be written from right to left</bdo>

여기서 dir 이라는 속성의 속성값을 정의함으로서 텍스트의 출력방향을 재정의할 수 있습니다. 여기서 rtl은 right to left를 의미하며 텍스트를 오른쪽에서 왼쪽방향으로 출력함을 의미합니다.(ltr을 사용하게 되면 왼쪽에서 오른쪽으로, 정상적인 형태로 출력됩니다.)

텍스트 출력 방향이 변경된 모습

---

Comments(주석)

html 문서를 웹 브라우져가 읽어들일 때 읽지않고 넘어가는 부분으로서 코드 작성자가 코드에 대한 설명을 기입하기 위한 용도로 주로 사용합니다. 코드의 가독성을 높이기 위해서 필수적으로 권장되는 요소 입니다.

<!-- 주석 내용(코드에 대한 설명, 해당 코드를 사용한 이유 등등) -->

html을 공부하기 이전에 C나 Java와 같은 프로그래밍 언어를 먼저 공부해보신 분들은 주석의 중요성을 이미 알고 계실 것이라고 생각합니다. 자신이 짠 코드를 나중에 자신이 이해해하지 못하는 경우도 없을 것 같지만 생각보다 꽤 빈번하게(?) 일어납니다. 또한 꼼꼼하게 적어둔 주석문은 타인이 내가 작성한 코드를 이해하는 데 많은 도움을 줍니다. 실제로 저희 학부 교수님들께서도 저희가 코드를 작성할 때 주석문에 꽤 많은 정성을 들일 것을 강조하십니다. 그만큼 주석을 꼼꼼하게 적어두는 것은 좋은 습관이며 소스코드에 대한 잘못된 이해나 이로 인해 발생할 수 있는 어려움들을 예방할 수 있게 해줍니다.