JunO3O
기본 태그
기본 태그
2023. 3. 21. 03:00ㆍHTML
자주 사용하는 태그들
# 앵커 태그 <a>
ㅁ HTML에서 가장 중요한 글자는 H를 의미하는 하이퍼텍스트입니다. 하이퍼텍스트는 사용자의 선택에 따라 관련된 특정 정보로 이동할 수 있도록 조직된 문서를 의미합니다. HTML 페이지가 조직화된 문서 형태가 될 수 있는 이유는 <a> 태그 덕분입니다.
ㅁ a 태그는 anchor를 의미하며, 다른 웹 페이지나 웹 페이지 내부의 특정 위치로 이동할 때 사용합니다.
ㅁ a 태그만 사용해서는 어떤 웹 페이지로 이동할지 웹 브라우저에 알려줄 수 없기 때문에 href 속성을 같이 사용합니다.
ㅁ href 속성은 hyper reference를 의미하고, href 속성은 웹 페이지나 파일의 위치를 나타내는 경로를 입력합니다.
┌ 경로를 입력하기 위해 href 속성을 사용
<a href="http://www.naver.com"> 네이버 </a>
ㄴ 이동할 경로를 지정# 하이퍼링크 설정
ㅁ a 태그를 사용해 특정 웹 페이지나 웹 페이지 내부의 특정 위치로 이동하는 링크를 생성할 수 있습니다.
1. 특정 웹 페이지에 연결하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 하이퍼링크 설정 </title>
</head>
<body>
<a href="http://www.naver.com"> 네이버 </a> <br>
<a href="http://www.google.com"> 구글 </a> <br>
<a href="http://www.daum.net"> 다음 </a> <br>
</body>
</html>
2. 웹 페이지 내부에 연결하기
ㅁ 웹 페이지 내부의 특정 태그로 이동하려면 id 속성을 추가로 사용해야 합니다. h1 태그에 id 속성을 입력하고 a 태그의 href 속성에 '#id 속성' 형태의 문자열을 입력합니다. 파일을 실행해서 Alpha 부분 링크를 클릭하면 해당 내용으로 이동합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 웹 페이지 내부에 연결하기</title>
</head>
<body> <!-- 이동하려는 태그의 id 속성을 href 속성에 '#id 속성' 형태로 입력합니다.-->
<a href="#alpha"> Alpha 부분 </a>
<a href="#beta"> Beta 부분 </a>
<a href="#gamma"> Gamma 부분 </a>
<hr>
<h1 id="alpha"> Alpha </h1>
<p> alpha에 관한 문단입니다. </p>
<h1 id="beta"> Beta </h1>
<p> beta에 관한 문단입니다. </p>
<h1 id="gamma"> Gamma </h1>
<p> gamma에 관한 문단입니다. </p>
</body>
</html>
# 글자 모양 태그
ㅁ HTML5는 글자 모양 태그를 사용해 웹 페이지의 글자에 행태와 의미를 부여할 수 있습니다.
ㅁ 글자 모양 태그는 단독으로 사용하거나 제목 글자와 본문 글자 태그 내부에 입력 또는 다른 글자 모양 태그도 넣을 수 있습니다. 하지만 글자 모양 태그 내부에 제목 글자와 본문 글자 태그는 넣을 수 없습니다.
| 태그 | 설명 |
| b | 굵은 글자(bold) |
| i | 기울어진 글자(italic) |
| small | 작은 글자(small) |
| sub | 아래 첨자(subscript) |
| sup | 위 첨자(superscript) |
| ins | 밑줄 글자(insert) |
| del | 취소선이 그어진 글자(delete) |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 글자 모양 태그 </title>
</head>
<body>
<h1><b> b 태그는 굵은 글자를 만들 때 사용합니다. </b></h1>
<h1><i> i 태그는 기울어진 글자를 만들 때 사용합니다. </i></h1>
<h1><small> small 태그는 작은 글자를 만들 때 사용합니다. </small></h1>
<h1><sub> sub 태그는 아래 첨자를 만들 때 사용합니다. </sub></h1>
<h1><sup> sup 태그는 위 첨자를 만들 때 사용합니다. </sup></h1>
<h1><ins> ins 태그는 밑줄 글자를 만들 때 사용합니다. </ins></h1>
<h1><del> del 태그는 취소선이 그어진 글자를 만들 때 사용합니다. </del></h1>
</body>
</html>
