<p>HTML과 CSS의 설명입니다.</p>
<dl>
    <dt><dfn>HTML</dfn></dt>
    <dd>
        HyperText Markup Language의 약자로,
        웹 페이지를 작성하는 데 사용되는
        마크업 언어입니다.
    </dd>
    <dt><dfn>CSS</dfn></dt>
    <dd>
        Cascading Style Sheets의 약자로,
        웹 페이지의 스타일과 레이아웃을 지정하는데 사용되는
        스타일시트 언어입니다.
    </dd>
</dl>
실제 적용된 모습
<p>가장 인기있는 영화 주인공입니다.</p>
<dl>
    <dt>헤리 포터</dt>
    <dd>
        J.K. 롤링의 소설 '해리 포터' 시리즈의 주인공으로,
        마법사로서 모험을 겪는 소년입니다.
    </dd>
    <dt>루크 스카이워커</dt>
    <dd>
        '스타워즈' 시리즈에서 주요한 역할을 맡은 캐릭터로,
        제다이 기사로서 강력한 힘을 가진 인물입니다.
    </dd>
</dl>
실제 적용된 모습
<p>여행 계획을 주제로 설명합니다.</p>
<dl>
    <dt>여행 목적</dt>
    <dd>휴식, 관광, 탐험 등</dd>
    <dt>여행 기간</dt>
    <dd>짧은 여행 (1-3일), 중간 여행 (4-7일), 긴 여행 (8일 이상)</dd>
    <dt>여행 예산</dt>
    <dd>저예산, 중간 예산, 고예산</dd>
</dl>
실제 적용된 모습
<p>자주하는 질문과 답변입니다.</p>
<dl>
    <dt>Q: 제품 구매 방법은 무엇인가요?</dt>
    <dd>A: 제품은 온라인 쇼핑몰 또는 오프라인 매장에서 구매하실 수 있습니다.</dd>
    <dt>Q: 제품 사용 방법은 무엇인가요?</dt>
    <dd>A: 제품 사용 방법은 설명서를 참고하거나 제조사 홈페이지에서 확인하실 수 있습니다.</dd>
    <dt>Q: 제품에 문제가 발생하면 어떻게 해야 하나요?</dt>
    <dd>A: 제품에 문제가 발생하면 제조사 고객센터 또는 A/S 센터에 문의하시기 바랍니다.</dd>
 </dl>
실제 적용된 모습
<p>우리회사를 소개합니다.</p>
<dl>
    <dt>회사명</dt>
    <dd>우리회사</dd>
    <dt>설립일</dt>
    <dd>2012년 7월 30일</dd>
    <dt>사업 분야</dt>
    <dd>사회적으로 유익한 가치의 창출</dd>
    <dt>전화번호</dt>
    <dd>02-1234-5678</dd>
    <dt>사업 소개</dt>
    <dd>모든 사람을 위한 코딩 학습서입니다.</dd>
 </dl>
실제 적용된 모습
<p>가장 인기있는 영화 주인공입니다.</p>
<dl>
    <dt>헤리 포터</dt>
    <dd>
        J.K. 롤링의 소설 '해리 포터' 시리즈의 주인공으로,
        마법사로서 모험을 겪는 소년입니다.
    </dd>
    <dt>루크 스카이워커</dt>
    <dd>
        '스타워즈' 시리즈에서 주요한 역할을 맡은 캐릭터로,
        제다이 기사로서 강력한 힘을 가진 인물입니다.
    </dd>
</dl>
실제 적용된 모습
<dl>
    <dt>미국</dt>
    <dt>미합중국<dt>
    <dd>주 50개와 특별구 1개로 이루어진 연방제 공화국이다.</dd>
</dl>
실제 적용된 모습
<dl>
    <dt>커피</dt>
    <dd>커피 나무의 열매로 만든 차</dd>
    <dd>좋아요! 아이스 아메리카노 😃</dd>
</dl>
실제 적용된 모습
<style>
    .dl-item {
        padding: 1em;
        border-radius: 1em;
        background-color: beige;
    }
    .dl-item + .dl-item {
        margin-top: 1em;
    }
    .dl-item dt {
        font-weight: 600;
        margin-bottom: 0.3em;
    }
    .dl-item dd {
        margin: 0;
    }
</style>
<dl>
    <div class="dl-item">
        <dt>이름</dt>
        <dd>홍길동</dd>
    </div>
    <div class="dl-item">
        <dt>출생년도</dt>
        <dd>2002</dd>
    </div>
    <div class="dl-item">
        <dt>출생지</dt>
        <dd>서울</dd>
    </div>
    <div class="dl-item">
        <dt>좋아하는 색</dt>
        <dd>파랑</dd>
    </div>
</dl>
실제 적용된 모습
<dl class="quiz">
    <dt>다음 중 세계에서 가장 큰 강은?</dt>
    <dd>
        <input type="radio" id="q1_choice1" name="q1" value="1">
        <label for="q1_choice1">아마존 강</label>
    </dd>
    <dd>
        <input type="radio" id="q1_choice2" name="q1" value="2">
        <label for="q1_choice2">니지니 강</label>
    </dd>
    <dd>
        <input type="radio" id="q1_choice3" name="q1" value="3">
        <label for="q1_choice3">양쯔강</label>
    </dd>
</dl>
<form>
    <fieldset>
        <legend>세계에서 가장 큰 강은?</legend>
        <p>
            <input type="radio" id="q1_choice1" name="q1" value="1">
            <label for="q1_choice1">아마존 강</label>
        </p>
        <p>
            <input type="radio" id="q1_choice2" name="q1" value="2">
            <label for="q1_choice2">니지니 강</label>
        </p>
        <p>
            <input type="radio" id="q1_choice3" name="q1" value="3">
            <label for="q1_choice3">양쯔강</label>
        </p>
      </fieldset>    
</form>
<dl>
    <dt>메뉴</dt>
    <dd><a href="">회사 소개</a></dd>
    <dd><a href="">제품</a></dd>
    <dd><a href="">문의</a></dd>
</dl>
<nav>
    <ul>
        <li><a href="">회사 소개</a></li>
        <li><a href="">제품</a></li>
        <li><a href="">문의</a></li>
    </ul>
</nav>