안녕핫에요
오늘은 링크를 삽입하는 방법에 대해서 알아봅시다
링크는 거의 모든 웹 페이지에서 사용되는 기능입니다
이 링크를 html로 삽입하는 방법을 알아봅시다.
링크 삽입하기
<!DOCTYPE html>
<html>
<head>
<title>TMP</title>
</head>
<body>
<h1>링크 삽입하기</h1>
<a href="URL">URL</a>
</body>
</html>위와 같이 코드를 작성하고 실행해봅시다.
그러면 위 사진처럼 웹 페이지에 링크가 표시됩니다
URL 링크를 한 번 눌러봅시다.
<!DOCTYPE html>
<html>
<head>
<title>TMP</title>
</head>
<body>
<h1>링크 삽입하기</h1>
<a href="https://www.naver.com/">Naver</a>
</body>
</html>이번에는 위처럼 코드를 작성하고 실행해봅시다.
a태그에 href라는 속성을 넣어주고 속성값으로 이동하고자 하는 페이지의 주소를 넣어줍니다.
그러면 이렇게 나올텐데 링크를 누르면 이번에는 네이버로 잘 이동할 수 있게 됐습니다.
<!DOCTYPE html>
<html>
<head>
<title>TMP</title>
</head>
<body>
<h1>링크 삽입하기</h1>
<a href="images/example.html" target="_blank">URL</a>
</body>
</html>만약에 코드를 위의 코드처럼 속성값을 로컬 파일 경로로 해놓게 되면 해당 로컬 파일로 이동이 가능해집니다
그러니까 위의 코드가 적혀있는 html 파일, 즉 index.html 파일이 위치한 디렉토리 폴더 내의 images 라는 폴더 안에 존재하는 example.html 파일로 이동하게 된다는 것이지요
쉽게 말해서 index.html에서 url이라는 링크를 누르면 images 폴더 내의 example.html로 이동이 된다는 말입니다.
Target 속성
a 태그의 속성 중 하나로 target이라는 것이 있습니다.
이 속성의 속성값은 blank, self, parent, top 이렇게 4가지가 있습니다.
1. _blank
<!DOCTYPE html>
<html>
<head>
<title>TMP</title>
</head>
<body>
<h1>링크 삽입하기</h1>
<a href="https://www.naver.com/" target="_blank">URL</a>
</body>
</html>위처럼 코드를 작성하고 실행해봅시다
실행 한 후에 URL 링크를 클릭하시면 네이버로 이동이 됩니다.
2. _self
<!DOCTYPE html>
<html>
<head>
<title>TMP</title>
</head>
<body>
<h1>링크 삽입하기</h1>
<a href="https://www.naver.com/" target="_self">URL</a>
</body>
</html>이 _self 속성값은 새 창에서 링크가 열리는 것이 아니라 현재 창에서 링크를 열게 됩니다.
3. _parent
<!DOCTYPE html>
<html>
<head>
<title>TMP</title>
</head>
<body>
<h1>링크 삽입하기</h1>
<a href="https://www.naver.com/" target="_parent">URL</a>
</body>
</html>_parent는 _self처럼 현재 창에서 링크가 열립니다.
하지만 여기에 차이가 하나 있는데 parent는 해당 링크의 이전 페이지에서 링크가 열립니다.
말이 좀 이상한데 예를 들어보자면 우리가 네이버에 들어갔다고 해봅시다.
네이버에 이동했다가 메일이 와서 메일함으로 이동을 했어요.
그러고 메일함에 있는 _parent 속성값이 있는 링크를 클릭합니다.
그러면 그 링크는 메일함이 아닌 네이버에서 열린 것이지요.
만약 이동한 링크에서 뒤로가기 버튼을 누른다면 메일함이 아닌 네이버로 이동하게 됩니다.
4. _top
<!DOCTYPE html>
<html>
<head>
<title>TMP</title>
</head>
<body>
<h1>링크 삽입하기</h1>
<a href="https://www.naver.com/" target="_top">URL</a>
</body>
</html>_top는 현재 페이지를 전부 무시하고 브라우저 전체에서 링크 페이지를 여는 방식입니다.
'Programming > HTML, CSS' 카테고리의 다른 글
| [HTML/CSS] #8 이미지에 링크 삽입하기 (0) | 2022.01.10 |
|---|---|
| [HTML/CSS] #7 이미지 삽입하기, 비율 조정, alt (0) | 2022.01.04 |
| [HTML/CSS] #5. 주석 작성하기 (0) | 2021.12.20 |
| [HTML/CSS] #4. 글자 서식 태그 (0) | 2021.12.20 |
| [HTML/CSS] #3. h1 ~ h6, p, br 태그 (0) | 2021.12.20 |
| [HTML/CSS] #2. html의 구조, title, h1, p (0) | 2021.12.20 |
댓글