완성본을 보고 있습니다.

Question

아직 1회차로 정주행 하고 있습니다.

완성본으로 모바일반응형으로 화면 전환하여 트리거를 클릭하여 .active를 넣어준 후 다시 클릭해 빼준 후, 다시 웹화면으로 돌아오면, .gnb와 .sns가 사라져 있습니다.

새로고침하면 다시나오는데, 일시적인게 아니고 계속그렇습니다.

제 생각에는

$('.trigger').click(function(){
            $(this).toggleClass('active')
            $('.gnb, .sns').toggle()
       })

여기에서 단순히

$('.gnb, .sns').toggle()

이렇게만 하면 .gnb와 .sns 라는 클래스가 아예 들어갔다 사라졌다를 하기 때문에, 웹화면에도 영향을 미치는 것으로 판단됩니다.

물론 이 파트를 플렉스 관련하여 배우는 거라 이 부분이 그렇게 중요하지 않고 넘길 수 있는 부분이지만, 조금 더 확실히 하고 싶었습니다.

다음 영상에서 이부분에 대해 언급을 해주셨으면 이 질문을 삭제하겠습니다. 괜한 또 오지랖인것 같아서.

그래서 선생님께서 그동안 가르쳐주신걸 기초로 했을 때,

CSS 의 반응형 즉 미디어쿼리 파트에

.gnb.active,
  .sns.active {
    display: block;
 }

이 부분을 추가하고,

제이쿼리를

$('.trigger').click(function(){
            $(this).toggleClass('active')
            $('.gnb, .sns').toggleClass('active')
       })

이렇게 수정해 보니 잘 작동되었습니다.

이 방법도 괜찮은가요?

Answer

영재님~ 상세한 분석과 답변 고맙습니다.

사실 제가 방법을 찾아서 올려야 하는데... 이 영상 파트인 모바일 네비게이션을 플렉스로 제작할 수 있다 라는 것을 보여드리는게 목적이어서 제가 크게 신경 쓰지 않은 부분이 있습니다.

플렉스나 그리드로 만들었어도 모바일 네비게이션은 기존 방식 곧, float아 포지션으로 상세하게 만들기 때문에 제가 좀 간과 했네요.

영재님이 주신 방법으로 저도 해보겠습니다. 항상 열심히 하시고 조언 주시는 부분 감사드립니다~^^