jQuery / .animate({}) 애니메이션 설정

$("#hi").on("click", function () {
  $("#hi").animate({ marginTop: "100px", marginLeft: "100px" }, 1000);
});

• animate({ css설정 , css설정 })
  • css설정을 여러 개를 쓸 때는 ,로 구분한다.
• 작동 시간도 설정할 수 있음
  • animate({ css설정 , css설정 },1000)
  • 1000 -> 1초
  • 반드시 {}괄호 밖에 시간을 입력해야 한다.
• 원리
  • 왼쪽에 빈 공간을 만든다.
  • 오른쪽으로 이동하는 것처럼 보인다.

---

UI / css position: fixed; 가로, 세로설정했는데 div의 크기가 재대로 변하지 않을때

position: fixed;

---

css margin-left: -150px; div를 왼쪽으로 이동시키기

//첫번째 방법
margin-left: -150px;

//두번째 방법
transform: translateX(-150px);

---

UI / js로 유사 slideDown 기능 만들기 / 안보였던 메뉴가 버튼클릭하면, 오른쪽으로 나오게 하기

• css핵심
  • position: fixed;
    • css 폭과 길이가 적용되도록
  • margin-left: -150px;
    • 왼쪽으로 150px 이동시켜서 안보이도록 했음

.left-menu {
  width: 150px;
  height: 100%;
  background-color: black;
  color: white;
  position: fixed;
  margin-left: -150px;
}

<div class="left-menu">
  <p>Menu Title</p>
</div>

• js핵심
  • 버튼클릭하면 메뉴에 애니메이션 설정하였음
    • margin-left를 0px로 변경시키는 기능을 함으로써 화면에 메뉴가 보이게 됨

$("#show-menu").on("click", function () {
  $(".left-menu").animate({ marginLeft: "0px" });
});

• 결론
  • div를 이동시켜서 화면에 안보이도록 함
  • 이벤트에 .animate()설정하여 margin을 0px로 변경시켜서 숨긴 div보이도록 하기

---

UI 만들기

• 요약
  • 만든다.
  • 숨긴다.
    • class 따로 만들고, display: none; 넣음
      • div를 꾸미는 class랑 숨기는 class는 따로임
  • 이벤트 동작하면, 보이게 만들기
    • js
      • class를 넣거나 뺀다.
    • jQuery
      • show() hide() slideDown()등등 이용

---

jQuery 함수 연결하기 스킬

$(".left-menu").show().animate({ marginLeft: "0px" });

• 원리
  • .show()실행되고 .animate({ marginLeft: "0px" })된다.

---

UI / 구버전 animation 만들기

• 애니메이션 만들기
  • 옛날 방식
    • 자바스크립트로 변화를 준다.
    • 속도가 느리다.
  • 변화 전 모습 만들기
    • css로 margin-left: -100px margin 한방향으로 -픽셀을 설정하여 화면에서 숨기기
  • 변화 후 모습 만들기
    • 이벤트 설정
    • .animate({margin-left: "-100px"}) animate()함수사용하여 설정했던 margin을 없애서 화면에 UI를 보이게 만들기

---

UI / 신버전 animation 만들기

• 애니메이션 만들기
  • UI를 꾸미는 css에 transition: all 1s를 설정한다.

.black-background {
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  z-index: 5;
  position: fixed;
  transition: all 1s;
}

• 클래스를 만들어서 transform:을 설정하고
• UI에 클래스를 넣어서 모습을 변화시킨다.

.slide-down {
  transform: translateY(-1500px);
}

<div class="black-background slide-down"></div>

• 이벤트를 설정하고, 클래스를 입력하거나, 제거하는 방식으로 모습의 변화를 준다.

$(".login-btn").on("click", function () {
  $(".black-background").removeClass("slide-down");
});

$("#close-login").on("click", function () {
  $(".black-background").addClass("slide-down");
});

---

UI / 프로의 애니메이션 팁 첫번째

• 결론 : 변화는 trasform:으로 한다.
• 변화 전 모습 설정시 하지말야아하는 css
  • margin
  • width
  • height
  • position
  • left
  • right
• 변화 전, 후 모습 설정시에 써야할 것
  • trasform:
    • 여러가지 기능이 있다.
      • 이동
      • 회전
      • 크기 변경

---

UI / 프로의 애니메이션 팁 두번째

• transform:은 빼서 class를 따로 만들어야 한다.
  • 왜냐하면, 해당 class를 넣거나 빼거나에 따라 모습이 변하기 때문이다.
    • 중요한 점은 transition: all 1s은 div를 꾸미는 css에 있어야 하고 transform: translateY(-1500px);만 따로 빼서 class를 만든다.

.slide-down {
  transform: translateY(-1500px);
}

---

jQuery .hasClass() class가 있는지 없는지 확인

if ($(".left-menu").hasClass("slide-right")) {
  $(".left-menu").removeClass("slide-right");
}

• .left-menu에 slide-right class가 있는지 확인
  • 있으면 동작문을 실행한다.
• 자바스크립트에서도 이와 같은 기능이 있다
  • classList 개념

---

Javascript 정규식과 문자열 검사

/ab/.test('abcde')

• 의미 : 'abcde'문자열안에 'ab'문자열이 포함되어 있나요?
• 정규식이란?
  • /ab/

---

Javascript 이메일 정규식 영어로 검색하는 방법

email regular expression

---

Javascript 정규식 문법

• [A-z]
  • 왼쪽에서부터 오른쪽까지 범위를 검사한다.
    • 문자열에 알파벳이 있으면 true
    • 대문자 A에서 소문자 z까지

/[A-z]/.test('abcdesdfrs')

• \S
  • 문자가 있으면, true
    • 특수문자도 가능

/\S/.test('ㄱ')

• \S@
  • 문자옆에 @가 있으면, true
  • s@처럼 문자 한 개 옆에 @가 있는지 체크한다.

/\S@/.test('s@')

• \S+@
  • 문자 여러 개이후에 @오면, true
    • 단, 문자 한 개이후에 @도 , true

/\S+@/.test('sasdasdasdas@')

• .
  • .이 있으면, true

/\./.test('sas.dasdasdas@')

---

Javascript 이메일 정규식(야메 & 진짜)

• 내가 만들어본 이메일 정규식

/\S+@\S+\.\S+/

• 진짜 이메일 정규식

/^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i;