[2021/12/30]국비지원 CSS3 10-(6) 과제3 : 아코디언형 메뉴

아코디언형 메뉴

: a로 그럴싸 하게 흉내낼 수는 있으나 창 이동이 아니기 때문에 본래는 button 태그로 하는 게 맞고,
javascript와 onclick 등으로 구현해야 열고 닫고 둘 다 되는 아코디언형 메뉴를 만들 수 있음

작업내용

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>아코디언 메뉴</title>
    <style type="text/css">
        /* 밑에서 올라오게 하면서 p 나타내는 법 transition */
        *{padding:0;margin:0;}
        section{width:500px;padding:10px;border:1px solid red;background:#FFF;
                font-size:12px;line-height: 20px;color: #424242;
                font-family:Dotum,"돋움",sans-serif;}
        ul{list-style: none;}
        h1{font-size:20px;margin-bottom: 10px;text-shadow: 2px 2px 3px rgba(0,0,0,0.3);}
        h2{margin: 5px 0;font-size:14px;}
        h2 a{display:block;padding:10px;text-decoration: none;color:#000;
             text-shadow: 1px 1px 3px #cbcbcb;background:#cbcbcb;
             background:linear-gradient(#cbcbcb 0%,#b0b0b0 50%,#929292 100%);border-radius: 5px;
             font-size: 12px;font-weight: normal;}
        li:target>h2 a,h2 a:hover{color: #fff;text-shadow: 1px 1px 3px #cbcbcb;background:#68b0fe;
                                  background: linear-gradient(#68b0fe 0%,#479eed 50%,#258bde 100%);}
        p{padding-left:5px;height:0;overflow: hidden;transition:all 1s ease 0s;}
        li:target>p{height:100px;overflow: auto;}
    </style>
</head>
<body>
    <!-- 까먹으면 안 됨 : a 배경 무조건 display block -->
    <section>
        <h1>아코디언 메뉴</h1>
        <ul>
            <li id="a">
                <h2><a href="#a">HTML5</a></h2>
                <p>HTML5는 화면 상에서 그림을 그리는 등 더 많은 기능을 추가한 마크업 언어입니다. 
                    또한 HTML5는 단순히 마크업 언어로서의 기능 뿐만 아니라 자바스크립트를 사용해 프로그램을 만들 수 있는 API까지 포함하고 있습니다.</p>
            </li>
            <li id="b">
                <h2><a href="#b">CSS3</a></h2>
                <p>CSS는 웹 디자인이나 웹 개발에 있어서 핵심적인 요소입니다. 특히 현재 개발 중인 CSS3는 기존의 CSS에서는 
                    할 수 없던 여러 가지 효과를 쉽게 만들 수 있고 CSS3만으로도 간단한 애니메이션을 만들 수도 있고 멋진 내비게이션을 
                    만들 수 있기 때문에 더욱 주목을 받고 있습니다.</p>
            </li>
            <li id="c">
                <h2><a href="#c">API</a></h2>
                <p>HTML5에는 웹 애플리케이션 제작을 위한 API들이 다양하게 제시되고 있습니다. API를 이해하기 위해서는 
                    자바스크립트 문법 뿐만 아니라 DOM(Document Object Model)에 대한 기본 지식이 필요합니다.</p>
            </li>
        </ul>
    </section>
</body>
</html>

결과물

저작자표시 비영리 변경금지 (새창열림)

티스토리툴바