768 이상에서 모바일 메뉴 나오게 할려면
본문
그누 5.3을 이용하고 있는데
기본 모바일 메뉴를 변형하여 일반 페이지에 사용하고 있습니다.
768 살짝 넘으면 이렇게 두줄로 나와서 그러는데
768에서 920 사이즈에서 아래처럼 그누기본 모바일 메뉴가 나오게 할려면
어느 소스를 수정해야 할까요?
답변 3
제가 해당 페이지 URL도 모르고, 소스도 모르는 상태에서 질문하신 내용으로만 판단했을 때, 그누보드 기본 형태를 그대로 이용하시는 것처럼 보이는데요.
그누보드 기본 형태를 사용하고 계시다는 전제하에 답변 드립니다.
먼저 결론부터 말씀드리면, 현재 해당 홈페이지에서 가로값 변경에 따라 그누보드 기본 모바일 메뉴가 나오게 할 수 없습니다.
(결론에 대해 오해가 없으셔야 할 것이 미디어 쿼리로 모바일 소스 전체를 새로 작성하신다면 가능합니다. 다만 제가 파악한 질문 의도는 특정 가로값이 되었을 때, 큰 작업 없이 모바일용 기본 화면이 보여지면 좋겠다는 것으로 판단되며, 이에 대한 방법은 불가능 함을 말씀드립니다.)
이유 설명 드립니다.
그누보드는 기본적으로 PC와 모바일 소스를 구분하여 사용하고 있습니다.
그리고 PC와 모바일 형태를 각각 출력할 때, 브라우저의 가로값을 가지고 출력하지 않습니다.
php에서 접속기기 정보를 확인하여, 접속기기에 맞게 PC 또는 모바일 소스를 include 하여 해당화면을 출력해주는 것입니다.(참고로 파라미터 mobile 값으로 PC화면에서 모바일, 모바일 화면에서 PC화면 노출 가능)
그렇기 때문에 질문하신 의도와 같이 이미 PC 관련된 모든 소스에 대한 include가 끝난 상태에서 미디어쿼리를 사용한다고 해서 그누보드 기본 모바일 소스를 불러올 수 없습니다.(php는 서버사이드언어이기 때문에 브라우저에서 해석하는 CSS로 제어 불가능)
이와 관련하여 첨언하자면 그누보드의 기본 구조로는 가로값에 따라 형태가 변하는 반응형 홈페이지를 만들 수 없습니다.
혹시라도 그누보드로 반응형 페이지를 만들기 위해서는 config.php에서 기기 설정을 PC 또는 모바일 둘 중 하나만 선택한 뒤, 선택한 값의 CSS 소스에 미디어쿼리를 갖고 작성하며, 이러한 환경으로 제작했을 경우에만 앞선 댓글들 내용처럼 미디어쿼리로 제어 가능합니다.
현재 상태에서 가로값이 줄어들었을 때 모바일 기본 화면을 보이고 싶으시다면, 댓글들 내용처럼 미디어쿼리를 갖고 작성하시되, PC용 소스에 모바일 형태의 소스를 모두 작성하셔야 됩니다.
즉 그누보드는 기본적으로 PC + 모바일 형태이지만, PC용 소스에 모바일 소스를 함께 넣게 된다면, PC + PC(가로값 줄어들면 모바일 화면) + 모바일 이렇게 세 가지 구조를 갖도록 작성하셔야 됩니다.
css에 MedaiQuery 부분에서 width 값 조절해보세요
@media screen and (min-width: 000px) {
}
min-width max-width 선택하셔서 쓰시면됩니다~
