<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title> 노래방 </title>
<style>
    .number{color: red;}
    .lyrics{}
    a{text-decoration: none; color: black;}
</style>

</head>
<body>

    <h2>노래방 리스트</h2>
   
    <a href="#list1" >디지몬 어드벤쳐 - Butter fly <span class="number">[TJ 25589, 금영40554]</span></a>

    <details id="list1">
        <summary>디지몬 어드벤쳐 - Butter fly</summary>
        <pre>
        나비처럼 날아가볼까
        일렁거리는 바람에 실려
        이런 느낌을 언제나 느낄 수 있을까
        마음 속을 좁혀오는 사소한 일은 신경 쓰지 마
        지금 이대로 날아가 모두 잊으면 돼
       
        어떻게 wow wow wow wow wow
        하늘 끝까지 닿을 수 있을까
        이렇게 wow wow wow wow wow
        여린 날개가 힘을 낼 수 있을까
       
        그래 그리 쉽지는 않겠지
        나를 허락해 줄 세상이란
        손쉽게 다가오는 편하고도 감미로운 공간이 아냐
        그래도 날아 오를 거야
        작은 날개 끝에 꿈을 담아
        조금만 기다려 봐
        Oh my love
       
        나비처럼 날아가볼까
        일렁거리는 바람에 실려
        이런 느낌을 언제나 느낄 수 있을까
        마음 속을 좁혀오는 사소한 일은 신경 쓰지 마
        지금 이대로 날아가 모두 잊으면 돼
       
        어떻게 wow wow wow wow wow
        하늘 끝까지 닿을 수 있을까
        이렇게 wow wow wow wow wow
        여린 날개가 힘을 낼 수 있을까
       
        그래 그리 쉽지는 않겠지
        나를 허락해 줄 세상이란
        손쉽게 다가오는 편하고도 감미로운 공간이 아냐
        그래도 날아 오를 거야
        작은 날개 끝에 꿈을 담아
        조금만 기다려 봐
        Oh my love
       
        그래 그리 쉽지는 않겠지
        나를 허락해 줄 세상이란
        손쉽게 다가오는 편하고도 감미로운 공간이 아냐
        그래도 날아 오를 거야
        작은 날개 끝에 꿈을 담아
        조금만 기다려 봐
        Oh my
       
        그래 그리 쉽지는 않겠지
        나를 허락해 줄 세상이란
        손쉽게 다가오는 편하고도 감미로운 공간이 아냐
        그래도 날아 오를 거야
        작은 날개 끝에 꿈을 담아
        조금만 기다려 봐
        Oh my love

        </pre>
    </details>


</body>
</html>



이런식으로 노래제목 - 번호랑 쭉 리스트 나열하고 원하는 노래 누르면 해당하는 아이디 맞춰서 하이퍼링크로 내려가게끔 해서 맞는 가사 보게끔 해봤는데요

이제 틀은 잡았는데 이걸 양산을 해야되는데 혹시 이런거 함수로 구현은 못할까요?


예를들어서 


    <details id="아이디 매개변수">
        <summary>제목 매개변수</summary>
        <pre>
가사 매개변수
        </pre>
    </details>


이런식으로 함수화 해서 함수 호출해서

뭐 예를들어


sing_list(list2,"소주한잔"," 대충 소주한잔 가사")


이런식으로 호출하게끔여.. 여기는 자바스크립트의 영역인가여? 지금 html이랑 css만 대충 알고 맨땅에 헤딩중이라.. ㅎㅎ