본문으로 건너뛰기
웹 개발 기초집LESSON 05

링크·이미지·파일 경로

난이도입문
예상 시간25분
선수지식이전 강의

5강. 링크·이미지·파일 경로

이번 강의의 결과물은 페이지 내부 영역, 다른 HTML 문서, GitHub 주소로 이동할 수 있고 프로필 이미지를 올바른 경로와 대체 텍스트로 표시하는 포트폴리오입니다.

1. 이번 강의에서 해결할 문제​

4강의 메뉴에는 href="#about" 같은 코드가 있었지만 브라우저가 목적지를 찾는 원리는 아직 다루지 않았습니다. 이미지도 파일이 존재하는 것만으로는 페이지에 나타나지 않습니다.

이번 강의에서는 HTML 문서가 다른 위치를 가리키는 방법을 배우고, 링크가 이동할 목적지와 이미지 파일의 경로를 정확히 작성합니다.

학습 목표​

  • 이번 강의에서는 HTML 문서가 다른 위치를 가리키는 방법을 배우고, 링크가 이동할 목적지와 이미지 파일의 경로를 정확히 작성합니다.
  • 핵심 개념을 코드 예시와 짧은 실습에 적용하고 결과를 설명합니다.

2. 핵심 개념​

링크​

a 요소에 href 속성이 있으면 사용자가 이동할 수 있는 하이퍼링크가 됩니다.

<a href="about.html">자세한 소개</a>
  • a: 링크 요소
  • href: 이동할 목적지 주소
  • 요소 안의 텍스트: 사용자에게 보이는 링크 이름

링크 이름은 여기를 클릭보다 자세한 소개 보기, GitHub 프로젝트 보기처럼 목적지를 설명해야 합니다. a와 href의 표준 동작은 WHATWG a 요소 표준에서 확인할 수 있습니다.

네 가지 경로 형태​

현재 문서의 주소가 http://localhost:5500/index.html이라고 가정합니다.

코드의미
href="#projects"현재 문서에서 id="projects"인 위치로 이동
href="about.html"현재 문서와 같은 폴더의 about.html로 이동
src="assets/images/profile.jpg"현재 폴더 아래의 이미지 파일 요청
href="https://github.com/baggu4402"완전한 URL로 외부 사이트 이동

about.html이나 assets/images/profile.jpg처럼 현재 문서 위치를 기준으로 계산하는 주소를 상대 경로라고 합니다. https://부터 목적지를 모두 적은 주소는 절대 URL입니다.

웹 URL의 폴더 구분에는 Windows의 역슬래시(\)가 아니라 슬래시(/)를 사용합니다.

이미지와 대체 텍스트​

<img
  src="assets/images/profile.jpg"
  alt="노트북으로 게임과 웹 개발을 공부하는 모습"
  width="480"
  height="480"
>
  • src: 브라우저가 요청할 이미지 주소
  • alt: 이미지를 볼 수 없을 때 전달할 대체 정보
  • width, height: 이미지가 차지할 기본 크기와 비율을 브라우저에 알림

alt는 파일 이름이나 단순한 외형보다 현재 페이지에서 이미지가 전달하는 의미를 짧게 설명합니다. 장식만을 위한 이미지는 속성을 생략하지 않고 alt=""로 표시합니다. 이미지 목적에 따른 기준은 W3C WAI 이미지 안내에서 확인할 수 있습니다.

3. 코드 예시​

파일 구조:

D:\WebProject\StartBook\dev-foundations\web-basics\portfolio\
├─ index.html
├─ about.html
└─ assets\
   └─ images\
      └─ profile.jpg

profile.jpg는 자신이 촬영하거나 사용 권한이 있는 이미지로 준비합니다. 실제 파일명이 다르면 코드의 src도 같은 이름으로 바꿔야 합니다.

파일명: index.html

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>나의 개발 포트폴리오</title>
  </head>
  <body>
    <header>
      <h1>게임과 웹을 공부하는 개발자</h1>

      <nav aria-label="주요 메뉴">
        <ul>
          <li><a href="#about">소개</a></li>
          <li><a href="#projects">프로젝트</a></li>
          <li><a href="about.html">자세한 소개</a></li>
        </ul>
      </nav>
    </header>

    <main>
      <section id="about">
        <h2>소개</h2>
        <img
          src="assets/images/profile.jpg"
          alt="노트북으로 게임과 웹 개발을 공부하는 모습"
          width="480"
          height="480"
        >
        <p>AI정보공학을 전공하며 게임과 웹 서비스를 공부하고 있습니다.</p>
        <p><a href="about.html">학습 과정 자세히 보기</a></p>
      </section>

      <section id="projects">
        <h2>프로젝트</h2>

        <article>
          <h3>게임플레이 기능 프로젝트</h3>
          <p>Unreal C++로 플레이어 상호작용 기능을 구현합니다.</p>
          <p><a href="https://github.com/baggu4402">GitHub 프로젝트 보기</a></p>
        </article>

        <article>
          <h3>반응형 포트폴리오</h3>
          <p>HTML, CSS, JavaScript로 여러 화면 크기에 대응합니다.</p>
        </article>
      </section>
    </main>

    <footer>
      <p><a href="#about">페이지 위쪽 소개로 이동</a></p>
    </footer>
  </body>
</html>

파일명: about.html

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>자세한 소개 | 나의 개발 포트폴리오</title>
  </head>
  <body>
    <header>
      <h1>자세한 소개</h1>
    </header>

    <main>
      <p>게임 개발과 웹 개발의 공통 기반인 상태, 이벤트, 데이터 흐름을 공부하고 있습니다.</p>
      <p><a href="index.html">포트폴리오 홈으로 돌아가기</a></p>
    </main>
  </body>
</html>

실행 위치:

D:\WebProject\StartBook\dev-foundations\web-basics\portfolio

PowerShell 실행 명령:

cd D:\WebProject\StartBook\dev-foundations\web-basics\portfolio
python -m http.server 5500

브라우저 주소:

http://localhost:5500/

4. 코드가 동작하는 이유​

  1. href="#about"은 현재 URL에 #about 조각을 붙이고, 브라우저가 같은 문서의 id="about" 요소로 이동하게 합니다.
  2. href="about.html"은 현재 문서와 같은 폴더에서 about.html을 요청합니다.
  3. about.html의 href="index.html"도 같은 원리로 첫 페이지를 다시 요청합니다.
  4. 완전한 https:// 주소는 현재 서버가 아니라 지정된 외부 서버로 이동합니다.
  5. img 요소를 만나면 브라우저는 HTML과 별도로 assets/images/profile.jpg를 요청하고 응답받은 이미지를 표시합니다.
  6. 이미지가 로드되지 않거나 화면 낭독기를 사용하는 경우 alt가 이미지의 목적을 텍스트로 전달합니다.

이미지는 HTML 파일 안에 직접 들어 있는 것이 아닙니다. HTML이 이미지 URL을 가리키면 브라우저가 그 URL로 별도의 요청을 보냅니다. 그래서 Network 탭에는 index.html과 profile.jpg가 각각 다른 요청으로 나타납니다.

5. 자주 하는 실수​

  • 로컬 절대 경로를 사용함: src="C:\Users\...\profile.jpg"는 다른 컴퓨터와 배포 서버에서 동작하지 않습니다.
  • URL에 역슬래시를 사용함: assets\images\profile.jpg가 아니라 assets/images/profile.jpg로 작성합니다.
  • 대소문자를 다르게 작성함: Windows에서는 우연히 동작해도 대소문자를 구분하는 배포 서버에서는 실패할 수 있습니다.
  • HTML과 이미지의 상대 위치를 잘못 계산함: 상대 경로는 저장소 루트가 아니라 현재 HTML 문서의 URL을 기준으로 계산합니다.
  • alt를 생략함: 정보 이미지에는 목적에 맞는 대체 텍스트를 제공하고, 장식 이미지는 alt=""로 표시합니다.
  • 파일명만 대체 텍스트로 작성함: alt="profile.jpg"는 이미지의 의미를 설명하지 못합니다.
  • 의미 없는 링크 이름을 사용함: 여기, 클릭보다 목적지를 알 수 있는 텍스트를 사용합니다.

6. 짧은 실습 과제​

  1. portfolio/assets/images 폴더를 만들고 직접 준비한 이미지를 profile.jpg로 저장합니다.
  2. index.html에 프로필 이미지와 현재 페이지 내부 이동 링크를 추가합니다.
  3. about.html을 만들고 두 HTML 문서가 서로 이동할 수 있게 연결합니다.
  4. 자신의 GitHub 프로필이나 프로젝트로 이동하는 외부 링크를 하나 추가합니다.
  5. 서버를 실행하고 모든 링크를 키보드의 Tab과 Enter만으로 사용할 수 있는지 확인합니다.
  6. 개발자 도구의 Network 탭에서 index.html과 profile.jpg가 각각 200으로 응답하는지 확인합니다.
  7. src의 파일명을 잠시 틀리게 바꾸어 이미지 요청이 404가 되는지 확인한 뒤 원래 이름으로 복구합니다.

완료 기준은 내부 영역, 다른 HTML 문서, 외부 사이트로 각각 이동할 수 있고 이미지 요청이 성공하며, 이미지의 목적을 설명하는 alt가 작성되어 있는 것입니다.

7. 이해 점검 질문 3개​

  1. index.html과 같은 폴더 아래 assets/images/profile.jpg를 표시하려면 src를 어떻게 작성해야 하나요?
  2. href="#projects"와 href="about.html"은 각각 어디로 이동하나요?
  3. 정보가 없는 장식용 이미지의 alt 속성은 생략하는 것과 alt=""로 작성하는 것 중 어느 쪽이 맞으며, 그 이유는 무엇인가요?

핵심 요약​

  • 이번 강의의 핵심 개념을 코드의 구조와 실행 결과에 연결했습니다.
  • 코드 예시를 직접 바꾸는 짧은 실습으로 핵심 동작을 확인했습니다.
  • 이해 점검 질문에 답하며 다음 강의에 필요한 기준을 정리했습니다.
MINI QUIZ

선택 즉시 정답과 해설을 확인할 수 있습니다. 결과는 이 브라우저에만 저장됩니다.

0 / 2
  1. 문제 1“링크·이미지·파일 경로” 실습 결과를 해석하는 올바른 기준은 무엇인가요?
  2. 문제 2‘대소문자를 다르게 작성함’ 상태에 관한 “링크·이미지·파일 경로” 본문의 설명으로 가장 알맞은 것은 무엇인가요?

답을 선택하면 진행 결과가 자동으로 저장됩니다.

LESSON STATUS

학습을 마쳤나요?

직접 실습과 점검 질문까지 확인한 뒤 완료로 표시하세요.

5강. 링크·이미지·파일 경로 미완료 상태