개발 공부 기록하기

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

프밍/CSS

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

태영(泰伶) 2022. 12. 31. 18:04

transition과 animation을 다루었던 이번 단원 마무리 문제 2가지.

 

문제 1.

책에서 제공된 코드를 따라 써보는데 반복되는 부분이 있길래

예전에(?) Udemy 강의에서 배운 Emmet을 활용해봤다.

>는 자식 요소, 온점(.)은 클래스 선택자, * 표시는 반복 횟수

 

<!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: 0px 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: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>

↓

문제에서 제시된 위의 코드에

① 트랜지션 진행 시간을 0.5초로 지정.

② 트랜지션 대상은 all로 지정. (default값이니 안 써도 OK.)

③ 트랜지션 함수는 ease-in으로 지정.

 

을 적용하는 것이 미션이다.

↓

영상이 너무 짧아서 사실 위의 제시된 문제와 큰 차이를 못 느끼겠다🤣

이런.. 답안은 다 통합해서 작성했다...ㅋㅋㅋ;;;

 

 

문제 2.

<!DOCTYPE html>
   <html lang="ko">
      <head>
         <meta charset="UTF-8" />
         <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;
            }
         </style>
      </head>
      <body>
         <div id="container"><img src="images/bear.jpg" alt="곰인형 사진"></div> 
      </body>
   </html>

↓

 

위의 코드에

① Y축을 기준으로 360° 회전.

② 입체감이 느껴지도록 perspective 속성 200px로 지정.

③ 변형 함수 rotateY() 사용.

④ 키프레임은 시작, 중간, 끝 지점 이렇게 3개로 지정.

 

을 적용하는 것이 미션이다.

 

문제에 몇 번을 돌리라던지, 몇 초동안 돌리라던지 말이 없어서

상당히 헤맸다...

 

ㅠㅠ역시 공부할 때랑 실제로 해보는거랑 다른가보다..

 

아무튼!

기어코 해냈따!!!

의지의 한국인!!

 

문제에서 몇 초 동안 돌리라는 말이 없길래 내 맘대로 10초로 설정했다!

답지에 적혀있는 2.5초는 너무 곰돌이가 팽팽 돌아서 눈 아프다..ㅎ...

 

↓

 

 

 

끝^^

저작자표시 비영리 변경금지

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

Section 7. CSS 선택자의 세계(3)  (1) 2023.01.04
Section 7. CSS 선택자의 세계(2)  (1) 2023.01.01
DAY 28. CSS 애니메이션  (1) 2022.12.30
DAY 27. 트랜지션(transition)  (1) 2022.12.25
Section 7. CSS 선택자의 세계(1)  (0) 2022.12.21
'프밍/CSS' Related Articles more
Comments