앵커와 이미지: 웹의 결합 조직

"링크 없는 페이지는 문서야. 링크가 있어야 그게 웹 이 돼."

`<a>`: href 만이 아니야

모든 클릭 가능한 링크는 <a>. 가장 자주 만질 네 속성:

href — 목적지. 상대 (/quests), 절대 (https://...), 페이지 내 (#section-id), 또는 특수 (mailto:, tel:, javascript: — 마지막은 피해).
target="_blank" — 새 탭에서 열기. 외부 링크에는 항상 rel="noopener noreferrer" 와 페어 — 아니면 새 탭이 window.opener 를 읽고 장난을 칠 수 있어.
rel — 관계 metadata. noopener, noreferrer, nofollow, external, prefetch, canonical, license. 브라우저와 검색 엔진이 이걸 읽어.
download — 네비게이션 대신 리소스를 파일로 저장. 선택적으로 이름 바꿈: download="report.pdf".

링크 텍스트는 의미를 가져야 해

"여기 클릭" 과 "더 보기" 는 접근성 위반이야. Screen reader 가 페이지의 모든 링크 목록을 뽑을 수 있어; 문맥 없이 너의 "여기 클릭" 링크들은 이렇게 들려: "링크: 여기 클릭. 링크: 여기 클릭. 링크: 여기 클릭." 쓸모없어.

목적지를 묘사하는 링크 텍스트를 써: "MDN HTML reference 읽기" 지 "여기 클릭" 이 아니야. 링크 텍스트가 곧 접근성 label 이야.

페이지 내 앵커

<a href="#section-id"> 는 그 ID 를 가진 element 로 스크롤해. ID 를 가진 semantic heading (<h2 id="the-mantra">) 과 결합하면 목차 링크와 공유 가능한 deep link 가 돼. <html> 의 CSS scroll-behavior: smooth 가 스크롤 자체를 부드럽게.

`<img>`: 명세가 alt 를 요구

alt 속성은 선택이 아니야. W3C 명세는 모호하지 않아: 모든 <img> 에 alt 필요. 규칙:

의미 있는 이미지 — alt 가 이미지가 전달하는 내용을 묘사. "고양이 이미지" 가 아니라 그냥 "잠자는 칼리코 아기 고양이" (Screen reader 가 "이미지:" 를 앞에 붙여).
장식용 이미지 — alt="" (빈 문자열). Screen reader 한테 건너뛰라고. Alt 를 완전 빼는 것과 달라.
기능적 이미지 (홈 링크 역할도 하는 로고) — alt 가 목적지/기능을 묘사 ("피파 홈"), 시각이 아니라.
텍스트가 들어 있는 이미지 — alt 에 그 텍스트. PNG 에 글자를 구운 탓에 screen reader 가 단어를 놓치게 만들지 마.

반응형 이미지: srcset, sizes,

모든 화면에 풀 사이즈 파일 하나는 모바일에서 대역폭을 낭비하고 레티나 데스크톱에 흐릿한 이미지를 출시해. 모던 반응형 이미지는 srcset + sizes 로 브라우저가 맞는 파일을 고르게 해:

srcset 은 "이 이미지의 여러 해상도 버전들이 여기 있어"; sizes 는 "각 viewport 너비에서 이미지가 얼마나 클지". 브라우저가 그러고 나서 디바이스 픽셀 밀도에서 여전히 선명한 가장 작은 파일을 다운로드.

다른 크기에 다른 이미지 가 필요할 때 (art direction — 데스크톱에 wide hero, 모바일에 tall hero), media query 를 가진 <source> 자식들이 있는 <picture> 를 써.

모던 포맷: AVIF, WebP, JPEG fallback

JPEG 와 PNG 가 아직 사방에 있지만 AVIF 와 WebP 가 같은 시각 품질에서 압축이 더 잘 돼. <picture> 가 JPEG fallback 과 함께 제공하게 해 줘:

Below-the-fold 이미지는 lazy-load. <img loading="lazy" decoding="async">. 브라우저가 이미지가 viewport 가까이 올 때까지 로딩을 미뤄. 공짜 퍼포먼스, 속성 하나. 페이지 상단의 LCP (largest contentful paint) 이미지는 lazy-load 하지 마 — 체감 로딩 시간이 나빠져.

캡션 미디어용 `<figure>` + `<figcaption>`

이미지 (또는 차트, 코드 블록, 인용) 에 캡션이 따라올 때, <figure> 로 감싸고 캡션을 <figcaption> 안에. Screen reader 가 "figure" 라고 announce 하고 캡션을 읽어 — 연관이 시각적 근접만이 아니라 명시적이야.

피파의 노트

Cwk-site 가 피파의 퀘스트 일러스트를 Next 의 <Image> component 로 렌더하고, 이게 srcset, sizes, 모던 포맷을 자동으로 생성해. 밑단 HTML 은 여전히 모든 속성 가진 <img> — Next 는 너가 손으로 할 일을 더 빠르게 해 줄 뿐이야. HTML 을 알아야 Next 의 마법이 빗나갈 때 디버깅할 수 있어.

Code

앵커 패턴 + 안티패턴·html

<!-- 앵커, 제대로 -->
<a href="/quests">전체 퀘스트 보기</a>          <!-- 내부, 상대 -->
<a href="https://html.spec.whatwg.org/"
   target="_blank"
   rel="noopener noreferrer">
  HTML Living Standard 읽기
</a>                                          <!-- 외부, 새 탭, 안전하게 -->
<a href="#the-mantra">The Mantra 로 점프</a>  <!-- 페이지 내 -->
<a href="mailto:hello@example.com">이메일</a>  <!-- mailto -->
<a href="/report.pdf" download="q2-report.pdf">Q2 리포트 다운로드</a>

<!-- 이렇게 하지 마 -->
<a href="#">여기 클릭</a>
<a href="#" onclick="doStuff()">링크</a>      <!-- 이건 <button> 자리 -->
<a href="https://evil.com" target="_blank">링크</a>  <!-- rel=noopener 빠짐 -->

srcset, sizes, picture·html

<!-- 반응형 이미지, 모던 -->
<img
  src="hero-800.jpg"
  srcset="hero-400.jpg 400w,
          hero-800.jpg 800w,
          hero-1200.jpg 1200w,
          hero-1600.jpg 1600w"
  sizes="(min-width: 1024px) 60vw, 100vw"
  alt="빨간 머리에 파란 애니메 눈을 한 피파가 빛나는 터미널 앞에 앉아 있어"
  width="800"
  height="450"
  loading="lazy"
  decoding="async"
/>

<!-- <picture> 로 art direction -->
<picture>
  <source media="(min-width: 768px)"
          srcset="hero-wide.avif" type="image/avif" />
  <source media="(min-width: 768px)"
          srcset="hero-wide.webp" type="image/webp" />
  <source srcset="hero-tall.avif" type="image/avif" />
  <source srcset="hero-tall.webp" type="image/webp" />
  <img src="hero-tall.jpg"
       alt="터미널 앞 피파"
       width="800" height="600" />
</picture>

캡션 미디어·html

<!-- 캡션 있는 figure -->
<figure>
  <img src="cascade-diagram.svg"
       alt="다이어그램: origin → specificity → source order 가 단일 승리 선언으로 수렴"
       width="600" height="300" />
  <figcaption>
    Cascade 는 경쟁하는 CSS 규칙을 세 패스로 해결해:
    origin, specificity, source order.
  </figcaption>
</figure>

Exercise

이미지 셋 가진 페이지 만들기: (1) 장식용 divider 선 (alt=""), (2) 묘사적 alt 가진 의미 있는 사진, (3) <picture>, srcset, sizes, AVIF + WebP fallback 가진 반응형 hero 이미지. 그러고 나서 링크 셋 추가: 내부 페이지 링크, 새 탭의 외부 링크 (rel=noopener), 다운로드 링크. Lighthouse 로 감사하고 접근성 경고 0 개 확인.

Hint

Lighthouse 가 alt 빠짐과 외부 링크의 rel 빠짐을 잡아. 경고 뜨면 해당 섹션 다시 읽어 — 보통 속성 하나가 답이야.

`<a>`: href 만이 아니야

링크 텍스트는 의미를 가져야 해

페이지 내 앵커

`<img>`: 명세가 alt 를 요구

반응형 이미지: srcset, sizes,

모던 포맷: AVIF, WebP, JPEG fallback

캡션 미디어용 `<figure>` + `<figcaption>`

피파의 노트

Code

External links

Exercise

Progress

댓글 0

<a>: href 만이 아니야

링크 텍스트는 의미를 가져야 해

페이지 내 앵커

<img>: 명세가 alt 를 요구

반응형 이미지: srcset, sizes,

모던 포맷: AVIF, WebP, JPEG fallback

캡션 미디어용 <figure> + <figcaption>

피파의 노트

Code

External links

Exercise

Progress

`<a>`: href 만이 아니야

`<img>`: 명세가 alt 를 요구

캡션 미디어용 `<figure>` + `<figcaption>`