잡동사니에도 사랑을

[21.09.23]exam01(06_cssDecorate) - 본문

JAVA_EE/CSS

[21.09.23]exam01(06_cssDecorate) -

luvforjunk 2021. 9. 23. 22:00
728x90
반응형

<!DOCTYPE html>

<html>

<head>

   <meta charset="UTF-8">

   <title>Insert title here</title>

   <style type="text/css">

      #menubar{

         background: olive;

      }

     

      #menubar ul{ /* menubar 의 안에 있는 ul태그 */

         margin: 0;

         padding: 0;

         width: 570px;

      }

     

      #menubar ul li{

         display: inline-block;

         list-style: none;

         padding: 0px 15px; /* top&bottom left&right */

      }

     

      #menubar ul li a{

         color: white;

         text-decoration: none; /* 밑줄 없애기 */

      }

     

      #menubar ul li a:hover{

         color: violet;

      }

   </style>

</head>

<body>

   <div id="menubar">

      <ul>

         <li><a href="#">Home</a></li>

         <li><a href="#">Espresso</a></li>

         <li><a href="#">Capppuccino</a></li>

         <li><a href="#">Cafe Latte</a></li>

         <li><a href="#">F.A.Q</a></li>

      </ul>

   </div>

</body>

</html>

 

결과창

728x90
반응형

'JAVA_EE > CSS' 카테고리의 다른 글

[21.09.23]exam03(06_cssDecorate) -  (0) 2021.09.23
[21.09.23]exam02(06_cssDecorate) -  (0) 2021.09.23
[21.09.17] practice07(css) - inline block 활용  (0) 2021.09.17
[21.09.17] practice06(css) - 마우스 올려 카드 뒤집기(:hover 활용)  (0) 2021.09.17
[21.09.17] practice05(css) - id속성, class속성 활용  (0) 2021.09.17
'JAVA_EE/CSS' Related Articles more