PricingLoginStart free
HTML Academy · 강의

절대 URL과 상대 URL 비교

절대 경로와 상대 경로의 차이를 이해합니다.

레슨 2/413개 단계

절대 URL과 상대 URL 비교은(는) CoddyKit의 무료 HTML Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 HTML Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

URL이란 무엇인가요?

URL(통합 자원 위치 지정자)은 웹에서 리소스의 전체 주소입니다.

URL은 다음과 같은 구성 요소로 이루어집니다.

https://example.com:443/products/widget?color=red#reviews
│     │           │   │               │          │
│     │           │   │               │          └─ Fragment
│     │           │   │               └─ Query string
│     │           │   └─ Path
│     │           └─ Port
│     └─ Domain
└─ Protocol

절대 URL

절대 URL에는 프로토콜, 도메인, 경로를 포함한 전체 주소가 들어갑니다.

<a href="https://example.com/about">About</a>
<img src="https://cdn.example.com/logo.png" alt="Logo">

<!-- Absolute URLs work from anywhere -->
<!-- Use for: external sites, CDN resources, canonical tags -->

상대 URL

상대 URL은 현재 페이지 위치를 기준으로 하므로 프로토콜이나 도메인이 필요하지 않습니다.

<!-- Current page: https://example.com/blog/post.html -->

<a href="other-post.html">Same folder</a>
<!-- → https://example.com/blog/other-post.html -->

<a href="../products">Parent folder</a>
<!-- → https://example.com/products -->

<a href="/contact">Root relative</a>
<!-- → https://example.com/contact -->

상대 URL의 세 가지 형태

상대 URL에는 세 가지 형태가 있습니다.

<!-- 1. Relative to current file's folder -->
<a href="page.html">Same directory</a>

<!-- 2. Root-relative: starts with / (relative to domain root) -->
<a href="/about">Root-relative</a>

<!-- 3. Protocol-relative: starts with // -->
<img src="//cdn.example.com/img.png" alt="">

../로 이동하기

../를 사용하면 디렉터리 수준을 한 단계 위로 이동할 수 있습니다.

<!-- File structure:
/
├── index.html
├── about.html
└── blog/
    ├── post1.html
    └── post2.html
-->

<!-- In blog/post1.html: -->
<a href="post2.html">Post 2</a>          <!-- same folder -->
<a href="../">Home</a>                   <!-- up one level -->
<a href="../about.html">About</a>        <!-- up then file -->

절대 URL과 상대 URL은 언제 사용할까요?

사용 지침:

  • 외부 리소스 — 항상 절대 URL: https://...
  • CDN 리소스 — 절대 URL 또는 프로토콜 상대 URL
  • 내부 탐색 — 루트 상대 URL(/page)이 가장 안전합니다
  • 같은 디렉터리 — 상대 URL(page.html)이 편리합니다

루트 상대 URL은 이식성이 높습니다

루트 상대 URL(/path)은 페이지를 이동해도 그대로 사용할 수 있습니다.

<!-- If this page moves from /blog/post.html to /articles/post.html -->

<!-- Root-relative STILL works: -->
<a href="/contact">Contact</a>  <!-- always → example.com/contact -->

<!-- Relative MAY break: -->
<a href="../contact.html">Contact</a>  <!-- different result in new location -->

base 요소

<head>의 <base> 요소는 모든 상대 링크의 기준 URL을 설정합니다.

<head>
  <base href="https://example.com/docs/">
</head>
<body>
  <!-- This resolves to: https://example.com/docs/guide.html -->
  <a href="guide.html">Guide</a>
</body>

URL 인코딩

URL의 특수 문자는 반드시 퍼센트 인코딩해야 합니다.

<!-- Space in URL path -->
<a href="/pages/my%20page.html">My Page</a>

<!-- Query string with special characters -->
<a href="/search?q=HTML%20%26%20CSS">Search HTML & CSS</a>

<!-- Common encodings:
  space → %20
  & → %26
  = → %3D
  # → %23
-->

표준 URL

페이지에 여러 URL로 접근할 수 있다면 표준 태그를 사용해 기본으로 사용할 URL을 선언합니다.

<head>
  <!-- Prevents duplicate content SEO penalty -->
  <link rel="canonical" href="https://example.com/blog/post">
</head>
<!-- Both /blog/post and /blog/post.html may serve the same content -->
<!-- Canonical tells Google which URL to index -->

URL 모범 사례

다음 URL 규칙을 따르세요.

  • 소문자만 사용합니다
  • 단어를 구분할 때 밑줄이 아닌 하이픈을 사용합니다
  • URL은 짧고 설명이 분명하게 유지합니다
  • 특수 문자는 피하고 인코딩합니다
  • 내부 링크에는 루트 상대 URL을 사용합니다

확인 문제

/blog/post.html에 파일이 있고 /about.html로 연결하려고 합니다. 가장 안전한 상대 URL은 무엇인가요?

인터랙티브 레슨에서 답해보세요

복습: 절대 URL과 상대 URL

URL 유형 요약:

  • 절대 URL — 프로토콜과 도메인을 포함한 전체 URL
  • 루트 상대 URL — /로 시작하며 도메인 루트를 기준으로 함
  • 상대 URL — 현재 파일의 위치를 기준으로 함
  • ../ — 디렉터리 수준을 한 단계 위로 이동
  • <base href> — 모든 상대 URL의 기준 설정
무료로 시작

AI 튜터와 함께 HTML을(를) 배우세요 — 무료

브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.

코스
40
레슨
159
무료로 학습 시작전체 코스 보기

자주 묻는 질문

“절대 URL과 상대 URL 비교” 강의는 무료인가요?

네 — “절대 URL과 상대 URL 비교” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 HTML Academy 강의 전체를 잠금 해제할 수 있습니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“절대 URL과 상대 URL 비교”에서 뭘 배우나요?

절대 경로와 상대 경로의 차이를 이해합니다. 브라우저에서 직접 실행하는 실습 코드로 HTML Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

HTML Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 HTML Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.

“절대 URL과 상대 URL 비교” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 HTML Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 HTML Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. anchor 요소와 href 속성
  2. 절대 URL과 상대 URL 비교
  3. 새 탭에서 링크 열기와 download 속성
  4. 섹션 연결과 프래그먼트 식별자
← HTML Academy(으)로 돌아가기