티스토리 뷰

HTML

Description List (정의 리스트) & dfn

baegofda_ 2021. 7. 5. 23:26

* Description List

  • dl (description list) : 정의, 설명 목록 명시
  • dt (description term) : 정의할 용어의 추상적인 개념 (key)
  • dd (description descriptions) : 정의할 용어의 구체적 내용 (value)
  • dl태그의 자식 요소에는 div, dt, dd 등이 올 수 있다.
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <dl>
        <!-- dt 1개와 dd 1개 이상이 올 수 있다. -->
            <dt>skills</dt>
            <dd>HTML</dd>
            <dd>CSS</dd>
            <dd>JS</dd>
        </dl>
    </body>
</html>

 

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <dl>
            <!-- 1개 이상의 dt와 1개의 dd가 올 수 있다 -->
            <dt>Firefox</dt>
            <dt>Naver Whale</dt>
            <dt>Chrome</dt>
            <dd>internet browser</dd>
        </dl>
    </body>
</html>

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <dl>
            <!-- dt와 dd를 묶는 div가 위치 할 수 있다 -->
            <div>
                <dt>Name</dt>
                <dd>Godzilla</dd>
            </div>
            <div>
                <dt>Born</dt>
                <dd>1952</dd>
            </div>
            <div>
                <dt>Birthplace</dt>
                <dd>Japan</dd>
            </div>
            <div>
                <dt>Color</dt>
                <dd>Green</dd>
            </div>
        </dl>
    </body>
</html>

* dfn

  • 문단에서 용어를 정의할 경우 사용하게된다.
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <p>
            <dfn>웹 개발자</dfn>는 프론트엔드, 백엔드 등으로 나뉠 수 있습니다.
        </p>
    </body>
</html>

문단에서 사용되는 단어에대한 용어를 정의할때

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <p>
            <dfn title="HyperText Markup Language">HTML</dfn> is the standard
            markup language for creating web pages.
        </p>
    </body>
</html>

약어에 구체적인 설명을 나타 낼 수 있다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <p>
            <dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn> is
            the standard markup language for creating web pages.
        </p>
    </body>
</html>

dfn 태그안에 abbr태그를 사용하여 약어에대한 정의를 설명

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <p>
            <dfn id="html-def">HTML</dfn> is the standard markup language for
            creating web pages.
        </p>

        <p>This is some text...</p>
        <p>This is some text...</p>
        <p>Learn <a href="#html-def">HTML</a> now.</p>
    </body>
</html>

페이지내에서 용어를 선택하여 정의된 부분으로 보낼 수 있다.

저작자표시

'HTML' 카테고리의 다른 글

blockquote & q (인용)  (0) 2021.07.05
div & span (부제: 박스안에 컨텐츠를 담아보자)  (0) 2021.07.05
ul & ol & li (리스트)  (0) 2021.07.05
Emphasis (강조)  (0) 2021.07.05
Headings & Paragraph  (0) 2021.07.05
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
글 보관함