uiux 24일차

-이메일 입력상자

<div class="form-1" style="display:flex;">
<span>이메일: </span>
  <div>
    <input type="email" placeholder="이메일을 입력해주세요">
   <div class="need_input">이메일을 입력해주세요</div>
    <div class="invalid">형식이 올바르지 않습니다</div>
  </div>
</div>

placehold
focus 마우스로 선택됐을때
입력상자에 쓸 때 '이메일을 입력해주세요' 에서 '형식이 올바르지 않습니다'로 바뀐다

~div 모든 동생 선택
+div바로 아래 동생 선택

---

-password 문자 안보이다가 버튼을 누르면 보여주기

자동으로 만들어주며 ,입력해도 뭘 적었는지 안보여준다
그래서 부모가 누구고 동생이 누구인지 알아야 한다
찾아서 가려주고 나타내주어야하는..
(codepen 보는게 빠를듯)

---

-라이브러리 Masonry

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.4/imagesloaded.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css">

쓰기 위한 라이브러리 링크들
(제이쿼리랑 테일윈드 섞여있음)

 <div class="container mx-auto masonry-grid">
        <div class="grid-item">
            <a href="#">
                <img src="https://picsum.photos/id/237/200/300" alt="">
            </a>
            <a href="#">
                제목1
            </a>
        </div>

masonry-grid 랑 grid-item 꼭 써야함

---

-smooth-scrollbar
스크롤바 커스텀하기

smooth-scrollbar 라이브러리 갖고오고
js에 필수로 입력해야하는 것이 있다(호출비슷
그런다음 css에서 커스텀을 하는데 color picker로 스크롤바 색깔을 지정할 수 있다
width 값, height 값 정해야함

---

통통튀는 밑줄

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

왔다갔다하는 것처럼 보이게 설정

animation-timing-function: linear; 속도감 균일

그 외는 전에 것 복습

---

-aos 라이브러리

<div data-aos="fade-up" data-aos-once="true" >FADE</div>

한 번만 움직이게 하기

제이쿼리
// setTimeout(function(){
//   AOS.init()
// }, 4000);

시간 조정

$('body').imagesLoaded(function(){
  AOS.init();
})

자연스럽게 조정

 $('body').imagesLoaded(function(){
  // $('.loading').css('display','none');
  // $('loading').hide();
  $('.loading').remove();
  AOS.init();

로딩중이 떴다가 언제 사라져야할지 정할때
방법 3가지

-imgur
이미지의 파일 용량이 너무 크거나 해상도가 높을 때 이미지를 호스팅해서 쓰면 됨