728x90
앵커태그(Anchor Tag)
앵커태그란 서로 다른 웹페이지 사이를 이동하거나 웹 페이지 내부에서 특정한 위치로 이동할 때 주로 사용되는 태그이다. 태그명(Tag Name)은 a로 표기되며 앵커태그라고 불린다. 여기서 a만 삽입한다고해서 앵커태그의 기능이 발효되는 것은 아니다. 여기서 웹(Web)상 작동이 가능하게 하려면 href라는 속성을 사용하여 이동하고자 하는 웹 페이지를 별도로 지정해주어야 정상적으로 작동하게된다. 따라서 예를들어보자면 아래와같이 예시작을 들어볼 수 있다. 이렇게 코드를 실행한 후 a 태그를 클릭하게되면 지정한 웹 페이지로 이동하게 되는 원리이다. 하지만 웹 표준을 지키면서 이동하지 않는 a 태그를 새로 만들때에는 href속성에 #를 입력해주어야하고 예시는 아래와 동등하다.
<!doctype html>
<html>
<head>
<title>HTML BASIC</title>
</head>
<body>
<a href="http://danieljbyun.com">daniel</a><br />
<a href="http://kidslime0202.tistory.com">blog</a><br />
</body>
</html>
<li><a href="#">포트폴리오</a></li>
<li><a href="#">2D작업</a></li>
<li><a href="#">3D작업</a></li>
<li><a href="#">영상작업</a></li>
</ul>
</div>
<body>
<a href="#Login">Move to Login</a>
Move to Login
<a href="#Logout">Move to Logout</a>
<a href="#Source">Move to Source</a>
<a href="#Info">Move to Info</a>
<hr />
<h1 id="login">Login</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<h1 id="logout">Logout</h1>
<p>Duis nec risus a ante pellentesque.</p>
<h1 id="source">Source</h1>
<nullam prota, felis sit amet porttitor vestibulum.</p>
</body>
예를들어 페이지 내부에서 이동한다는 원리는 아래와 같이 짜여질수 있다. 이러한 방식은 기본적으로 일반 웹사이트에서 많이 사용되어지고 있다. 특히, 아래에 id속성이 중복이되면 먼저 나오는 태그로 이동하게되는 형식이다. 이에 따라서 또 개발을 하는데 꼭 필요한 부분은 글자형태태그를 사용하여 글자에 형태와 의미를 부여할 수 있다는 부분이다. 일단 먼저 설명하기에 앞서 여럿 태그가 있어 정리를 해보려한다.
b/ 굵은글자태그, i/ 기울어진 글자태그, small/ 작은글자태그, sub/ 아래에 달라붙는 태그, sup/ 위에 달라붙는태그, ins/ 밑줄 글자태그, del/ 가운데 줄이 그어진 글자태그가 있다.
<body>
<h1><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b></h1>
<h1><i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</i></h1>
<h1><small>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</small></h1>
<h1><sub>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sub></h1>
<h1><sup>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sup></h1>
<h1><ins>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</ins></h1>
<h1><del>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</del></h1>
<hr />
루비문자(Ruby Text)
루비문자는 일본어에서 자주 사용되는 문자라고 한다. 태그는 총 3가지로 나뉘어지며, 아래와같이 정리해볼 수 있다.
Ruby -> 루비문자선언태그
rt -> 위에 위치하는 작은 문자태그
rp -> ruby태그를 지원할 경우 출력되지않는 태그
하므로 Ruby태그를 사용할 때는 rt를 같이 사용하게된다.
<body>
<ruby>
<span>大韓民國</span>
<rt>대한민국</rt>
</ruby>
</body>
<body>
<ruby>
<span>大韓民國</span>
<rp>(</rp>
<rt>대한민국</rt>
</ruby>
</body>
목록 태그(Content Tag) ol l ul
기본적인 목록을 만들 때에는 목록 태그를 사용한다.
ul -> 순서가 없는 목록태그 (Unordered List)
ol -> 순서가 있는 목록태그 (Ordered List)
li -> 목록 요소 (List Item)
[기본목록]
<body>
<h1>ol tag</h1>
<ol>
<li>Facebook</li>
<li>Twitter</li>
<li>Linkk In</li>
</ol>
<h1>ul tag</h1>
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li>Linkk In</li>
</ul>
</body>
Ol tag
1. Facebook
2. Twitter
3. Linked In
Ul tag
· Linked In
정의목록 태그
<dl> 정의목록태그 Definition List
<dt> 정의용어태그 Definition Term
<dd> 정의설명태그 Definition Description
<body>
<dl>
<dt>HTML5</dt>
<dd>A Tag</dd>
<dd>B Tag</dd>
<dd>C Tag</dd>
<dl>
<dt>Juice</dt>
<dd>Modeling</dd>
<dd>Animation</dd>
</dl>
</body>
'IT_웹개발언어 > IT·HTML' 카테고리의 다른 글
| [IT·HTML+CSS] HTML에 필요한 기본적인 응용태그 정리9(4) (0) | 2021.07.07 |
|---|---|
| [IT·HTML+CSS] HTML에 필요한 기본적인 태그 의미와 사용법(3) (0) | 2021.07.04 |
| [IT·HTML+CSS] HTML5페이지 구조와 LANG 언어 속성/ 속성값 + 글자태그(1) (0) | 2021.07.01 |
| [IT·HTML+CSS] 웹의 역사:: 월드와이드웹(World Wide Web)을 자세히 파헤쳐보다. (0) | 2021.07.01 |
| [IT·HTML+CSS] HTML5 기본적인 태그(Tag) 입문과 속성 (0) | 2021.07.01 |