figure와 figcaption
캡션이 포함된 의미 있는 figure 컨테이너로 이미지를 감쌉니다.
figure와 figcaption은(는) CoddyKit의 무료 HTML Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 HTML Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
figure란 무엇입니까
<figure> 요소는 본문에서 참조하는 독립적인 콘텐츠를 표시합니다:
- 캡션이 있는 이미지
- 코드 목록
- 다이어그램, 차트 및 일러스트레이션
- 인용문
핵심 특징은 다음과 같습니다. 주 흐름에서 제거해도 주변 텍스트가 여전히 의미를 가져야 합니다.
figure with figcaption
<figcaption>은 figure에 캡션을 제공합니다:
<figure>
<img src="chart.png" alt="Bar chart showing Q1-Q4 revenue">
<figcaption>Figure 1: Quarterly revenue growth, 2024.</figcaption>
</figure>
<!-- figcaption can be first or last child of figure -->
<!-- It is visible text that supplements the alt text -->figcaption 위치
<figcaption>은 주 콘텐츠 앞이나 뒤에 배치할 수 있습니다:
<figure>
<figcaption>Listing 1: Hello World in HTML</figcaption>
<pre><code><!DOCTYPE html>
<html>
<body>Hello, World!</body>
</html></code></pre>
</figure>접근성: alt와 figcaption 비교
차이점을 이해해 보겠습니다:
alt— 화면 낭독기와 이미지가 깨진 경우를 위해 이미지 콘텐츠를 설명합니다figcaption— 맥락, 출처 또는 설명을 제공하는 표시되는 캡션입니다
둘은 서로 다른 목적을 가지므로 같은 내용을 반복해서는 안 됩니다.
<figure>
<img src="chart.png" alt="Line chart showing 45% growth from January to December">
<figcaption>Source: 2024 Annual Report, Finance Department.</figcaption>
</figure>figure의 코드 목록
레이블이 지정된 코드 예제에는 <figure>를 사용합니다:
<figure>
<pre><code>function greet(name) {
return `Hello, ${name}!`;
}</code></pre>
<figcaption>Example 1: A simple greeting function in JavaScript.</figcaption>
</figure>figure with 인용문
<figure>는 <blockquote>와 함께 사용하면 매우 유용합니다:
<figure>
<blockquote>
<p>The web is for everyone.</p>
</blockquote>
<figcaption>— Tim Berners-Lee, inventor of the World Wide Web</figcaption>
</figure>figure의 여러 이미지
figure에는 서로 관련된 여러 이미지를 포함할 수 있습니다:
<figure>
<img src="before.jpg" alt="Garden before renovation">
<img src="after.jpg" alt="Garden after renovation">
<figcaption>Before and after the 2024 renovation project.</figcaption>
</figure>figure와 div 비교
<figure>와 <div> 중 어떤 것을 사용할지 알아봅니다:
- 콘텐츠를 부록으로 옮길 수 있을 때는
<figure>를 사용합니다 - 표시되는 캡션이 필요할 때는
<figure>를 사용합니다 - 레이아웃 컨테이너나 독립적이지 않은 이미지 그룹에는
<div>를 사용합니다
본문에서 figure 연결하기
본문에서 figure를 참조합니다:
<p>The growth trend is illustrated in <a href="#fig1">Figure 1</a>.</p>
<figure id="fig1">
<img src="growth.png" alt="Revenue growth chart 2020-2024">
<figcaption>Figure 1: Annual revenue growth 2020-2024.</figcaption>
</figure>이미지에 figure는 필수가 아닙니다
모든 이미지를 <figure>로 감쌀 필요는 없습니다:
<!-- Decorative or simple content image: just img -->
<img src="avatar.jpg" alt="Profile photo of Jane Doe" class="avatar">
<!-- Image with a caption OR self-contained reference: use figure -->
<figure>
<img src="diagram.svg" alt="System architecture diagram">
<figcaption>Figure 3: The three-tier architecture.</figcaption>
</figure>figure와 figcaption 스타일 지정
figure에 사용하는 일반적인 CSS입니다:
figure {
margin: 2rem auto;
max-width: 100%;
text-align: center;
}
figcaption {
font-size: 0.875rem;
color: #666;
margin-top: 0.5rem;
font-style: italic;
}빠른 확인
alt 텍스트와 figcaption의 핵심적인 차이점은 무엇입니까?
복습: figure와 figcaption
figure의 핵심 내용:
<figure>— 본문에서 참조하는 독립적인 콘텐츠<figcaption>— figure의 첫 번째 또는 마지막 자식인 표시되는 캡션alt— 화면 낭독기를 위한 표시되지 않는 설명figcaption— 모든 사용자에게 표시되는 맥락- 이미지, 코드, 인용문 및 차트에 사용할 수 있습니다
자주 묻는 질문
“figure와 figcaption” 강의는 무료인가요?
네 — “figure와 figcaption” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 HTML Academy 강의 전체를 잠금 해제할 수 있습니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“figure와 figcaption”에서 뭘 배우나요?
캡션이 포함된 의미 있는 figure 컨테이너로 이미지를 감쌉니다. 브라우저에서 직접 실행하는 실습 코드로 HTML Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
HTML Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 HTML Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.
“figure와 figcaption” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 HTML Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 HTML Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.