프로젝트 및 실습/웹 따라 만들기

실무실습) sitemap 따라 만들기 (진행중)

takudaddy 2020. 5. 19. 05:20

 

 

html 엄청 복잡하다

@_@

 

 

오늘은 일단 여기까지

 

 

 

 

 

hover 했을때 색이 변하도록

 

 

 

 

 

 

html

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>sitemap</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="default.css">
  <link rel="stylesheet" href="style.css">
</head>

<body>

<div class="sitemap">
    <div>
       <h2>Service</h2>
        <ul>
           <li>
           <a href="#a">Professional Service</a>
           <ul>
               <li><a href="#">Design Thinking</a>
               <li><a href="#">Strategy &amp; Planning</a>
               <ul>
               <li><a href="#">IT Strategy / Operation Consulting</a></li>
               <li><a href="#">Enterprise Solution Implementation Consulting</a></li>
               <li><a href="#">SAP Implementation</a></li>
               <li><a href="#">SAP Upgrade</a></li>
               <li><a href="#">SAP Migration</a></li>
               </ul>
               </li>
               </ul>
            </li>
                <li>
                <a href="#">Solutions</a>
                <ul>
                <li><a href="#">Enterprise Application Development</a></li>
                <li><a href="#">Side-by-Side Extension</a></li>
                <li><a href="#">System Implementation</a></li>
                </ul>
             </li>
             <li>
                 <a href="#">Managed Service</a>
                 <ul>
                 <li>
                     <a href="#"></a>
                     <ul>
                     <li><a href="#"></a></li>
                     <li><a href="#"></a></li>
                     <li><a href="#"></a></li>
                     </ul>
                 </li>
                 <li><a href="#"></a></li>
                 <li><a href="#"></a></li>
                 <li><a href="#"></a></li>
                 </ul>
             </li>
        </ul>
    </div>
</div>



</body>
</html>

 

 

 

 

 

css

 

body {padding: 50px;}
.sitemap h2 { padding: 0 0 29px; color:#c2c1bf; font-size: 18px; line-height: 100%;}
.sitemap a { font-size: 13px; color: #55524d;}
.sitemap > div:hover * { color:#c2c1bf;}
.sitemap > div:hover h2 { color: orange;}
.sitemap > div > ul > li > ul > li > ul a { font-size: 11px;}
728x90
저작자표시