국비 지원 IT(웹앱개발) 취업반 강의 41일차 (HTML, CSS, JS)

See the Pen 3차메뉴 따로 빼서 작업(중간단계) by qBlackBirdp (@qBlackBirdp) on CodePen.

중간단계 메뉴 만들기 부터 시작한다. 클릭하면 변화하는 것 까지 만들었고 2차 메뉴가 존재한다면 눈에 보이는 것 까지는 됐는데 3차 메뉴를 제대로 볼 수가 없다. 그러니까 1차메뉴에서는 잘 작동 되는데 거기에서 자식인 ul li에서 동시 작동되면서 문제가 생긴다.

$(".menu-box-1 ul").click(function(){
    return false;
  })

따라서 만들어둔 기존 메서드에 해당 코드를 넣어서 부모에게는 영향이 가지 않도록 만들었다.

다음으로는 열어두고 또 열면 기존에 열었던 메뉴가 닫히지 않는 문제를 해결한다.

$this.siblings(".active").removeClass("active");

funtion안에 해당 코드 추가. siblings는 형제요소를 찾는 함수이다. 그러니까 형제들중 ative가 추가 된 것이 있다면 지워달라, 곧 열려있는 놈이 있다면 닫히게 해달라는 뜻이다. 아마 내가 출석하지 못했을 때 배웠던 것 같다.
그리고 여담으로 .을 붙히는 곳과 붙히지 않는 것 구분 잘 해야될 것 같다.

다음으로 3차메뉴까지 열고, 1차 메뉴를 닫고 다시열면 3차메뉴가 여전히 열려있는 문제를 해결한다.

$this.siblings(".active").find('.active').removeClass("active");

해당 코드도 위의 코드랑 결이 비슷한데 find를 써서 찾아 없애준다.

그래서 일단 완성된 js 전문을 보면 이렇다.

function MobileMenuBox1__init() {
  $('.menu-box-1 ul > li').click(function() {
    let $this = $(this);

    $this.siblings('.active').find('.active').removeClass('active');
    $this.siblings('.active').removeClass('active');

    if ( $this.hasClass('active') ) {
      $this.find('.active').removeClass('active');
      $this.removeClass('active');
    }
    else {
      $this.addClass('active');
    }
  });

  $('.menu-box-1 ul').click(function() {
    return false;
  });
}

MobileMenuBox1__init();

그래서 이걸 전의 프로젝트에 병합해주면 완성된다

See the Pen 반응형 모바일메뉴 탑바, 모바일 탑바 - 메뉴아이템 기존소스에 병합 by qBlackBirdp (@qBlackBirdp) on CodePen.

이렇게 완성이다.

다음으로는 다시 다른 걸 시작했다.

See the Pen 아코디언 메뉴 만들기. by qBlackBirdp (@qBlackBirdp) on CodePen.

여기 애니메이션을 추가하면되는데 클릭은 연발할 시 큐에 데이터가 쌓이면서 해당 명령을 다 처리하려는 문제를 stop()메서드로 해결해줬다.

See the Pen 아코디언 메뉴 만들기. 애니메이션 큐 제거 by qBlackBirdp (@qBlackBirdp) on CodePen.

jQuery Effect Methods

• show

  • 설명: 숨겨진 요소를 보여줍니다.
  • 구문: $(selector).show(duration, easing, callback)
  • 매개변수:
    • duration (선택): 효과의 지속 시간 (밀리초 또는 "slow", "fast").
    • easing (선택): 효과의 가속 곡선.
    • callback (선택): 애니메이션 완료 후 호출할 함수.

• hide

  • 설명: 요소를 숨깁니다.

  • 구문: $(selector).hide(duration, easing, callback)

  • 매개변수:

    • duration (선택): 효과의 지속 시간 (밀리초 또는 "slow", "fast").
    • easing (선택): 효과의 가속 곡선.
    • callback (선택): 애니메이션 완료 후 호출할 함수.

  • slideDown

  • 설명: 요소의 높이를 애니메이션으로 증가시켜 숨겨진 요소를 슬라이드 다운으로 보여줍니다.

  • 구문: $(selector).slideDown(duration, easing, callback)

  • 매개변수:

    • duration (선택): 효과의 지속 시간 (밀리초 또는 "slow", "fast").
    • easing (선택): 효과의 가속 곡선.
    • callback (선택): 애니메이션 완료 후 호출할 함수.

• slideUp

  • 설명: 요소의 높이를 애니메이션으로 감소시켜 요소를 슬라이드 업으로 숨깁니다.
  • 구문: $(selector).slideUp(duration, easing, callback)
  • 매개변수:
    • duration (선택): 효과의 지속 시간 (밀리초 또는 "slow", "fast").
    • easing (선택): 효과의 가속 곡선.
    • callback (선택): 애니메이션 완료 후 호출할 함수.

• fadeIn

  • 설명: 요소의 불투명도를 애니메이션으로 증가시켜 숨겨진 요소를 서서히 나타나게 합니다.
  • 구문: $(selector).fadeIn(duration, easing, callback)
  • 매개변수:
    • duration (선택): 효과의 지속 시간 (밀리초 또는 "slow", "fast").
    • easing (선택): 효과의 가속 곡선.
    • callback (선택): 애니메이션 완료 후 호출할 함수.

• fadeOut

  • 설명: 요소의 불투명도를 애니메이션으로 감소시켜 요소를 서서히 사라지게 합니다.
  • 구문: $(selector).fadeOut(duration, easing, callback)
  • 매개변수:
    • duration (선택): 효과의 지속 시간 (밀리초 또는 "slow", "fast").
    • easing (선택): 효과의 가속 곡선.
    • callback (선택): 애니메이션 완료 후 호출할 함수.

      jQuery Effect Methods

Method	Description	Syntax	Parameters
show	숨겨진 요소를 보여줍니다.	$(selector).show(duration, easing, callback)	- duration (optional): 효과의 지속 시간 (밀리초 또는 "slow", "fast"). - easing (optional): 효과의 가속 곡선. - callback (optional): 애니메이션 완료 후 호출할 함수.
hide	요소를 숨깁니다.	$(selector).hide(duration, easing, callback)	- duration (optional): 효과의 지속 시간 (밀리초 또는 "slow", "fast"). - easing (optional): 효과의 가속 곡선. - callback (optional): 애니메이션 완료 후 호출할 함수.
slideDown	요소의 높이를 애니메이션으로 증가시켜 숨겨진 요소를 슬라이드 다운으로 보여줍니다.	$(selector).slideDown(duration, easing, callback)	- duration (optional): 효과의 지속 시간 (밀리초 또는 "slow", "fast"). - easing (optional): 효과의 가속 곡선. - callback (optional): 애니메이션 완료 후 호출할 함수.
slideUp	요소의 높이를 애니메이션으로 감소시켜 요소를 슬라이드 업으로 숨깁니다.	$(selector).slideUp(duration, easing, callback)	- duration (optional): 효과의 지속 시간 (밀리초 또는 "slow", "fast"). - easing (optional): 효과의 가속 곡선. - callback (optional): 애니메이션 완료 후 호출할 함수.
fadeIn	요소의 불투명도를 애니메이션으로 증가시켜 숨겨진 요소를 서서히 나타나게 합니다.	$(selector).fadeIn(duration, easing, callback)	- duration (optional): 효과의 지속 시간 (밀리초 또는 "slow", "fast"). - easing (optional): 효과의 가속 곡선. - callback (optional): 애니메이션 완료 후 호출할 함수.
fadeOut	요소의 불투명도를 애니메이션으로 감소시켜 요소를 서서히 사라지게 합니다.	$(selector).fadeOut(duration, easing, callback)	- duration (optional): 효과의 지속 시간 (밀리초 또는 "slow", "fast"). - easing (optional): 효과의 가속 곡선. - callback (optional): 애니메이션 완료 후 호출할 함수.

제이쿼리 이펙트 메서드 라는 것인데 위와 같은 효과를 같고 있다. 만들어져있는 메서드기 때문에 알맞은 곳에 바로 사용하면 된다.

See the Pen 이펙트 메서드 써보기 by qBlackBirdp (@qBlackBirdp) on CodePen.

사용예제다.

https://cdpn.io/pen/debug/jOBjVXg 이렇게 보이게끔 만들어야하는데.()

See the Pen 메뉴에 해당하는 내용 클릭하면 보이게 하기.(텝 매뉴) by qBlackBirdp (@qBlackBirdp) on CodePen.

일단 이까지는 혼자 했다. 음 일단 내가 생각하는 문제점은 두가지가 있는데 아무것도 클릭하지 않았을 때, 아이템 1 내용이 보여야한다는 것과,(쓰면서 생각났는데 active클래스를 미리 쥐어주면 될 것 같다.) 디자인적 요소로 아이템을 클릭했을 때 선이 보이지 않는 것 정도? 올라간 시점에는 해결 됐을 수도 있다. 이걸 쓰면서 해결방법이 떠올랐다.
쓰면서 생각난 대로 했더니 얼추 다 됐는데 마지막으로 아이템2의 밑줄을 없애는걸 못했다..

그건 margin-bottom을 마이너스로 픽셀을 맞춰줘서 했다. 내 코드에 문제가 있는건지 -1px만 주면 되야되는데 위에서부터 1px이 내려앉아있는데 원인은 결국 못찾았다

아무튼 해당 코드는 아래에 있고, js또한 내가 쓴 조잡한 것이 아닌 강사님 코드를 참고해서 v3까지 만들어뒀다.

See the Pen 메뉴에 해당하는 내용 클릭하면 보이게 하기.(텝 매뉴 강사님 코드 참고) by qBlackBirdp (@qBlackBirdp) on CodePen.

수업은 이렇게 마무리 되었고 다음 시간에는 카카오증권 사이트 모작을 한다.