![[HTML & CSS] HTML 기본태그 3 - <q>, <abbr>, <Link>](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcrGSr4%2FbtrLJjMsHS5%2FWokgNnWKpXkaYkCGnAqtA0%2Fimg.png)
이전글 HTML 기본태그 2의 연장입니다.
1. <q>와 <blockquote>태그
1-1. <q>태그
<q>~</q>태그는 quote의 약자이며, 짧은 문장을 인용할때 사용하는 태그입니다.
브라우저에서는 큰 따옴표로 표현됩니다.
예시)
<!DOCTYPE HTML>
<html>
<head>
<title> Text Formatting Tag </title>
<meta charset="UTF-8">
</head>
<body>
<q> 이렇게 큰 따옴표로 표시가 됩니다. </q>
</body>
</html>
결과)
1-2. <blockquote>태그
<blockquote>~</blockquote>태그는 긴 문장을 인용할때 쓰이는 문장이며 브라우저에서는 들여쓰기로 표시됩니다.
<blockquote cite="url">은 cite 속성을 이용하여 인용한 문장의 출처를 밝히는데 사용합니다.
예시)
<!DOCTYPE HTML>
<html>
<head>
<title> Text Formatting Tag </title>
<meta charset="UTF-8">
</head>
<body>
긴 인용문
<hr>
<blockquote cite="https://terms.naver.com/entry.naver?docId=1168097&cid=40942&categoryId=32838">
HTML은 문서의 글자크기, 글자색, 글자모양, 그래픽, 문서이동(하이퍼링크) 등을 정의하는 명령어로서 <br>
홈페이지를 작성하는 데 쓰인다. HTML에서 사용하는 명령어는 태그(tag)라고 하는데 꺽쇠괄호"<>"를 사용하여 나타낸다.<br>
일반적으로 태그는 시작과 끝을 표시하는 2개의 쌍으로 이루어져 있으나 "img", "br"등의 태그와 같이 시작태그만으로 <br>
그 영향을 나타내는 경우도 있으며, 종료 태그의 이름은 슬래시 문자[/]로 시작된다. <br>
이와같이 HTML로 작성된 문서를 HTML문서라 하며 이 HTML로 작성된 문서를 웹 브라우저가 해석하여 이용자에게 <br>
보여주게 된다. HTML에서는 문서가 별도의 코드(code)를 인식하여 완벽한 하이퍼텍스트를 만들 뿐만 아니라 <br>
단어 또는 단문을 인터넷의 다른 장소나 파일로 연결시킬 수 있다. <br>
</blockquote>
</body>
</html>
결과)
2. <abbr> 태그
<abbr>~</abbr>태그는 abbreviation의 약자이며, 밑줄이 그어진 축약 텍스트에 마우스를 올리면 축약텍스트의 뜻이 툴팁처럼 나타나는 태그입니다.
<abbr>태그는 title속성과 함께 사용하여 축약텍스트의 뜻을 명시합니다.
예시)
<!DOCTYPE HTML>
<html>
<head>
<title> Text Formatting Tag </title>
<meta charset="UTF-8">
</head>
<body>
<abbr title="world wide web">WWW</abbr>
</body>
</html>
결과)
마우스를 가져가면 world wide web이란 글씨가 툴팁처럼 나타나게 됩니다.
3. HTML Link
3-1. <a>태그
<a>~</a>태그는 anchor의 약자이며 하이퍼링크를 의미합니다.
<a>태그의 컨텐츠부분에 브라우저에서 띄우고 싶은 글자를 입력합니다.
href 속성 : HyperText Reference의 약자이며 <a>태그의 시작태그에 연결할 주소를 입력합니다.
예시)
<!DOCTYPE HTML>
<html>
<head>
<title> Link Tag </title>
<meta charset="UTF-8">
</head>
<body>
<a href="https://hgk5722.tistory.com/332"> HTML 기본구조와 구성요소 </a>
</body>
</html>
결과)
3-2. target Attribute(속성)
<a>태그는 디폴트값으로 현재 창에 연결할 페이지를 불러옵니다. 이를 변경하기 위해 target태그를 이용할 수 있습니다.
- _self : 디폴트 값으로써, 현재 창에서 연결할 페이지를 불러온다.
- _blank : 현재 창이 아닌 새로운 창에서 연결할 페이지를 불러온다.
- _parent : 현재 창보다 상위 프레임에서 연결할 페이지를 불러온다.
- _top : Root 프레임에서 연결할 페이지를 불러온다.
예시)
<!DOCTYPE HTML>
<html>
<head>
<title> Link Tag </title>
<meta charset="UTF-8">
</head>
<body>
<a href="https://hgk5722.tistory.com/332" target="_blank"> HTML 기본구조와 구성요소 </a>
</body>
</html>
결과)
3-3. BookMarker
BookMarker란 링크를 클릭할때 웹페이지 내에서 href가 가리키는 section으로 이동할 수 있는 속성입니다.
웹툰같은 컨텐츠를 볼때 스크롤을 한번에 위로 올려주는 버튼이 있는데 비슷한 기능이라고 생각하면 쉬울것 같습니다.
BookMarker를 사용하기 위해선 <a>태그에 id속성이나 name속성을 추가해 주어야합니다.
링크를 클릭할때 일치하는 name속성값이 있는 section으로 이동할 수 있습니다.
id속성 사용)
<a href="#news">뉴스섹션</a>
<h1 id="news">오늘아침뉴스</h1>
<a href="#넘어갈위치">~</a>
<a id="넘어갈위치">~</a>
원하는 태그안에 id = 'id명'을 입력하고, <a> 태그의 href 주소에 일치하는 #id명을 입력하면 내부링크가 완성됩니다.
id속성을 입력하는 태그에서는 <a>태그를 사용해도 됩니다.
예시)
<!DOCTYPE HTML>
<html>
<head>
<title> Link Tag </title>
<meta charset="UTF-8">
</head>
<body>
<a href="#it">it뉴스섹션 바로가기</a>
<a href="#economy">economy섹션 바로가기</a>
<a href="#morning">아침뉴스센션 바로가기</a>
<br>
<hr>
<h2 id="article">헤드라인기사</h2>
<p> 헤드라인기사입니다. </p> <br>
<hr>
<h2 id="social">사회뉴스</h2>
<p> 사회뉴스코너입니다. </p> <br>
<hr>
<h2 id="economy">경제뉴스</h2>
<p> 경제뉴스코너입니다. </p> <br>
<hr>
<h2 id="it">it뉴스</h2>
<p> it뉴스코너입니다. </p> <br>
<hr>
<h2 id="political">정치뉴스</h2>
<p> 정치뉴스코너입니다. </p> <br>
<hr>
<h2><a id="morning">아침뉴스</a></h2>
<p> 아침뉴스코너입니다. </p> <br>
<hr>
<h2 id="evening">저녁뉴스</h2>
<p> 저녁뉴스코너입니다. </p> <br>
<hr>
</body>
</html>
아침뉴스의 북마커는 if뉴스와 경제뉴스의 북마커와 다르게 <a>태그에서 id속성을 받아줬습니다. 그리고 <a>태그를 <h2>태그가 감싸도록 표현하면 같은 효과를 낼 수 있습니다.
결과)
HTML보기 링크를 누르면 아침뉴스 섹션으로 넘어가게 됩니다.
'[WEB] > [HTML & CSS]' 카테고리의 다른 글
| [HTML & CSS] block & inline (0) | 2022.09.10 |
|---|---|
| [HTML & CSS] HTML 기본태그 4 - <img>, <list>, <table> (0) | 2022.09.09 |
| [HTML & CSS] HTML 기본태그 2 (0) | 2022.09.08 |
| [HTML & CSS] HTML 기본태그 (0) | 2022.09.08 |
| [HTML & CSS] HTML 기본 구조와 구성 요소 (0) | 2022.09.08 |