웹사이트를 만들 때에, 다른 페이지로 링킹하는 작업도 분명히 필요하다.
다른 페이지로 링킹하기 위해서는 간단히 <a> 태그를 사용해 주면 된다.
(a = anchor element)
바로 코드 작성 후 실습하여 보자.
<html>
<head>
<title>Search</title>
</head>
<body>
<h1>Search Engines</h1>
<ul>
<li><a href="https://www.google.com/">Google</a></li>
<li><a href="http://www.baidu.com/">Baidu</a></li>
<li><a href="https://www.yahoo.com/">Yahoo</a></li>
<li><a href="https://duckduckgo.com/">DuckDuckGo</a></li>
</ul>
</body>
</html>
실행하자!
저 파랑색 글자를 클릭하면 바로 구글, 바이두, 야후, 덕덕고 페이지로 이동하는 것이다.
그런데 저게 내 탭에서 바로 변하니 불편하지 않을 수가 없다.
다른 탭에서 열리게 할 수는 없을까?
_blank를 사용하여 간단히 바꾸어 보자.
<html>
<head>
<title>Search</title>
</head>
<body>
<h1>Search Engines</h1>
<ul>
<li><a href="https://www.google.com/" target="_blank">Google</a></li>
<li><a href="http://www.baidu.com/" target="_blank">Baidu</a></li>
<li><a href="https://www.yahoo.com/" target="_blank">Yahoo</a></li>
<li><a href="https://duckduckgo.com/" target="_blank">DuckDuckGo</a></li>
</ul>
</body>
</html>바로 실행!
이제 다른 탭에서 페이지가 열리니 편안하다.
이렇게 파일 간 이동(index.html에서 links.html로 이동하는 식으로)도 가능하다.
또한 저 파랑색 디자인이 맘에 안든다면 나중에 css를 통해 디자인을 바꾸는 것도 가능하다.
a href 뒤에 링크를 써서 이동, target="_blank"를 붙여 다른 탭에서 열기!
'웹개발 > HTML Tags' 카테고리의 다른 글
| [Html Tags] 이미지 추가하기 | <img> (0) | 2021.01.30 |
|---|---|
| [Html Tags] 리스트 정렬하기 | <ul>, <li>, <ol> (0) | 2021.01.30 |
| [Html Tags] 글자에 기울임 효과 주기 | <em> (0) | 2021.01.30 |
| [Html Tags] 문단 쓰기 | <p> (0) | 2021.01.30 |