웹 퍼블리싱/HTML5

<dl>, <dt>, <dd>를 <ol>, <ul>, <li>로 대체

욕심많은 햄톨 2023. 12. 20. 18:06

<ol>, <ul>, <li>

1. <ol>, <li> : 순서o.

2. <ul>, <li> : 순서x. 주로 사용.

 

<dl>, <dt>, <dd>

<dt>(용어(키)), <dd>(정의(밸류))의 집합을 <dl>로 감싸는 형태.

<dl>안에는 <dt>,<dd>만 있어야되기 때문에 스타일 적용 시 한계가 있음.

그래서 <ol>,<ul>,<li>로 대체한 경우도 꽤 있다.

 

✏️<dl>, <dt>, <dd>를 <ol>, <ul>, <li>로 대체한 예제

<body>
    <!-- dldtdd를 -->
    <dl>
        <dt>Coffee</dt>
        <dd>Coffee is a brewed drink prepared from roasted coffee beans, the seeds of berries from certain Coffea species.</dd>
        <dt>Milk</dt>
        <dd>Milk is a nutrient-rich, white liquid food produced by the mammary glands of mammals.</dd>
      </dl>

    <!-- olulli로 대체 -->
    <ul>
        <li>
            <dfn>Coffee</dfn>
            <p>Coffee is a brewed drink prepared from roasted coffee beans, the seeds of berries from certain Coffea species.</p>
        </li>
        <li>
            <dfn>Milk</dfn>
            <p>Milk is a nutrient-rich, white liquid food produced by the mammary glands of mammals.</p>
        </li>
    </ul>
</body>

 

728x90