본문 바로가기
수업내용

[HTML, CSS with JS] 표정이 변하는 스마일 만들기_2022.05.26.THU

쿨키드 2022. 6. 1. 20:30
9th DAY
8th DAY에 갑자기 생각지도 못하게 mission을 받는데,,
이름하야 표정이 변하는 스마일 만들기

내가 만든 스마일과 오답풀이를 비교
내가 만든 스마일: 이렇게 복잡할 수 있다고?
선생님이 만든 스마일: 이렇게 간단할 수 있다고?

 

 

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="..//smile/css/smile.css">
    <script src="../js/jquery-1.12.4.min.js"></script>
    <script src="../smile/js/smile.js"></script>
</head>

<body>
    <ul class="smile">
        <li class="eye1"></li>
        <li class="eye1"></li>
        <li class="eye2"></li>
        <li class="mouth"></li>
    </ul>

</body>

</html>

<html>

 

body {
  width: 1000px;
  height: 1000px;
  background: antiquewhite;
}

.smile {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: #000;
}

ul .eye1 {
  position: absolute;
  top: 35%;
  left: 23%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 10%;
  height: 10%;
  border-top: 1px solid #fff;
  border-left: 1px solid #fff;
}

ul .eye1.on {
  position: absolute;
  top: 35%;
  left: 23%;
  transform: translate(-50%, -50%) rotate(225deg);
  width: 10%;
  height: 10%;
  border-top: 1px solid #fff;
  border-left: 1px solid #fff;
}

ul .eye2 {
  position: absolute;
  top: 35%;
  left: 73%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 10%;
  height: 10%;
  border-top: 1px solid #fff;
  border-left: 1px solid #fff;
}

ul .eye2.on {
  position: absolute;
  top: 35%;
  left: 73%;
  transform: translate(-50%, -50%) rotate(225deg);
  width: 10%;
  height: 10%;
  border-top: 1px solid #fff;
  border-left: 1px solid #fff;
}

ul .mouth {
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(225deg);
  width: 10%;
  height: 10%;
  border-top: 1px solid #fff;
  border-left: 1px solid #fff;
}

ul .mouth.on {
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 10%;
  height: 10%;
  border-top: 1px solid #fff;
  border-left: 1px solid #fff;
}

<css>

 

$(function () {
    $('.smile').on('click', function () {
        $('.smile li').toggleClass('on');
    })
})

<JavaScrip>

 

결과물 : http://127.0.0.1:5502/doc/position03.html

 

 

 

비교 들어간다.
선생님이 만든 스마일: 이렇게 간단할 수 있다고?

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/position05.css">
    <script src="../js/jquery-1.12.4.min.js"></script>
    <script src="../js/position05.js"></script>

</head>

<body>


    <ul class="smile">
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

</html>

<html>

body {
  background: #ff0;
}

.smile {
  position: absolute;
  /* position: relative, absolute, fixed 모두 기준이 된다 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 500px;
  background: #f00;
  border-radius: 50%;
}

/* 가운데 배열하는 공식
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); */

.smile > li {
  position: absolute;
  /* li가 포지션을 가지기 때문에 smile의 포지션이 기준이 됨 */
  width: 50px;
  height: 50px;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  transform: rotate(45deg);
}

.smile.active > li {
  transform: rotate(225deg);
}

.smile > li:nth-child(1) {
  top: 200px;
  left: 100px;
}
.smile > li:nth-child(2) {
  top: 200px;
  right: 100px;
}
.smile > li:nth-child(3) {
  bottom: 100px;
  left: 225px;
}

.top_banner .container {
  height: 50px;
  transition: 0.5s;
  overflow: hidden;
}

.top_banner .container.active {
  height: 0;
}
/* 높이를 */

<css>

 생각지도 못한 nth:child()
.....🚬.....

:nth child를 하면, 부모?부분에 이미 position값과 transform:rotate값을 줬기 때문에 또 적을 필요 없이 top과 left/right값을 주면 된다.



$(function() {
    $('.smile').on('click', function () {
    $(this).toggleClass('active')
    });

    
})

<JavaScript>

 

결과물 : http://127.0.0.1:5502/doc/position03.html

'수업내용' 카테고리의 다른 글

[HTML, CSS with JS] slick을 활용_2022.05.31.TUE  (0) 2022.06.01
[HTML, CSS with JS] 반응형_2022.05.23.MON  (0) 2022.06.01
[HTML, CSS with JS] position 폭파시켜보자_2022.05.26.THU  (0) 2022.06.01
[HTML, CSS with JS] 포지션을 이용한 움직이는 신발_2022.05.25.WED  (0) 2022.06.01
[HTML, CSS with JS] DK-steel 홈페이지를 만들어보자(연습용)_2022.05.23.MON ~ 2022.05.27.FRI  (0) 2022.06.01

'수업내용' Related Articles

티스토리툴바