반응형
오늘은 홈페이지에서 버튼을 누르면 다른페이지로 넘어가는 하이퍼링크를 실습 해보았다.
앞서 <a> 태그를 사용하여 href 속성에 url을 입력하는 것은 동일하다.
해당 하이퍼링크에 이동시킬 페이지의 .html 파일을 입력하는 것이 핵심이다.
텍스트에 <a>태그로 링크를 걸어준뒤 href에 이동시키고싶은 html 파일을 삽입하면
해당 페이지로 이동한다.
target 속성을 이용하면 페이지를 새로 만들어서 열기가 가능하고,
생략한다면, 기존페이지에서 링크클릭시 페이지가 이동된다.
<body>
<!-- logo영역 -->
<div class="logo">
<h1>
<a href="./index.html"><img src="./images/html5.png" alt="html5 로고" title="index 페이지로 이동"></a>
</h1>
</div>
<!--//logo 영역 -->
<!-- list 영역 -->
<div class="list">
<h2>HTML5</h2>
<ul>
<li><a href="./index.html" target="blank" title="html5 페이지로 이동">HTML5</a></li>
<li><a href="./css3.html" target="blank" title="css3 페이지로 이동">CSS3</a></li>
<li><a href="./javascript.html" target="blank" title="javascript 페이지로 이동">javascript</a></li>
</ul>
</div>
<!--//list 영역 -->
</body>결과
반응형
'web > HTML&CSS' 카테고리의 다른 글
| [html]meta 태그 (0) | 2021.11.09 |
|---|---|
| [HTML/CSS]:hover로 transition 효과주기 (0) | 2020.04.01 |
| HTML에 구글 웹 폰트/웹 아이콘 사용하기. (0) | 2020.03.27 |
| [CSS]transform(3D변형)효과 주기 (0) | 2020.03.27 |
| HTML5의 시멘틱태그, 그 외 태그들 (0) | 2020.03.26 |
댓글