본문 바로가기
Programming/HTML & CSS & JavaScript

HTML 1일차 - a, 링크, 경로

by yoon9i 2024. 4. 18.

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>

 

여기서부터 java</a id="java">

(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

관련글

티스토리툴바