모바일과 PC 게시판의 폭을 다르게 만들고 싶습니다.
관련링크
본문
PC 버전 : http://203.251.80.70/gnb/bbs/board.php?bo_table=notice
모바일 버전 : http://203.251.80.70/gnb/bbs/board.php?bo_table=notice&device=mobile
company테마를 사용했어요.
링크에서 보시다시피
PC 버전에는 왼쪽 서브 메뉴가 들어가 있는 상태고
모바일 버전에는 왼쪽메뉴 없이 리스트만 100%로 나타내고 싶습니다.
게시판 폭은 100%상태이고
현재 PC버전은 상단내용에 왼쪽 서브메뉴가 들어가는 것을
에디터에서 html로 삽입해놓았습니다.
게시판 폭이 100%라서 리스트가 하단으로 내려가 버립니다...ㅠㅠ
그렇다고 게시판 폭을 750px로 줘버리니 모바일에서 화면 밖으로 나가서 스크롤이 생겨버려요..ㅠㅠㅠㅠ
대체 어떻게 하면 모바일과 PC 버전의 게시판 폭을 다르게 나타낼 수 있을까요?ㅠㅠ
<div style="width: 750px; text-align: left; padding-top: 30px; float: right;">
<h3 style="width: 300px; float: left;"><img src="http://203.251.80.70/pboard/img/body_title01.gif"></h3>
<p style="width: 300px; text-align: right; margin-right: 30px; float: right;"><a href="Homehttp://203.251.80.70/gnb/">Home</a> > <a href="board.php?bo_table=notice">소식나누기</a> > 공지사항</p>
<p><img src="
http://203.251.80.70/pboard/img/body_title07.gif"></p>
</div>
제 생각에는 단순하게
이 부분에서 제일 하단의 </div>를 하단내용에 넣으면 될것 같은데
문제는 소스를 작성하고 확인을 누르면 이 div가 자동으로 닫혀버리네요. ㅠㅠ
</div> 삭제를 아무리 하고 저장해도 </div>가 자동으로 생겨버립니다.....ㅠㅠㅠ
bo_list의 width를 pc에서는 750px로 모바일은 100%로 주면 될 것 같은데
다르게 줄 수 없으니 도저히 해결이 안나네요...ㅠㅠ
PC게시판 폭은 750px로 맞추고 모바일은 100%로 어떻게 하면 맞출 수 있을까요?
도와주세요..ㅠㅠ
답변 1
팁을 드리자면 G5_IS_MOBILE 전역변수를 이용하여 모바일 유무를 판단할 수 있습니다.
<?=(G5_IS_MOBILE)?"width:750px;":"width:100%;"?>
이렇게 하시면 모바일일경우 width:750px; 가 출력되고 아닌경우는 100%가 출력됩니다.
원하는 위치에 적당히 넣으셔요.
