[HTML 시리즈 5] 링크(<a>)와 이미지(<img>) 삽입하기

이전 시간까지는 글과 제목으로 페이지를 구성했죠.
이제 웹페이지의 생명을 불어넣는 링크와 이미지를 다뤄볼 차례입니다.

링크는 다른 페이지로 이동하는 길,
이미지는 시각적 정보의 핵심이에요.
이 두 가지가 합쳐져야 비로소 “진짜 웹페이지”가 됩니다.

[HTML 시리즈 4] <h1>부터 <p>까지 — 텍스트를 구성하는 방법

웹페이지는 결국 ‘정보를 전달하는 공간’입니다.그리고 그 정보의 대부분은 "텍스트(문자)"로 구성되어 있죠.오늘은 HTML에서 글자를 표현하고 구조를 잡는 가장 기본적인 방법,즉 "제목(heading)

ilsandaddy.tistory.com

[HTML 시리즈 3] 태그(Tag)의 개념과 구조 이해하기

이전 시간에 우리는 VS Code로 첫 웹페이지를 만들어봤죠.이제 본격적으로 HTML의 핵심 개념인 “태그(Tag)”를 배워봅시다.태그는 HTML의 모든 것을 이루는 기본 단위이자,“웹페이지의 언어”라고

ilsandaddy.tistory.com

1. 하이퍼링크(Hyperlink)란?

웹의 ‘웹(WWW, World Wide Web)’이라는 이름처럼
인터넷은 링크로 서로 연결된 거대한 거미줄이에요.

HTML에서는 <a> 태그를 사용해 하이퍼링크를 만듭니다.
a는 "anchor(닻)"의 약자예요.
즉, 클릭할 수 있는 연결점을 만드는 거죠.

2. 기본 문법

<a> : 링크를 만드는 태그
href : “hyper reference”의 약자. 이동할 주소(URL)를 의미
</a> : 닫는 태그

위 코드를 실행하면 **“네이버로 이동”**이라는 파란 글자가 나타나고,
클릭 시 네이버로 이동합니다.

팁:
기본적으로 <a> 태그는 클릭 시 현재 창에서 페이지를 엽니다.
새 창에서 열고 싶다면 속성을 하나 더 추가하세요 👇

target="_blank" : 새 탭에서 링크 열기

3. 링크 안에 다른 요소를 넣을 수도 있다

링크는 단순히 글자만 연결할 필요가 없어요.
이미지, 문단, 버튼 모양 등을 감싸서 클릭 가능하게 만들 수도 있습니다.

예를 들어, 이미지를 클릭하면 특정 사이트로 이동하게 만들 수 있죠.

이 코드는 “한성대학교 로고 이미지”를 클릭하면
새 탭에서 학교 홈페이지로 이동합니다.

4. 이미지 삽입하기 — <img> 태그

이미지를 삽입할 때는 <img> 태그를 사용합니다.
이 태그는 닫는 태그가 없습니다.

src	이미지 파일 경로 (source)
alt	이미지가 표시되지 않을 때 대체로 보여줄 텍스트
width, height	이미지 크기 지정 (단위 없이 숫자만 입력하면 px 기준)

예시:

위처럼 width와 height를 설정하면
브라우저가 이미지 크기를 조절해줍니다.

5. 파일 경로의 개념 이해하기

HTML에서 이미지를 불러올 때는 *경로(path)*를 올바르게 지정해야 합니다.

상대 경로	src="images/dog.jpg"	HTML 파일이 있는 폴더 기준으로 찾기
절대 경로	src="C:/Users/Pictures/dog.jpg"	내 컴퓨터의 전체 주소를 지정
웹 경로(URL)	src="https://example.com/dog.jpg"	인터넷 상의 이미지 주소 사용

추천:
보통은 HTML 파일과 같은 폴더 안에 images 폴더를 만들고
그 안에 이미지를 넣은 뒤,
src="images/파일이름.jpg" 로 불러오는 게 가장 깔끔합니다.

6. 링크 + 이미지 조합 예제

이제 배운 내용을 함께 사용해볼까요?
아래 코드를 따라 입력해 보세요.

<!doctype html>

<html>

<head>

</head>

<p>아래 이미지를 클릭하면 네이버로 이동합니다.</p>

</body>

</html>

결과 화면

“링크와 이미지 삽입하기” 제목 아래에
네이버 이미지가 표시되고,
클릭하면 새 탭에서 네이버가 열립니다.
아래에는 구글로 연결되는 텍스트 링크가 있습니다.

7. HTML 속성(attribute) 다시 복습

지금까지 링크와 이미지를 통해 다양한 **속성(attribute)**을 써봤죠.

href	<a>	연결할 주소 지정
target	<a>	링크 열리는 위치 설정
src	<img>	이미지 경로 지정
alt	<img>	이미지가 안 보일 때 대체 설명
width, height	<img>	이미지 크기 조정

이 속성들을 정확히 이해하면
웹페이지를 자유롭게 디자인할 수 있습니다.

8. 마무리 — 드디어 “보이는 웹”의 시작!

오늘 배운 <a>와 <img>는 HTML에서 가장 실용적인 태그입니다.
이제 여러분은 단순한 글뿐만 아니라
클릭 가능한 링크와 시각적인 이미지 요소를 다룰 수 있습니다.

즉, “텍스트 중심의 페이지”에서
“정보와 디자인이 결합된 웹페이지”로 한 단계 성장한 거예요.

다음 시간에는

[HTML 시리즈 6] 목록(<ul>, <ol>, <li>)으로 콘텐츠 정리하기
를 배워볼 거예요.
리스트 형태의 콘텐츠는 메뉴, 후기, 일정, 쇼핑몰 등
웹의 거의 모든 구조에 쓰이는 필수 기술입니다.

[HTML 시리즈 2] VS Code 설치부터 첫 웹페이지 만들기

이전 시간에는 HTML이 무엇인지, 그리고 웹페이지가 어떻게 만들어지는지 배웠습니다.이번에는 실제로 코드를 작성할 수 있는 환경을 준비하고,나만의 첫 웹페이지를 완성해 보겠습니다.컴퓨터

ilsandaddy.tistory.com

[HTML 시리즈 1] HTML이란? 웹페이지의 뼈대를 만드는 언어

혹시 인터넷에서 보는 모든 웹사이트가 어떻게 만들어지는지 궁금했던 적 있나요?네이버, 구글, 유튜브, 그리고 여러분의 카페 페이지까지 —이 모든 사이트의 시작은 바로 HTML이라는 언어입니

ilsandaddy.tistory.com

저작자표시 비영리 (새창열림)

'CODING' 카테고리의 다른 글

[HTML 시리즈 7] 표(<table>) 만들기 완전정복 (0)	2025.10.18
[HTML 시리즈 6] 목록(<ul>, <ol>, <li>)으로 콘텐츠 정리하기 (0)	2025.10.18
[HTML 시리즈 4] <h1>부터 <p>까지 — 텍스트를 구성하는 방법 (0)	2025.10.18
[HTML 시리즈 3] 태그(Tag)의 개념과 구조 이해하기 (0)	2025.10.18
[HTML 시리즈 2] VS Code 설치부터 첫 웹페이지 만들기 (0)	2025.10.18

빅뉴스