이 글은 인프런의 "HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)" 강좌를 들으며 정리한 내용이다.

함수

어떤 동작을 했을 때? = 함수

• click
  ex) 보이기 버튼 누르면 박스 나타내기, 감추기 버튼 누르면 박스 감추기
• mouseenter/mouseleave
  ex) 보이기/감추기 버튼 위에 마우스를 올려놓으면 박스 나타내기, 마우스 치우면 박스 감추기

메서드

어떻게 실행될 것인가? = 메서드

• 이펙트 메서드
  • hide()
  • show()
  • toggle() : hide() + show()
  • slideDown()
  • slideUp()
  • slideToggle()
• 클래스 제어 메서드
  • addClass()
  • removeClass()
  • toggleClass()
    ex) 박스 위에 새로운 박스를 지정한 Class 넣거나 빼기
• 요소 탐색 메서드
  • children()
  • siblings()
    ex) 마우스가 메뉴박스 위에 올라가면 메뉴창이 slideDown되며 보여지고, 마우스가 빠지면 다시 메뉴창이 slideUp하며 올라옴
    ex) 메뉴창의 여러 버튼 중 하나 선택 시 색깔 바뀌고 다른 버튼은 색깔 사라짐