하이퍼링크를 삽입하는 것은 대부분 크게 어렵지 않게 사용하시고 계실 것입니다. 그래도 html 태그 활용 중 의외로 중요한 부분이니 간단하게라도 짚고 넘어가도록 하겠습니다.
○ <a>와 href 속성 - 하이퍼링크 생성
하이퍼링크 생성에는 <a> 태그를 사용하게 됩니다. 여기에 href 속성 값으로 링크를 하고자 하는 url을 작성하게 되지요. 태그 사이에는 텍스트를 삽입하거나, <img> 태그 등을 이용해 이미지를 삽입하게 됩니다. 그러면 해당 값을 클릭했을 때 링크를 띄워주게 되는 형태로 작동하게 됩니다.
<a href="주소">텍스트 또는 이미지 url</a>
여기에서 새로운 탭으로 링크를 출력하기 위해서는 target 속성을 사용해야 합니다. 새로운 탭에서 띄울 경우에는 _blank를 사용하게 됩니다. 이를 별도로 지정하지 않게 되면, _self 즉 현재의 창에서 링크를 실행하게 되죠. target 속성은 다음 링크의 페이지에서 좀 더 자세히 살펴보실 수 있습니다.
HTML a target Attribute
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
아래와 같은 형태로 사용해 보도록 하겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="https://nozeroslope.tistory.com/157" target="_blank">목록 생성하기 페이지 링크</a>
<a href="https://nozeroslope.tistory.com/139" target="_blank"><img src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FGMs6v%2FbtrZatiZbAt%2FQzkxKUx2FzGPkuv1HpYeH1%2Fimg.jpg" width="50%"></a>
</body>
</html>
'Programming > HTML+CSS' 카테고리의 다른 글
| 3. 입력 양식 작성(2) - input 태그 1 (0) | 2023.03.06 |
|---|---|
| 3. 입력 양식 작성(1) - 기본 form 태그 (0) | 2023.03.05 |
| 2. 내용 입력하기(5) - 오디오/비디오 삽입 (0) | 2023.03.02 |
| 2. 내용 입력하기(4) - 이미지 삽입 (0) | 2023.03.01 |
| 2. 내용 입력하기(3) - 표 생성하기 3 (0) | 2023.02.27 |
