코드를 작성하다보면 텍스트나 이미지를 클릭했을 때 특정 페이지로 이동해야하는 경우가 발생합니다. html에서는 <a> 태그를 통해 이러한 이벤트를 발생시킬 수 있습니다.
1. 텍스트 링크 만드는 법
링크를 만들 때는 <a> 태그를 사용합니다. <a> 태그는 다음과 같은 형태로 작성하시면 됩니다.
'<a href="이동할 웹사이트 주소"> </a>' 텍스트 링크를 만드실 경우에는 <a> 태그의 여는 태그와 닫는 태그 사이에 텍스트를 입력해주시면 됩니다.
예를 들어, <a href="https://www.daum.net/"> 다음 홈페이지 이동</a>는 '다음 홈페이지 이동'이라는 텍스트를 클릭하면 다음 홈페이지로 이동하는 이벤트를 발생시킵니다.
2. 이미지 링크 만드는 법
링크를 만들 때는 <a> 태그를 사용합니다. <a> 태그는 다음과 같은 형태로 작성하시면 됩니다.
'<a href="이동할 웹사이트 주소"> </a>' 이미지 링크를 만드실 경우에는 <a> 태그의 여는 태그와 닫는 태그 사이에 <img> 태그를 사용해 이미지를 삽입해주시면 됩니다.
예를 들어, <a href="https://www.daum.net/"><img src="daumlogo.png" style="width:100px; height: 50px;"></a>는 이미지를 클릭하면 다음 홈페이지로 이동하는 이벤트를 발생시킵니다.
아래 코드는 텍스트와 이미지를 클릭하면 다음 홈페이지로 이동하는 이벤트를 발생시키는 코드입니다.
<head>
</head>
<body>
<h3> 텍스트 링크</h3>
<a href="https://www.daum.net/"> 다음 홈페이지 이동</a>
<h3> 이미지 링크</h3>
<a href="https://www.daum.net/"><img src="daumlogo.png" style="width:100px; height : 50px;"></a>
</body>
'Programming > HTML5 & CSS3' 카테고리의 다른 글
| [HTML] 클릭 이벤트 발생 시 새 창 띄우기 (0) | 2020.12.17 |
|---|---|
| [HTML] 텍스트, 이미지 클릭 시 alert 창(메시지) 띄우기 (0) | 2020.12.16 |
| [CSS] 외부의 css 파일 적용하는 법 (0) | 2020.12.12 |
| [CSS] html 내부에 css 적용하는 법 (0) | 2020.12.11 |
| [HTML] 표 테두리 스타일 변경하는 법 (0) | 2020.12.10 |
