[Do it! HTML+CSS+자바스크립트 웹 표준의 정석] 11장 연습문제

Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - 11장 연습문제 2개

Dec 25, 2023

Contents

quiz-1.html


<!DOCTYPE HTML>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>연습문제 1</title>  
  <style>
    * {
      box-sizing: border-box;
    }
    .top-menu {
      margin:50px auto;
      padding:0;
      list-style:none;
      width:605px;
      height:35px;
      box-shadow:0 3px 4px #8b8b8b;
      background-color:#dadada;
    }
    .top-menu li {
      float:left;
      border-right:1px solid #929292;
    }
    .top-menu li a:link{
      color:black;
      text-decoration:none;
      text-align:center;
      display:block;
      width:100px;
      height:35px;
      line-height: 35px;
      transition: all 0.5s ease-in;
    }
    /* 트랜지션 진행 시간 0.5초, 대상 all, 함수 ease-in 설정 */
    
    .top-menu li:last-child {
      border-right:none;      
    }
    .top-menu li:not(:last-child) a:hover {
      background-color:#555;
      color:#fff;
    }
    .top-menu Li:last-child a:hover {
      background-color:#b30000;
      color:#fff;
    }
  </style>
</head>
<body>
  <nav>
    <ul class="top-menu">
      <li><a href="#">메뉴1</a></li>
      <li><a href="#">메뉴2</a></li>
      <li><a href="#">메뉴3</a></li>
      <li><a href="#">메뉴4</a></li>
      <li><a href="#">메뉴5</a></li>
      <li><a href="#">메뉴6</a></li>
    </ul>
  </nav>
</body>
</html>

result

quiz-2.html


<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>연습문제 2</title>
	<style>	
		#container {
			width:200px;
			margin:30px auto;
		}
    img {
      border:1px solid #ccc;
      border-radius:50%;      
      box-shadow: 5px 5px 30px 2px #000;
			animation: rotate 3s infinite;
			/* animation 설정 */
    }
		@keyframes rotate{
			from{
				transform: perspective(200px) rotateY(0deg);
			}
			50%{
				transform: perspective(200px) rotateY(180deg);
			}
			to{
				transform: perspective(200px) rotateY(360deg);
			}
		}
		/* 입체감 부여, Y축으로 회전 */
	</style>
</head>

<body>
  <div id="container">
	  <img src="images/bear.jpg" alt="곰인형 사진">
  </div>
</body>
</html>