[HTML/JS/jQuery] 용어 정의 리스트 (dl , dt , dd 태그)

위와 같이 용어의 뜻을 보여주는 용어 설명 리스트에 대해서 실습하겠습니다.

---

용어 정의 리스트 관련 태그

dl 태그

dl 태그는 definition List의 약자로 사전처럼 용어를 설명하는 리스트를 만듭니다.

---

dt 태그

dt 태그는 definition term의 약자로 용어의 이름(제목)을 넣을때 사용합니다.

---

dd 태그

dd 태그는 definition description의 약자로 용어의 정의(설명)을 넣을때 사용합니다.

---

HTML 구조

<div class="lab">
            <dl class="accordion">
                <dt>Item 1</dt>
                <dd>some explanation here. some explanation here.</dd>
                <dt>Item 2</dt>
                <dd>some explanation here. some explanation here.</dd>
                <dt>Item 3</dt>
                <dd>some explanation here. some explanation here. </dd>
            </dl>
</div>

CSS3 스타일

dl {
    width: 420px;
    margin: 0 auto 20px;
}

dt {
    font-size: 16px;
    color: #fff;
    background: #31374c;
    padding: 8px 12px;
    border-radius: 3px;
    margin: 0 0 2px;
}

dd {
    font-size: 14px;
    color: #4d4d4d;
    background: #fff;
    padding: 10px 20px;
    margin: 0 0 2px;
}

---

닫힌 리스트에 대해 class 부여

용어 이름 부분을 클릭하면 각 정의들이 나오고, 클릭하지 않은 용어의 이름부분은 흐릿한 색상으로 바꾸고, 클릭하지 않은 용어의 정의 부분은 아예 가릴 생각입니다.

이것을 어떻게 설정할까요? display none 등으로 설정하는것에는 한계가 있습니다.

closed 클래스를 이용해서 css로 설정할수 있습니다.

선택되지 않은 용어와 정의는 closed 라는 클래스를 추가해서 그에 맞는 css 속성을 부여하는 것입니다.

 

dt.closed는 dt 태그들 중에서 closed 클래스가 있는 것들만 선택하는 구문입니다.

dt.closed {
    background: #9396a2;
    cursor: pointer;
}

dd.closed {
    display: none;
}

---

jQuery를 이용해서 클래스 추가하기

 

초기 설정

dl태그가 여러개 라고 가정할때, 각 모든 dl 태그에 대해서 동일한 함수를 적용시키위해서 each 함수를 씁니다.

find 함수를 이용해서 dl를 부모로 가지는 엘리먼트 중에서 dt , dd 태그를 고를수 있는데요, 그것들을 alldd , alldt에 저장합니다.

정의(dd)는 우선 숨기고 dt에 대해선 마우스가 위에 있을때 마우스 포인터 모양이 바뀌도록 css 속성을 설정해줍니다.

$('dl').each( function() { 
        var dl = $(this);
        var alldd = dl.find("dd");
        var alldt = dl.find("dt");
        alldd.hide();
        alldt.css("cursor","pointer");
    });

---

용어를 클릭했을때 설정

새로운 용어를 클릭했을때 기존에 있었던 용어들을 닫고 새로 열어야되기 때문에 dd 태그들의 가시속성을 없애줍니다.

지정한 용어는 this를 이용해서 고를수 있고, 지정한 용어에 대한 설명은 dd 태그 바로 뒤에 있으므로 next로 찾아줍니다.

closeAll 함수로 모든 dd ,dt 태그들을 closed 클래스를 추가해줘서(addClass) 닫고, 지정한 dt ,dd태그들을 다시 열어주기위해 closed 클래스를 없애줍니다(removeClass).

alldt.click(function(){
            alldd.hide();
            var dt = $(this);
            var dd = dt.next();
            dd.show();
            alldt.css("cursor","pointer");
            dt.css("cursor" , "default");
            closeAll();
            open(dt , dd);
        })
        function closeAll() {
            alldd.addClass("closed");
            alldt.addClass("closed");
        }
        function open(dt, dd) {
            dt.removeClass("closed");
            dd.removeClass("closed");
        }
}

 

---

$('dl').each( function() { 
        var dl = $(this);
        var alldd = dl.find("dd");
        var alldt = dl.find("dt");
        alldd.hide();
        alldt.css("cursor","pointer");
        alldt.click(function(){
            alldd.hide();
            var dt = $(this);
            var dd = dt.next();
            dd.show();
            alldt.css("cursor","pointer");
            dt.css("cursor" , "default");
            closeAll();
            open(dt , dd);
        })
        function closeAll() {
            alldd.addClass("closed");
            alldt.addClass("closed");
        }
        function open(dt, dd) {
            dt.removeClass("closed");
            dd.removeClass("closed");
        }
    });