설명 목록 dl, dt, dd
설명 목록으로 용어와 정의의 쌍을 마크업합니다.
설명 목록 dl, dt, dd은(는) CoddyKit의 무료 HTML Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 HTML Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
설명 목록이란 무엇입니까
설명 목록은 용어와 설명을 묶습니다:
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language — the structure of the web.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets — the presentation of the web.</dd>
<dt>JavaScript</dt>
<dd>The programming language of the web.</dd>
</dl>dl, dt 및 dd 요소
설명 목록은 세 가지 요소로 구성됩니다:
<dl>— 설명 목록 컨테이너<dt>— 설명 용어(키)<dd>— 설명 세부 정보(값)
dt 하나에 여러 dd 사용
하나의 용어에는 여러 설명이 있을 수 있습니다:
<dl>
<dt>HTML</dt>
<dd>Stands for HyperText Markup Language.</dd>
<dd>First published as HTML 2.0 in 1995.</dd>
<dd>Current version: HTML5 (Living Standard).</dd>
</dl>dd 하나에 여러 dt 사용
여러 용어가 하나의 설명을 공유할 수 있습니다(동의어, 별칭):
<dl>
<dt>Username</dt>
<dt>Login</dt>
<dt>Handle</dt>
<dd>The unique identifier used to log in to your account.</dd>
</dl>실제 사용 사례
설명 목록은 다음과 같은 경우에 적합합니다:
- 용어집과 정의
- FAQ 섹션(질문 → 답변)
- 제품 메타데이터(작성자: Jane, 게시일: 2024)
- 레시피 세부 정보(준비 시간: 10분, 제공량: 4인분)
- API 매개변수 문서
dl을 사용한 FAQ
설명 목록으로 FAQ를 만듭니다:
<dl class="faq">
<dt>Is HTML a programming language?</dt>
<dd>No. HTML is a markup language. It defines structure and meaning, not logic or computation.</dd>
<dt>Do I need to close void elements?</dt>
<dd>In HTML5, void elements like <img> and <br> do not need a closing slash.</dd>
</dl>메타데이터에 dl 사용
문서 또는 제품 메타데이터를 표시합니다:
<article>
<h1>Responsive Images Guide</h1>
<dl class="metadata">
<dt>Author</dt>
<dd>Jane Smith</dd>
<dt>Published</dt>
<dd><time datetime="2024-03-15">March 15, 2024</time></dd>
<dt>Reading time</dt>
<dd>8 minutes</dd>
</dl>
</article>dl 스타일 지정
CSS로 설명 목록의 스타일을 지정합니다:
/* Two-column layout */
dl {
display: grid;
grid-template-columns: max-content 1fr;
gap: 0.25rem 1rem;
}
dt {
font-weight: bold;
color: #555;
}
dd {
margin: 0; /* Remove browser default dd margin */
}dl 중첩하기
계층적 정의를 위해 설명 목록을 중첩할 수 있습니다:
<dl>
<dt>HTML Elements</dt>
<dd>
<dl>
<dt>Block elements</dt>
<dd>Take full width: div, p, h1-h6</dd>
<dt>Inline elements</dt>
<dd>Flow with text: span, a, strong</dd>
</dl>
</dd>
</dl>키-값 데이터에 dl과 table 중 무엇을 사용할까
키-값 데이터에 <dl>과 <table> 중 어떤 것을 사용할지 알아봅니다:
- dl — 용어와 설명 사이의 연결(이름-값 쌍)
- table — 행과 열로 구성된 표 형식 데이터(항목마다 여러 속성)
<dl>
<dt>Name</dt><dd>Jane</dd>
<dt>Role</dt><dd>Developer</dd>
</dl>
<!-- vs table for multiple users with same attributes -->dl inside의 div
<dl> inside에서 dt/dd 그룹을 <div>로 감싸는 것은 유효한 HTML5입니다:
<dl>
<div>
<dt>HTML</dt>
<dd>Markup language for web pages.</dd>
</div>
<div>
<dt>CSS</dt>
<dd>Styling language for web pages.</dd>
</div>
</dl>
<!-- Useful for zebra-striping or grouping with CSS -->빠른 확인
설명 목록에서 정의/값을 포함하는 요소는 무엇입니까?
복습: 설명 목록
설명 목록의 핵심 내용:
<dl>— 설명 목록 컨테이너<dt>— 용어(키, 질문, 이름)<dd>— 설명(값, 답변, 정의)- 하나의 dt에는 여러 dd가 있을 수 있고, 여러 dt가 하나의 dd를 공유할 수 있습니다
- 용어집, FAQ 및 메타데이터에 적합합니다
- 스타일 지정의 유연성을 위해 그룹을
<div>로 감쌉니다
자주 묻는 질문
“설명 목록 dl, dt, dd” 강의는 무료인가요?
네 — “설명 목록 dl, dt, dd” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 HTML Academy 강의 전체를 잠금 해제할 수 있습니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“설명 목록 dl, dt, dd”에서 뭘 배우나요?
설명 목록으로 용어와 정의의 쌍을 마크업합니다. 브라우저에서 직접 실행하는 실습 코드로 HTML Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
HTML Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 HTML Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.
“설명 목록 dl, dt, dd” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 HTML Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 HTML Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.