UZU-DEV

1. 하이퍼링크: <a>

1.1 기본 구조

<a>(Anchor) 는 2편 하이퍼텍스트 글에서 살펴봤듯 웹을 비선형 구조로 만드는 핵심 태그다. href 속성에 이동할 주소를 지정한다.

<a href="https://example.com">외부 사이트로 이동</a>

1.2 href 의 다양한 값

href 에는 URL 외에도 다양한 형식의 값이 올 수 있다.

외부 링크 (절대 경로)

<a href="https://github.com">GitHub</a>

프로토콜(https://)을 포함한 완전한 주소. 다른 도메인으로 이동할 때 사용한다.

내부 링크 (상대 경로)

<!-- 같은 폴더의 파일 -->
<a href="about.html">소개 페이지</a>

<!-- 상위 폴더 -->
<a href="../index.html">홈으로</a>

<!-- 루트 기준 절대 경로 -->
<a href="/blog/posts">블로그 목록</a>

도메인을 생략하고 경로만 적는 방식. 같은 사이트 내 다른 페이지로 이동할 때 사용한다.

페이지 내 앵커 (Fragment)

<!-- 이동할 목적지 정의 -->
<h2 id="section-2">2. 클라이언트-서버 아키텍처</h2>

<!-- 그 위치로 점프하는 링크 -->
<a href="#section-2">2장으로 이동</a>

# 뒤에 요소의 id 값을 적으면 해당 위치로 즉시 스크롤된다. 긴 문서의 목차나 "맨 위로" 버튼에 자주 쓰인다.

이메일 링크

<a href="mailto:hello@example.com">이메일 보내기</a>

<!-- 제목과 본문 미리 채우기 -->
<a href="mailto:hello@example.com?subject=문의&body=안녕하세요">문의하기</a>

클릭하면 기기의 기본 이메일 클라이언트가 열리고 수신자가 미리 채워진다.

전화 링크

<a href="tel:+821012345678">전화하기</a>

모바일 기기에서 클릭하면 전화 앱이 열린다. 모바일 사용자가 많은 사이트에서 유용하다.

파일 다운로드

<a href="/files/report.pdf" download>PDF 다운로드</a>

<!-- 다운로드 파일명 지정 -->
<a href="/files/report-2026.pdf" download="연간보고서-2026.pdf">PDF 다운로드</a>

download 속성을 추가하면 링크를 따라가는 대신 파일을 다운로드한다. 속성값으로 저장될 파일명을 지정할 수 있다.

1.3 target 속성: 어디서 열 것인가

target 속성은 링크를 어느 컨텍스트에서 열지 지정한다.

_blank 를 가장 많이 쓰는데, 반드시 보안 속성과 함께 써야 한다.

1.4 rel 속성: 링크의 관계와 보안

rel 속성은 현재 문서와 링크 대상 사이의 관계를 정의한다. 여러 값을 공백으로 구분해 함께 쓸 수 있다.

target="_blank" 와 보안

<!-- 취약한 코드 -->
<a href="https://example.com" target="_blank">외부 링크</a>

<!-- 안전한 코드 -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">외부 링크</a>

target="_blank" 로 새 탭을 열면, 열린 페이지가 window.opener 를 통해 원본 페이지에 접근할 수 있는 보안 취약점이 생긴다. 이를 차단하기 위해 다음 두 가지를 함께 쓴다.

• noopener: 새 탭에서 열린 페이지가 window.opener 에 접근하지 못하게 차단한다.
• noreferrer: noopener 의 동작을 포함하며, 추가로 HTTP Referer 헤더(어느 페이지에서 왔는지 알려주는 정보)를 전송하지 않는다.

참고: 최신 브라우저(Chrome 88+, Firefox 79+, Safari 12.1+)는 target="_blank" 에 자동으로 noopener 동작을 적용한다. 그러나 구형 브라우저를 고려한다면 명시적으로 작성하는 것이 안전하다.

SEO 관련 rel 값

1.5 <a> 의 투명(Transparent) 특성

HTML5에서 <a> 는 투명(transparent) 요소다. 이는 <a> 를 감싸는 부모 요소의 콘텐츠 모델에 따라, <a> 안에 인라인 요소뿐 아니라 블록 레벨 요소도 담을 수 있다는 뜻이다.

<!-- HTML5에서 유효: a 태그로 카드 전체를 감싸기 -->
<a href="/posts/1">
  <article>
    <h2>포스트 제목</h2>
    <p>요약 내용...</p>
  </article>
</a>

단, <a> 안에 <a> 를 중첩하는 것은 유효하지 않다.

2. 이미지: <img>

2.1 기본 구조

<img> 는 닫는 태그가 없는 빈 요소(void element) 다. src 와 alt 두 속성이 핵심이다.

<img src="photo.jpg" alt="한강 공원에서 찍은 벚꽃 사진">

2.2 src 속성

이미지 파일의 경로 또는 URL을 지정한다. <a> 의 href 와 마찬가지로 절대 경로와 상대 경로를 모두 쓸 수 있다.

<!-- 상대 경로 -->
<img src="images/photo.jpg" alt="사진">

<!-- 절대 경로 (외부 이미지) -->
<img src="https://example.com/photo.jpg" alt="사진">

2.3 alt 속성: 접근성과 SEO의 핵심

alt 는 이미지를 텍스트로 대체 설명하는 속성이다. 다음 세 가지 상황에서 중요하다.

• 이미지 로딩 실패 시: src 가 잘못되었거나 네트워크 오류로 이미지를 불러오지 못하면 alt 텍스트가 대신 표시된다.
• 스크린 리더: 시각 장애가 있는 사용자의 스크린 리더가 alt 를 읽어준다.
• 검색 엔진: 검색 엔진이 이미지의 내용을 파악하는 데 alt 를 활용한다.

alt 작성에는 두 가지 경우가 있다.

<!-- 정보를 전달하는 이미지: 구체적으로 설명 -->
<img src="chart.png" alt="2026년 상반기 월별 블로그 방문자 수 막대 그래프, 6월이 최고치">

<!-- 장식용 이미지: 빈 문자열 (스크린 리더가 무시) -->
<img src="divider.png" alt="">

alt 속성 자체를 아예 생략하는 것과 빈 문자열(alt="") 로 두는 것은 다르다. 속성을 생략하면 일부 스크린 리더가 파일명을 읽어버린다. 장식용 이미지라면 반드시 alt="" 로 명시적으로 비워둔다.

2.4 width 와 height 속성: 레이아웃 시프트 방지

<img src="photo.jpg" alt="사진" width="800" height="600">

이미지가 로드되기 전에 브라우저는 이미지의 크기를 모른다. 크기 정보가 없으면 이미지가 로드되는 순간 주변 콘텐츠가 갑자기 밀려나는 레이아웃 시프트(Layout Shift) 가 발생한다. width·height 를 명시하면 브라우저가 이미지 로드 전에 정확한 공간을 미리 확보해 이 문제를 방지한다.

• 단위 없이 숫자만 적는다 (픽셀 단위).
• 이미지의 실제 비율과 다른 값을 넣으면 이미지가 왜곡된다.
• CSS로 크기를 조절할 것이라도 원본 비율과 같게 넣는 것이 권장된다.

2.5 loading 속성: 지연 로딩

<!-- 화면에 보일 때까지 로딩을 지연 -->
<img src="photo.jpg" alt="사진" loading="lazy">

<!-- 즉시 로딩 (기본값) -->
<img src="hero-image.jpg" alt="메인 배너" loading="eager">

loading="lazy" 는 페이지 맨 아래에 있는 이미지처럼 처음에 보이지 않는 이미지의 초기 로딩 시간을 줄여 페이지 성능을 개선한다. JavaScript 없이 HTML 속성만으로 지연 로딩을 구현할 수 있다.

주의: 스크롤하기 전에 이미 화면에 보이는 이미지(히어로 이미지, 로고 등)에는 loading="lazy" 를 쓰지 않는다. 가장 먼저 보이는 콘텐츠의 로딩을 오히려 늦춰 사용자 경험을 해칠 수 있다.

2.6 반응형 이미지: srcset 과 sizes

화면 해상도나 뷰포트 크기에 따라 적절한 크기의 이미지를 제공할 수 있다.

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
  sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1600px"
  alt="벚꽃 사진"
>

• srcset: 브라우저가 선택할 수 있는 이미지 후보 목록. 파일경로 너비(w) 형식으로 각 이미지의 실제 너비를 알려준다.
• sizes: 각 미디어 조건에서 이미지가 차지할 예상 너비. 브라우저는 이 정보와 기기의 화면 해상도를 조합해 srcset 에서 가장 적합한 이미지를 선택한다.
• src: srcset 을 지원하지 않는 구형 브라우저의 폴백(fallback) 이미지.

2.7 <picture>: 형식·조건별 이미지 분기

더 세밀한 제어가 필요할 때는 <picture> 요소를 쓴다.

<picture>
  <!-- WebP를 지원하면 WebP 사용 -->
  <source srcset="photo.webp" type="image/webp">
  <!-- 지원하지 않으면 JPEG 사용 -->
  <img src="photo.jpg" alt="벚꽃 사진">
</picture>

• <source> 요소로 조건(미디어 쿼리, MIME 타입)을 지정하고, 브라우저가 지원하는 첫 번째 <source> 를 사용한다.
• 마지막의 <img> 는 필수이며, 어떤 <source> 도 선택되지 않을 때의 폴백이자 alt 텍스트를 담는 자리다.
• WebP·AVIF 같은 최신 이미지 형식을 지원하지 않는 구형 브라우저에도 안전하게 대응할 수 있다.

3. 이미지와 설명 묶기: <figure> · <figcaption>

3.1 <figure> 란

<figure> 는 본문 흐름과 독립적으로 참조되는 자급 자족(self-contained) 콘텐츠를 묶는 시맨틱 태그다. 이미지뿐 아니라 도표, 코드 블록, 인용문처럼 본문에서 참조하되 위치를 옮겨도 문서 전체의 흐름에 영향을 주지 않는 콘텐츠에 사용한다.

3.2 <figcaption> 이란

<figcaption> 은 <figure> 의 설명(캡션)을 담는 태그다.

• <figure> 의 첫 번째 또는 마지막 자식 요소로만 위치해야 한다.
• <figure> 하나당 <figcaption> 은 하나만 쓸 수 있다. (선택 사항이므로 없어도 된다)

<figure>
  <img src="dom-tree.png" alt="Document를 루트로 html, head, body가 이어지는 DOM 트리 구조">
  <figcaption>DOM 트리 — HTML이 파싱되어 메모리에 구성되는 노드 구조</figcaption>
</figure>

3.3 <figure> 의 다양한 활용

<figure> 안에는 이미지 외에도 다양한 콘텐츠를 담을 수 있다.

<!-- 코드 블록 -->
<figure>
  <pre><code>const greeting = "Hello, Web!";</code></pre>
  <figcaption>JavaScript 변수 선언 예시</figcaption>
</figure>

<!-- 인용문 -->
<figure>
  <blockquote>
    <p>웹은 인류를 위한 것이어야 한다.</p>
  </blockquote>
  <figcaption>— 팀 버너스리</figcaption>
</figure>

<!-- 여러 이미지를 하나의 figure로 -->
<figure>
  <img src="before.png" alt="개선 전 레이아웃">
  <img src="after.png" alt="개선 후 레이아웃">
  <figcaption>시맨틱 태그 적용 전(좌)과 후(우) 비교</figcaption>
</figure>

3.4 alt vs <figcaption>: 무엇이 다른가

두 가지 모두 이미지를 설명하지만, 대상과 목적이 다르다.

<figure>
  <img
    src="cern-first-website.png"
    alt="1991년 공개된 세계 최초 웹사이트 info.cern.ch의 화면 캡처"
  >
  <figcaption>
    세계 최초의 웹사이트 info.cern.ch (1991) —
    팀 버너스리가 CERN에서 공개한 이 페이지는 웹 자체를 설명하는 안내문이었다.
  </figcaption>
</figure>

• alt: 이미지가 보이지 않을 때 "무엇을 찍은 사진인지" 알 수 있게 한다.
• <figcaption>: 이미지가 보이는 모든 사용자에게 "이 사진의 역사적 배경과 의미"를 전달한다.