[Web Crawler] HTML 기본태그 (3)

HTML Quotation / Comment

 

<q></q> Tag는 quote의 약자이며, 짧은 문장을 인용할 때 쓰이는 태그이며 브라우저에서는 큰 따옴표로 표시된다. <blockquote></blockquote> Tag는 긴 문장을 인용할 때 쓰이는 태그이며 브라우저에서는 들여쓰기로 표시된다.

 

전구를 발명한 에디슨은 이렇게 말했다.<br> <q>모든사람은 다이아몬드 원석과 같다 갈고 닦으면 누구나 찬란히 빛나게 마련이다</q><hr>

<p>긴 인용문은 브라우저에서 들여쓰기로 보여진다</p>
<blockquote cite="https://ko.wikipedia.org/wiki/HTML">
HTML또는 하이퍼텍스트 마크업 언어(HyperText Markup Language, 문화어: 초본문표식달기언어, 하<br>이퍼본문표식달기언어)는 웹 페이지를 위한 지배적인 마크업 언어다. HTML은 제목, 단락, 목록 등<br>과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니라 링크, 인용과 그 밖의 항목으로 구조적 <br>문서를 만들 수 있는 방법을 제공한다. 그리고 이미지와 객체를 내장하고 대화형 양식을 생성하는 <br>데 사용될 수 있다.</blockquote>

 

<abbr></abbr> Tag는 abbreviation의 약자이며, 밑줄이 그어진 축약 텍스트에 마우스를 올리면 축약텍스트의 뜻이 말풍선처럼 표시한다. HTML5 표준이 제정되기 전에는 축약어는 태그로, 두문자어는 태그로 구분하여 사용하였으나, 두 태그를 굳이 구분하여 사용할 필요성이 부족하다는 지적에 따라 HTML5에서는 태그로 통합되었다.

 

 <abbr title="Hyper Text Markup Language">HTML</abbr> &<abbr title="Cascading Style Sheets"> CSS</abbr>

 

Comment (주석)은 브라우저에 보여지는 것이 아니라 작성자가 어떠한 기능을 하는 코드라고 표시하거나 사람에게 알리는 기능을 한다.

 

<!-- 여기부터 제목부분 입니다 -->
<h1>HTML5 & CSS3</h1>

 

HTML Links

 

HTML에는 많은 하이퍼링크가 있으며 간단히 링크라고도 한다. 링크 위로 마우스를 올리면 마우스 화살표가 작은 손 모양으로 바뀌고, 링크를 누르면 해당 주소에 위치한 문서로 이동한다.

 

 <a href="https://wikidocs.net/">위키독스</a>

<a> : anchor의 약자이며 하이퍼링크를 의미한다. 위키독스 : 브라우저에서 URL이 보여지는것이 아니라 위키독스라는 텍스트가 보여지며 위키독스를 클릭했을 때 해당 URL을 통해 문서가 열린다. href : <a> tag에서 가장 중요한 속성이며 Hypertext Refernce의 약자이다. 또한, 연결할 주소를 지정한다.

 

위의 왼쪽 결과화면을 보면 위키독스라는 텍스트에 링크가 걸려있는것을 볼 수 있고 클릭하게 되면, href가 가리키는 주소로 이동하게 된다.

 

target Attribute (속성)

 

기본적으로 <a> tag를 클릭했을 때 현재 창에서 해당 주소 창이 열린다. 이를 변경해주기 위해 target이라는 속성이 필요하다.

 

_self : 디폴트 값으로서, 현재 창에서 해당 주소 문서 창/탭 이 열린다. _blank : 현재 창이 아니라 새 창/탭에서 해당 주소 문서 연다. _parent : 현재 보다 상위 프레임에서 해당 주소 문서 연다. _top : Root 프레임에서 해당 주소 문서 .

1. <a href="https://wikidocs.net/" target="_self">위키독스</a>
2. <a href="https://wikidocs.net/" target="_blank">위키독스</a>
3. <a href="https://wikidocs.net/" target="_parent">위키독스</a>
4. <a href="https://wikidocs.net/" target="_top">위키독스</a>

 

위의 결과화면에서 보다시피 target="_blank" 속성을 같이 사용하면 현재창이 아닌 새로운 창/탭에 해당 주소 문서창이 열리게 된다.

 

Link State (상태)

 

<a></a>로 싸여진 텍스트는 밑줄이 그어져 있으며 기본적으로는 link 상태의 경우, 파란색의 색깔을 띄고 있다. visited 상태의 경우, 보라색의 색깔을 띄고 있다. active 상태의 경우, 빨간색의 색깔을 띄고 있다. hover 상태의 경우, CSS3으로 사용자가 지정.

 

HTML Link를 이용한 Bookmarker

 

Bookmarker(책갈피)란 링크를 눌렀을 때 본문에서 href가 가리키는 section으로 이동한다. Bookmarker를 사용하기 위해서는 <a> tag에 id속성이나 name속성을 사용하여야 한다.

 

# id속성 사용
 <a href="#article">기사보러 가기</a>
               ...
 <h1 id="article">topic</h1>

# name 속성 사용
<a href="#article">기사보러 가기</a>
               ...
<h1><a name="article"></a>topic</h1>

<a href="#HTML">HTML 보기</a>
<hr>

<h2 id="one">제목 1</h2>
 <p>문단 1 입니다</p><hr>

<h2 id="two">제목 2</h2>
<p>문단 2 입니다</p><hr>

 <h2 id="three">제목 3</h2>
<p>문단 3 입니다</p><hr>

<h2 id="HTML">HTML5</h2>
<p> HTML 5입니다</p><hr>

 <h2 id="four">제목 4</h2>
<p>문단 4 입니다</p><hr>

 <h2 id="five">제목 5</h2>
<p>문단 5 입니다</p><hr>

 <h2 id="C">C 언어</h2>
<p> c언어 입니다.</p><hr>

<h2 id="java">JAVA</h2>
<p> JAVA 입니다.</p><hr>

<h2 id="Python">Python</h2>
<p> Python 입니다</p><hr>

<h2 id="Linux">Linux</h2>
<p> Linux 입니다</p><hr>

<h2 id="Pascal">Pascal</h2>
<p> Pascal 입니다</p><hr>

<h2 id="CSS">CSS3</h2>
<p> CSS3입니다</p>

 

위의 결과화면을 보듯이, HTML 보기 링크를 눌렀을 때 HTML5 section으로 넘어가는 것을 볼 수 있다.

 

https://wikidocs.net/86303

5.HTML Links