개발 공부 기록하기

DAY 25. 단원 마무리 문제 풀기 본문

프밍/CSS

DAY 25. 단원 마무리 문제 풀기

태영(泰伶) 2022. 12. 3. 18:26

CSS 고급 선택자를 다루었던 이번 단원 마무리 문제 2가지.

 

 

문제 1.

위 코드로 만들어진 html 문서에 있는 이미지 중 첫 번째 이미지의 테두리 스타일을 수정하는 것이 미션이다.

 

<style> 안에 내가 쓴 답은

img:first-of-type {
      border: 2px solid #f00;
}

 

결과는

성공ㅎㅎ

 

 

 

 

 

 

문제 2.

<!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:610px;
               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;
            }
            .top-menu li a:visited {
               color:black;
            }
         </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>

위의 코드로 된 html 문서에

① 메뉴6의 오른쪽 테두리 삭제

② 메뉴 전체 너비 610px에서 605px로 줄이기

③ 메뉴1~5에 마우스 포인터 올리면 배경색 #555, 글자색 #fff로 바뀌도록 만들기

④ 메뉴6에 마우스 포인터 올리면 배경색 #b30000, 글자색 #fff로 바뀌도록 만들기

 

네 개의 조건을 적용하는 것이 미션이다.

 

 

① ~ ④에 대해 내가 작성한 답은

위와 같다.

(하얀색 음영을 넣은 부분이 내가 손을 댄 곳들이다.)

 

 

결과는

두 이미지 모두 마우스 포인터를 두고 캡처한 사진이다.

 

 

 

 

 

 

내용 학습을 할 때는 다루어지지 않았던

 

'가상 클래스의 중복'

li:not(:last-of-type) a:hover {
   background-color: #555;
   color: #fff;
}

 

어떤 것을 제외(:not)하는지, 제외하려는 대상을 괄호 안에 적어주었다..!!

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

'프밍 > CSS' 카테고리의 다른 글

Section 6. CSS 기초(2)  (1) 2022.12.12
Section 6. CSS 기초(1)  (0) 2022.12.04
DAY 25. 가상 요소  (0) 2022.12.03
DAY 24. 가상 클래스  (1) 2022.12.03
DAY 23. 속성 선택자  (1) 2022.11.27
'프밍/CSS' Related Articles more
Comments