HTML _Image & Hyperlink

Frontend

HTML _Image & Hyperlink

AIHYEONJI 2025. 4. 1. 17:51

1. Image tag

아래 코드에서 사용된 이미지는 IconFinder에서 다운로드 하였다.

https://www.iconfinder.com/ -> hero 이미지 다운로드 함.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>이미지 태그</title>
  </head>
  <body>
    <!-- iconfinder -->
    <!-- <img src="파일경로" alt="이미지 설명? 이름?"> -->
    <!-- <img src="C:\Visual_Studio_Code\HTML\hero1.png" alt="영웅 이미지1" /> -->
    <!-- 단 가상실행 시에는 이미지가 보이지 않음
    왜? 해당 이미지의 소스는 내 노트북 내에 위치해있지, 서버안에 위치해있지 않기 때문에! -->

    <!-- 절대 경로 -->
    <img src="https://www.tcpschool.com/img/logo.png" alt="TCP스쿨 로고" />

    <hr />
    <!-- 상대 경로 -->
    <!-- 같은 폴더 안에 있으면 ./ 눌러서  -->
    <img src="hero2.png" alt="영웅 이미지" />
    <!-- 같은 폴더 안에 없으면 ./images 눌러서 해당 이미지 선택  -->
    <img src="./images/hero3.png" alt="영웅 이미지" />
  </body>
</html>

<!-- 속성 : 태그에 추가적인 정보를 제공하여 요소의 동작이나 표현방식을 제어하는 역할
            주로, 이름 = "값" 으로 표현된다. 띄어쓰기 때문에 큰따옴표 표시 꼭 해주기 -->

1.1 가상웹 실행 시 보이는 화면

2. Hyperlink tag

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>하이퍼링크</title>
  </head>
  <body>
    <!-- 절대 경로 -->
    <a href="https://www.naver.com">naver</a>
    <hr />
    <a href="https://www.tcpschool.com"
      ><img src="https://www.tcpschool.com/img/logo.png" alt="TCP스쿨 로고"
    /></a>
    <hr />

    <!-- 상대 경로 -->
    <a href="./test1.html">테스트1</a>
    <a href="./pages/test2.html">테스트2</a>
  </body>
</html>

2.1 가상웹 실행 시 보이는 화면