HTML, CSS, JS 활용 - 20 ~ 23강

20강 - 멀티 숫자 카운터, 제이쿼리 each

MDN - 삼항연산자

parse(바꾸다)Int(정수) -> 정수로 바꾸겠다.

CODEPEN - 1부

CODEPEN - 2부

CODEPEN - 3부

https://codepen.io/phyno118/pen/ZYpLxmw 

 

[html]

<!-- 제이쿼리 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<div class="box-count box-1">
  <span class="box-count__minus">-</span>
  <span class="box-count__num">10</span>
  <span class="box-count__plus">+</span>
</div>

<div class="box-count box-2">
  <span class="box-count__minus">-</span>
  <span class="box-count__num">10</span>
  <span class="box-count__plus">+</span> 
</div>

<div class="box-count box-3">
  <span class="box-count__minus">-</span>
  <span class="box-count__num">10</span>
  <span class="box-count__plus">+</span>   
</div>

<div class="box-count box-4">
  <span class="box-count__minus">-</span>
  <span class="box-count__num">10</span>
  <span class="box-count__plus">+</span>  
</div>

 

[css]

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box-count {
  border: 10px solid black;
  padding: 20px;
  font-size: 2rem;
  font-weight: bold;
  user-select: none;
}
.box-count__minus,
.box-count__plus {
  cursor: pointer;
}

 

[js]

console.clear();

// $('.box-count').each(function(index,node)
$(".box-count").each(function (_, node) {
  //엘리먼트 들어갈 때 $표시가 들어가는 건 필수가 아니지만 관례이기에 넣는 것이다.
  const $boxCount = $(node);

  const $btnMinus = $boxCount.find(".box-count__minus");
  const $btnPlus = $boxCount.find(".box-count__plus");
  const $num = $boxCount.find(".box-count__num");

  $btnMinus.click(function () {
    const num = parseInt($num.text());
    // 조건 ? T : F ;
    const newNum = num - 1 >= 0 ? num - 1 : 0;
    $num.text(newNum);
  });

  $btnPlus.click(function () {
  const maxNum = 10;
  const num = parseInt($num.text());
  // 조건 ? T : F ;
  const newNum = num + 1 <= maxNum ? num + 1 : maxNum;
  $num.text(newNum);
  });
});

// $(".box-1__minus").click(function () {
//   const num = parseInt($(".box-1__num").text());
//   // 조건 ? T : F ;
//   const newNum = num - 1 >= 0 ? num - 1 : 0;
//   $(".box-1__num").text(newNum);
// });

// $(".box-1__plus").click(function () {
//   const maxNum = 10;
//   const num = parseInt($(".box-1__num").text());
//   // 조건 ? T : F ;
//   const newNum = num + 1 <= maxNum ? num + 1 : maxNum;
//   $(".box-1__num").text(newNum);
// });

동영상

2603, HTML, CSS, JS 활용, 멀티 숫자 카운터, 제이쿼리 each

 

21강 - tilt.js 사용법

tilt js

https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery.min.js

GIT - tilt js

CODEPEN

[html]

<!-- 제이쿼리 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<!-- tilt js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery.min.js"></script>

<div class="js-tilt">
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQQb0DK9CHyu-Pl9HzqXctd9xuWj0mnEKQCBw&s.jpg" alt="">
</div>

[css]

 

[js]

$('.js-tilt').tilt({
  scale: 1.2,//hover 시 확대 비율
  maxTilt: 15,// 기울기 각도 설정
  speed: 40,// 애니메이션 속도 
  grare: false, //반사광
  reset: false // 마우스가 벗어났을 때 제자리로 돌아갈지 여부
})

동영상

2603, HTML, CSS, JS 활용, tilt.js 사용법

22강 - 무한하게 이어지는 marquee

marquee

demo

marquee animation codepen

CODEPEN

CODEPEN

6개가 다 맞아떨어져야지 완성이 된다. 

1. 글자 길이 + 글자 간격

2. 애니메이션 이동 거리

3. 텍스트 복사

4. 컨테이너 width값

5. 속도, 시간

6. letter-spacing / gap

 

 

[html]

<div class="marquee">
  <div class="marquee-track">
    <span>Lorem ipsum dolor sit amet consectetur adipisicing elit.</span>
    <span>Lorem ipsum dolor sit amet consectetur adipisicing elit.</span>
    <span>Lorem ipsum dolor sit amet consectetur adipisicing elit.</span>
    <span>Lorem ipsum dolor sit amet consectetur adipisicing elit.</span>

    <!-- 끊김 방지용 복제 -->
    <span>Lorem ipsum dolor sit amet consectetur adipisicing elit.</span>
    <span>Lorem ipsum dolor sit amet consectetur adipisicing elit.</span>
    <span>Lorem ipsum dolor sit amet consectetur adipisicing elit.</span>
    <span>Lorem ipsum dolor sit amet consectetur adipisicing elit.</span>
  </div>
</div>

 

[css]

.marquee {
  width: 500px;
  overflow: hidden;
  white-space: nowrap;
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 30s linear infinite; /* ← 속도 조절 */
}

.marquee-track span {
  padding-right: 24px; /* 문장 사이 간격 */
  flex-shrink: 0;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

동영상

2603, HTML, CSS, JS 활용, 무한하게 이어지는 marquee

 

23강 - 다크모드 만드는 방법

 

css filter

Arrow Function vs 일반 함수

// 일반 함수
$('.btn').click(function() {
  console.log(this);
});
// this = 클릭된 요소

// arrow function
$('.btn').click(() => {
  console.log(this);
});
// this = 바깥 scope

정리
- 간단한 콜백 → arrow function
- 이벤트 / this 필요 → function

CODEPEN

 

[html]

<!-- 제이쿼리 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<div><button class="btn-toggle-theme">테마토글</button></div>

<div>
  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aut ipsam commodi reprehenderit incidunt in facere nisi explicabo necessitatibus, unde voluptatum inventore omnis excepturi minus harum beatae placeat labore eaque. Odio?</div>

<div class="color-primary">
  안녕 반가워 :)
</div>

 

[css]

/* font */
@font-face {
    font-family: 'OngleipParkDahyeon';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2411-3@1.0/Ownglyph_ParkDaHyun.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
}
/* 폰트 적용 */
html > body,
html > body input,
html > body button,
html > body textarea {
  font-family: "OngleipParkDahyeon";
}

/* 테마시작 */

/* 테마 light */
:root {
  --background-color: #fff;
  --text-color: #222;
  --primary-color: #42c2f5;
}

/* 테마 dark */
:root.dark {
  --background-color: #525252;
  --text-color: #fcfcfc;
  --primary-color: #42c2f5;  
}

/* 테마 적용 */
:root {
  color: var(--text-color);
  background-color: var(--background-color);
  transition: all .5s;
}

.color-primary {
  color: var(--primary-color);
}

:root.dark .color-primary {
  filter: brightness(150%);
}

 

[js]

// //버전 1
// $('.btn-toggle-theme').click(function() {
//   let $root = $(':root');
//   if($root.hasClass('dark')) {
//     $root.removeClass('dark');
//   } else {
//     $root.addClass('dark');
//   }
// });

// //버전 2
// $('btn-t0ggle-theme').click(function() {
//   $(':root').toggleClass('dark');
// });

//버전 3
$('.btn-toggle-theme').click(() => $(':root').toggleClass('dark'));

 

동영상

2603, HTML, CSS, JS 활용, 다크모드, 폰트, arrow function, css 변수