답변 2개
아래를 해당페이지에서 불러들이는 css파일속에 넣어줍니다.
@media (min-width: 767px) {
.okmenu {display:none;}}
그리고 웹페이지에 모바일에서 나타낼 부분에
을 넣어줍니다.
-------------------------
위 코드를 설명드리자면,
(min-width: 767px) 는 최저 767px 해상도 이상에서 { } 안의 코드를 사용하겠다는 것입니다.
그러니까 .okmenu {display:none;} 라는 코드를 사용하겠다는 말인데,
그것은 아래 class="okmenu" 를 화면에 나타내지 않겠다는 말입니다.
그러므로, 767px이상에서는 okmenu클래스가 들어가 있는 div코드를 나타내지 않겠다는 것이죠.
클래스명은 홈페이지에 있는 다른 클래스(class)와 겹치지 않게 자신이 원하는 클래스명으로 바꿔주시면 됩니다.
767px도 400px이하에서만 보이게 하고싶으시면 400px로 바꾸시면 됩니다.
그리고 반대로 할려면 min을 max로 바꿔주세요.
답변에 대한 댓글 3개
댓글을 작성하려면 로그인이 필요합니다.
css의 미디어 코드등을 통하여 조정 하실 수 있으시구요,
아니면 JQuery 이용해서 display width가 일정 크기 이상일 경우
hide를 하실 수 있습니다.
</p><p>/* CSS Example */</p><pre style="word-wrap: break-word; white-space: pre-wrap;">@media all and (max-device-width:320px) and (max-device-height:568px)</pre><pre style="word-wrap: break-word; white-space: pre-wrap;">{</pre><pre style="word-wrap: break-word; white-space: pre-wrap;">}</pre><p>
</p><p> </p><p style="font-size: 14.6667px;"><script></p><p style="font-size: 14.6667px;">// jquery example</p><p style="font-size: 14.6667px;">$(function(){</p><p style="font-size: 14.6667px;"> // 창 크기 조정 될 때</p><p style="font-size: 14.6667px;"><span style="font-family: monospace; font-size: medium; white-space: pre-wrap;"> $(window).resize(function() {</span></p><p style="font-size: 14.6667px;"><span style="font-family: monospace; font-size: medium; white-space: pre-wrap;"> </span><span style="font-family: monospace; font-size: medium; white-space: pre-wrap;"> if($(window).width() <= 일정크기)</span><span style="font-family: monospace; font-size: medium; white-space: pre-wrap;"> </span></p><p style="font-size: 14.6667px;"><span style="font-family: monospace; font-size: medium; white-space: pre-wrap;"> </span><span style="font-family: monospace; font-size: medium; white-space: pre-wrap;"> {</span><span style="font-family: monospace; font-size: medium; white-space: pre-wrap;"> </span></p><p style="font-size: 14.6667px;"><span style="font-family: monospace; font-size: medium; white-space: pre-wrap;"> </span><span style="font-family: monospace; font-size: medium; white-space: pre-wrap;"> </span><span style="font-family: monospace; font-size: medium; white-space: pre-wrap;"> $(".메뉴클래스").css({'display':'none'});</span><span style="font-family: monospace; font-size: medium; white-space: pre-wrap;"> </span></p><p style="font-size: 14.6667px;"><span style="font-family: monospace; font-size: medium; white-space: pre-wrap;"> </span><span style="font-family: monospace; font-size: medium; white-space: pre-wrap;"> }</span></p><p style="font-size: 14.6667px;"><span style="font-family: monospace; font-size: medium; white-space: pre-wrap;"> </span><span style="font-family: monospace; font-size: medium; white-space: pre-wrap;">});</span> </p><p style="font-size: 14.6667px;">});</p><p style="font-size: 14.6667px;"><span style="font-size: 11pt;"></script></span></p><p>
의 형태로 가능합니다.
답변에 대한 댓글 1개
생각도 못했던 제이쿼리 기능까지 알려주셔서 감사합니다.
다만, 제 능력부족으로 응용을 못해서 다른분의 방법으로 해결하게 되었네요..ㅎㅎ
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
쉽게 알려주셔서 잘 따라할 수 있었네요.