<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
절대경로 : 특정 소스의 모든 경로를 다 적는방법으로
장점은 어떤 상황에도 파일 경로를 온전히 다 적어
파일 출력시 문제가 생길 여지가 적으나
단점은 입력할 내용이 길면 가독성을 해친다.
-->
<!--
현재 작성 중인 문서의 위치를 기준으로
겹치는 경로까지는 적지 않고
차이가 생기는 경로지점부터 파일명을 적는 방법으로
장점은 적을 내용이 많지 않아서
가독성이 높으나 단점은 파일이 옮겨지거나 하면
상대경로 파일은 링크가 깨지기 쉽습니다.
-->
<img width="400px" height="400px" src="C:/publishing2/07.inage/img/qq.jfif"/>
<!--
01-image.html의 경로
C:/publishing2/07.inage/01-image.html
dog.png의 경로
C:/publishing2/07.inage/img/qq.jfif
두 파일의 경로를 적어놓은 다음, 공통된 부분을 지워줬을 때
공통이 아닌 부분부터가 상대경로입니다.
img/dog.png 만 적어도 어차피 앞쪽 경로가 동일하기 떄문에
c:/부터 경로를 적은 것으로 인식합니다.
아래가 상대경로인 겁니다.
-->
<img src="img/qq.jfif"/>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
<a href="클릭 시 이동주소">보일 문구</a>
형식으로 작성 시 클릭하면 해당 주소로 넘어가는 링크를 만듭니다.
# 클릭 시 이동주소로 주면 현재 페이지로 새로고침 하는 효과가 있습니다.
가고싶은 사이트 3개를 링크로 아래에 만들고 세로로 나열해보겠습니다.
-->
<a href="https://www.naver.com/">네이버로 이동하기</a><br>
<a href="https://www.jandi.com/landing/kr">잔디 바로가기</a><br>
<a href="https://github.com/">깃허브 바로가기</a><br>
<a href="https://velog.io/">벨로그 바로가기</a><br>
</body>
</html>a href 하이퍼링크로 바로가기를 선언할 수 있습니다. 위에 적힌대의 문법을 지키면 쉽게 생성이 가능합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>결과 페이지를 보고 똑같이 만들어주세요.</title>
</head>
<body>
<a href="https://www.naver.com/"><img src="C:/publishing2/07.inage/img/qq.jfif"/>그림을 클릭하면 네이버로</a><br>
<a href="https://www.jandi.com/landing/kr"><img src="C:/publishing2/07.inage/img/aa.jpg">그림을 클릭하면 잔디로</a><br>
</body>
</html>바로가기 문구를 적을 자리에 이미지의 주소를 삽입하는 것으로 바로가기의 이미지를 만들 수 있습니다.
두 사람의 사진을 누르면 네이버와 잔디로 하이퍼링크를 걸 수 있게되었습니다.
배울 게 참 많네요.