2024.12.17 [html, css, javascript] html 실무 기능

📝  노트로 돌아가기

 

 

이전글 2024.12.16 [html, css]

다음글 2024.12.18 [html, css]

---

input 관련 참고하면 좋은 글

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

<input>: The HTML Input element - HTML: HyperText Markup Language | MDN

 

 

See the Pen input type by se.eun (@se-eun) on CodePen.

 

 

---

이메일 제출 형식__메세지출력이벤트

 

See the Pen email 형식 만들기 by se.eun (@se-eun) on CodePen.

 

 

function Form1__init(){
  $('.form-1 input[type="email"]').focus(function(){
    $(this).addClass('focused');
  })
}

Form1__init();

 

---

password 숨김/보임 이벤트

 

See the Pen password - 숨김/보임 by se.eun (@se-eun) on CodePen.

 

 

$('.box_1>.mode').click(function(){
  let $box1=$(this).parent();
  let $input=$(this).prev();
  
  if($box1.hasClass('text')){
    $box1.removeClass('text');
    $input.attr('type','password');
  }else{
    $box1.addClass('text');
    $input.attr('type','text');
  }
})

 

 

---

Masonry 라이브러리

핀터레스트처럼 화면 크기에 맞춰서 그리드맞춰주는 라이브러리

See the Pen 실무 팁 - Masonry 사용법 by se.eun (@se-eun) on CodePen.

 

 

---

smooth scrollbar custom

See the Pen Untitled by se.eun (@se-eun) on CodePen.

 

 

//css
html>body .scrollbar-thumb{
  background-color: #f20071;
}

//javascript
Scrollbar.init(document.querySelector('body'));

---

마우스를 올리면 hover 애니메이션

See the Pen hover 이벤트 by se.eun (@se-eun) on CodePen.

 

span:hover::after{
  animation-name: ani-1;
  animation-duration: .6s;
  animation-iteration-count: 1;
  animation-fill-mode: ease-in-out;
}

@keyframes ani-1{
  10%{
    width: 0;
  }
  40%{
    width: 100%;
  }
  80%{
    width: 85%;
  }
  100%{
    width: 100%;
  }
}

 

 

---

aos library 

https://michalsnik.github.io/aos/

AOS - Animate on scroll library

 

 

 

See the Pen Untitled by se.eun (@se-eun) on CodePen.