inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

플렉스(Flex) 반응형 웹사이트 포트폴리오(The World's Best Cities)

Flex UI 실전 제작(3) – 반응형 헤더 네비게이션(4)

완성본을 보고 있습니다.

203

Youngjae Choi

작성한 질문수 20

5

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

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

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

제 생각에는 

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

여기에서 단순히

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

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

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

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

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

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

.gnb.active,
  .sns.active {
    displayblock;
 }

이 부분을 추가하고,

제이쿼리를

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

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

이 방법도 괜찮은가요?

flex 반응형-웹

답변 1

1

코딩웍스(Coding Works)

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

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

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

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

가로스크롤

1

458

1

상위 태그 영역 무시 하는 방법

1

842

2

반응형 적응형 구분

2

802

2

flex가 적용되면 하위에 있는 인라인의 속성은?

1

359

1

슬릭 슬라이더 버튼

1

370

1

slick 모바일로 변환했을때..

1

607

1

x scroll 이 왜 생기는 걸까요?

1

870

1

영상 16분 field margin-left 문제 (다운로드 교재도 동일한 문제)

1

249

1

모바일에서 이미지 짤림 현상

1

2741

2

질문 있습니다

1

241

1

안녕하세요

1

259

1

모바일버전에서 스크롤이 생겨서요 ㅜㅜ

1

289

1

반응형 헤더 네비게이션 공부중인데요. 궁금한것이 있어서요.

1

387

2

슬라이딩 스크롤이 이상하게 먹혀요!

1

407

2

slick slider 하는데 패딩이 안먹혀요

1

764

2

제이쿼리 부드럽게 스크롤할때 제이쿼리에 밑줄오류가 있습니다.

1

317

1

혹시 이 강의 싸이트를 혼자의 힘으로 만들수 있으면 어느정도 실력정도 되나요?

1

250

1

소스랑 자료 다운로는 어디서 받을 수 있나요?

1

299

1

반응형 헤더 네비게이션 강의 질문있습니다.

1

203

1

그 반응형 질문 있습니다

1

225

1

질문드립니다 강사님

1

288

2

flex 레이아웃 배치 질문있습니다.

1

220

1

미디어쿼리 반응형 만들때 사이즈 질문있습니다.

1

201

1

인라인요소인 label 에 margin-bottom 이 되다니... 어렵습니다.

1

972

1