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

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

Dec 25, 2023

Contents

quiz-1.html


<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>연습문제 1</title>  
  <style>
    img {
      margin-right:50px;
      border:1px solid #ccc;
      box-shadow: 2px 2px 5px #ccc;
    }
    body :first-child{
      border: 2px solid #f00;
    }
    /* 가상 클래스를 사옹하여 첫번째 이미지 선택, 테두리 변경 */

    /* img :first-of-type{
      border: 2px solid #f00;
    } */
    
  </style>
</head>
<body>
  <img src="images/1.jpg" alt="">
  <img src="images/2.jpg" alt="">
  <img src="images/3.jpg" alt="">
</body>
</html>

result

quiz-2.html


<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <title>연습문제 2</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;
    }
    /* 메뉴 전체 너비 605로 줄이기 */

    .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;
    }

    .top-menu li a:visited {
      color: black;
    }

    /* .top-menu li:last-of-type{
      border-right: none;
    } */
    .top-menu :last-child {
      border-right: none;
    }
    /* 메뉴6의 오른쪽의 테두리 삭제 */

    .top-menu li:not(:last-child) a:hover{
      background-color: #555;
      color: #fff;
    }
    /* 메뉴6을 제외한 나머지 항목에서 a 가 hover시에 배경색, 글자색 변경 */

    .top-menu li:last-child a:hover{
      background-color: #b30000;
      color: #fff;
    }
    /* 메뉴 6 hover 시에 배경색, 글자색 변경 */
    
  </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>