6) a 태그 ( anchor )
- 페이지간 링크(연결)시 사용됨.
- 인라인 레벨
- 기본적으로 방문전(blue), 방문후(purple), 활성화(red, 마우스로 누르고있을때)
링크 색상이 달라진다. css 로 변경 가능.
- 종류 2가지
<!DOCTYPE html>
<html lang="en">
<head>
<title>외부링크</title>
</head>
<body>
<a href="http://www.google.com">구글</a>
<a href="http://www.daum.net">다음</a>
<br>
<a href="sample01_head_title.html">나의 서버안의 컴포넌트요청</a>
</body>
</html>
가. 내부링크
<a href="target.html#java">target.html 내의 java 로 바로가기</a>
<a href="#java>java 로 바로가기</a>
<a href="#sql>sql 로 바로가기</a>
<a href="#css>css 로 바로가기</a>
(1)
<!DOCTYPE html>
<html lang="en">
<head>
<title>내부링크</title>
</head>
<body>
<a href="#css">css 로 바로가기</a>
<a href="#sql">sql 로 바로가기</a>
<a id="java">여기서부터 JAVA</a>
<p>
JavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJava<br>
JavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJava<br>
JavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJava<br>
.....
</p>
<a id="sql">여기서부터 SQL</a>
<p>
SQLSQLSQLSQLSQLSQLSQLSQLSQLSQLSQLSQLSQLSQLSQLSQLSQLSQLSQLSQLSQLSQLSQLSQLSQLSQLSQLSQLSQL<br>
SQLSQLSQLSQLSQLSQLSQLSQLSQLSQLSQLSQLSQLSQLSQLSQLSQLSQLSQLSQLSQLSQLSQLSQLSQLSQLSQLSQLSQL<br>
SQLSQLSQLSQLSQLSQLSQLSQLSQLSQLSQLSQLSQLSQLSQLSQLSQLSQLSQLSQLSQLSQLSQLSQLSQLSQLSQLSQLSQL<br>
.....
</p>
<a id="css">여기서부터 CSS</a>
<p>
CSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSS<br>
CSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSS<br>
CSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSSCSS<br>
.....
</p>
<a href="#java">java 로 바로가기</a>
</body>
</html>
(2)
<!DOCTYPE html>
<html lang="en">
<head>
<title>내부링크</title>
</head>
<body>
<a href="target.html#css">css 로 바로가기</a>
<a href="target.html#sql">sql 로 바로가기</a>
<a href="target.html#java">java 로 바로가기</a>
</body>
</html>
(2) 의 java 로 바로가기를 클릭하면 (1) 의 id 가 #java 인 값을 찾아서 페이지를 이동하게 된다.
나. 외부링크
문법:
<a href="타켓">링크</a>
ex) <a href="http://www.google.com">구글</a>
<a href="login.html">로그인페이지</a>
- target 속성
==> 링크된 문서를 어디에서 보여줄지를 지정.
target="_self" ==> 기본값
target="_blank" ==> 새로운 창(탭)에 문서를 open
ex) <a href="http://www.google.com" target="_balnk">구글</a>
<!DOCTYPE html>
<html lang="en">
<head>
<title>외부링크</title>
</head>
<body>
<a href="http://www.google.com">구글</a>
<a href="http://www.daum.net">다음</a>
<br>
<a href="sample01_head_title.html">나의 서버안의 컴포넌트요청</a>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>외부링크</title>
</head>
<body>
<a href="http://www.google.com" target="_self">구글</a>
<a href="http://www.daum.net" target="_blank">다음</a>
</body>
</html>
14. 경로 지정 ( * )
1) 개념
외부파일( target.html, external.css, external.js, my.png, my.jpg, ...... ) 을
참조할 때 외부파일의 위치(경로) 를 알려주는 방법을 의미.
2) 경로 지정 방법 2가지
가. 절대 경로
- / 로 시작한다.
기준은 / 이다.
http://127.0.0.1:5500/ 와 동일
ex) http://localhost:5000/sample.html
http://127.0.0.1:5500/app1/sample.html
-> 실행시 http://127.0.0.1:5500 까지 나오므로 / 는 5500/ 까지 이다.
만약 경로를 /app1 로 지정하면 http://127.0.0.1:5500/app1/ 와 동일하다.
나. 상대 경로
- 기준은 현재 페이지이다. 즉 main2.html 의 경로가 기준이다.
ex)
현재 경로: http:127.0.0.1:5500/app2/main2.html
타켓 경로: http://127.0.0.1:5500/app1/sample.html
-` . ` : 현재 디렉토리 ( http://127.0.0.1:5500/app2/ )
` .. ` : 부모 디렉토리 ( http://127.0.0.1:5500/ )
app1의 sample.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
sample.html
<a href="/">절대경로</a>
</body>
</html>
app1의 <external.css>
* {
margin: 0;
padding: 0;
}
/* css 주석문 */
#yyy {
color: blueviolet;
font-size: 30px;
}
app1 의 <external.js>
// external.js
alert("test.js");
app2 의 main.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>절대경로</title>
<!-- 절대경로 -->
<!-- <script src="http://127.0.0.1:5500/app1/test.js"></script> -->
<script src="/app1/test.js"></script>
<!-- <link rel="stylesheet" href="http://127.0.0.1:5500/app1/test.css"> -->
<link rel="stylesheet" href="/app1/test.css">
</head>
<body>
<!-- main.html -> sample.html -->
<h1 id="yyy">1. 절대경로</h1>
<!-- <a href="http://127.0.0.1:5500/app1/sample.html">sampl.html 로 가기(1)</a><br> -->
<a href="/app1/sample.html">sample.html 로 가기(2)</a>
</body>
</html>
app2/main.html 에서 app1 의 html 과 css, js 를 사용하기 위해서 절대경로로 찾는 코드이다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>상대경로</title>
<script src="../app1/test.js"></script>
<link rel="stylesheet" href="../app1/test.css">
</head>
<body>
<!-- main.html -> sample.html -->
<h1 id="yyy">2. 상대경로</h1>
<!-- http://127.0.0.1:5500/app2/ -->
<a href=".">현재디렉토리로 가기</a><br>
<!-- http://127.0.0.1:5500/ -->
<a href="..">부모디렉토리로 가기</a><br>
<!-- http://127.0.0.1:5500/app1/sample.html -->
<a href="../app1/sample.html">sample.html로 가기</a>
</body>
</html>
상대경로로 찾는 코드이다.
'Programming > HTML & CSS & JavaScript' 카테고리의 다른 글
HTML 2일차 - table, list, span (0) | 2024.04.22 |
---|---|
HTML 2일차 - 1일차 요점 (0) | 2024.04.22 |
HTML 1일차 - header, p, br, hr, 텍스트포멧 (0) | 2024.04.18 |
HTML 1일차 - title, style, script (1) | 2024.04.18 |
Google Api -Youtube data Api v3 (0) | 2023.12.26 |