모바일 게시판 탭기능 있는 최신글

매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!
모바일 게시판 탭기능 있는 최신글

QA

모바일 게시판 탭기능 있는 최신글

본문

안녕하세요, 초보제작자 입니다.

 

http://nuli.navercorp.com/sharing/ui/patternMenu/1 

 

모바일 탭기능 최신글을 찾다가, 위 사이트를 알게되서 그냥 다짜고자 latest.skin이랑 style쪽에 붙여넣었더니, 딱 저기서 나와있는 모습으로만 적용이 되더라구요.

 

최신글 목록이 나오게 하려면 어떻게 해야하나요?

게시판과 연동방법이라고 해야할까요..?

 

이 질문에 댓글 쓰기 :

답변 2

직접 짜셔도 될거같긴한데요..

 

제가 쓰는소스를 올려 드리자면

 

 

#container .main_banner_tab { width:100%; margin:auto; }

#container .main_banner_tab > span { margin-top:12px; margin-right:10px; font-size:12px; font-weight:700; }

#container .main_banner_tab > ul {

margin:auto; background:#f7f7f7;border:1px solid #e7e7e7; border-bottom:none;

width: -moz-calc(100% - 2px); width: -webkit-calc(100% - 2px); width: -o-calc(100% 2px); width: calc(100% - 2px); width: expression(100% - 2px);

}

#container .main_banner_tab > ul > li { float:left; padding:10px 15px 10px 15px; border-top:3px solid #e7e7e7; border-right:1px solid #e7e7e7; cursor:pointer; font-size:13px; }

 

#container .main_banner_tab > ul > li.active { background:#fff; border-top:3px solid #333333; font-size:13px; }



#container .g_t_gallery {
border:1px solid #e7e7e7; padding:10px 10px 0px 0px; border-top:none;
width: -moz-calc(100% - 12px); width: -webkit-calc(100% - 12px); width: -o-calc(100% 12px); width: calc(100% - 12px); width: expression(100% - 12px);
}



<!-- 갤러리 추출 시작 -->

<script type="text/javascript">

<!--

$(document).ready(function(){

$(".g_t_gallery").hide();

$(".g_t_more").hide();

$("#g_t_1").show();

$("#g_t_more_1").show();

 

$(".g_t").click(function(){

var g_t_data = $(this).attr('g_t_data');

 

$('.g_t').removeClass('active');

$(this).addClass('active');

 

$(".g_t_gallery").hide();

$(".g_t_more").hide();

 

$("#g_t_"+g_t_data).show();

$("#g_t_more_"+g_t_data).show();

});

});

//-->

</script>

<div class="main_banner_tab">

<span class="fr g_t_more" id="g_t_more_1"><a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=gallery">+ 더보기</a></span>

<span class="fr g_t_more" id="g_t_more_2"><a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=normal">+ 더보기</a></span>

<span class="fr g_t_more" id="g_t_more_3"><a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=gallery">+ 더보기</a></span>

<ul>

<li class="g_t active" g_t_data='1'>갤러리탭A</li>

<li class="g_t" g_t_data='2'>갤러리탭B</li>

<li class="g_t" g_t_data='3'>갤러리탭C</li>

</ul>

</div>

<div class="g_t_gallery" id="g_t_1">

<?php

// 이 함수가 바로 최신글을 추출하는 역할을 합니다.

// 사용방법 : latest(스킨, 게시판아이디, 출력라인, 글자수);

// 테마의 스킨을 사용하려면 theme/basic 과 같이 지정

echo latest('gallery', 'gallery', 12);

?>

</div>

<div class="g_t_gallery" id="g_t_2">

<?php

// 이 함수가 바로 최신글을 추출하는 역할을 합니다.

// 사용방법 : latest(스킨, 게시판아이디, 출력라인, 글자수);

// 테마의 스킨을 사용하려면 theme/basic 과 같이 지정

echo latest('gallery', 'normal', 12);

?>

</div>

<div class="g_t_gallery" id="g_t_3">

<?php

// 이 함수가 바로 최신글을 추출하는 역할을 합니다.

// 사용방법 : latest(스킨, 게시판아이디, 출력라인, 글자수);

// 테마의 스킨을 사용하려면 theme/basic 과 같이 지정

echo latest('gallery', 'gallery', 12);

?>

</div>

<!-- 갤러리 추출 끝 -->

 

이렇게 쓰고 있습니다.

감사합니다. 게시판 코드까지 짜놓으셔서 저도 쉽게 잘 적용을 해보았는데요!!
한가지 질문 좀 드리고 싶습니다 ㅠ_ㅠ

제가 민트테마를 사용하는 사이트라 latest.skin.php쪽이 아니라, index.php파일에 삽입했습니다.
style부분은 latest쪽에 삽입해두었구요!!

적용하면 스마트폰 크기 정도에서는 아래 처럼 출력이되거든요?



========================

갤러리탭A | 갤러리탭B | 갤러리탭C

* 첫 게시글 17.05.09
* 두번째 게시글 17.05.09
* 세번째 게시글 17.05.09
* 네번째 게시글 17.05.09
* 다섯번째 게시글 17.05.09

========================



여기 까진 좋은데, 태블릿이나 랩탑 해상도로 넘어가면



========================

갤러리탭A | 갤러리탭B | 갤러리탭C * 첫 게시글 17.05.09

* 두번째 게시글 17.05.09
* 세번째 게시글 17.05.09
* 네번째 게시글 17.05.09
* 다섯번째 게시글 17.05.09

========================



이런식으로, 첫번째 게시글이 올라오면서 탭옆으로 붙더라구요...

그래서 이것저것 많이 수정해보는데도 저게 아래로 이동이 안되네요...

방법이 있을까요???

main_banner_tab 

 

클래스 명이 이렇게 돼어잇는부분을 수정해보세요


그럼 될거같네요

으... 못하겠네요...

단순히 </br>을 가운데 껴넣으면, 알아서 아랫줄로 갈거라 생각했는데 그것도 아니네요...

탭3개가 다 따로 지정이 되어있던데, 이걸 3개를 묶어서 화면가로크기를 꽉채워야 할 것 같은데 어떻게 수정을 해줘야 할까요?

제가 대충 무식한 방법으로 끼워맞추기해서 목록은 이제 위로 안올라오는데, 혹시 탭을 두덩어리로 늘리려면 어떻게 해줘야 하나요?

========================

갤러리탭A | 갤러리탭B | 갤러리탭C

* 첫 게시글 17.05.09
* 두번째 게시글 17.05.09
* 세번째 게시글 17.05.09
* 네번째 게시글 17.05.09
* 다섯번째 게시글 17.05.09

========================

========================

갤러리탭C | 갤러리탭D | 갤러리탭E

* 첫 게시글 17.05.09
* 두번째 게시글 17.05.09
* 세번째 게시글 17.05.09
* 네번째 게시글 17.05.09
* 다섯번째 게시글 17.05.09

========================

제가 위에 알려주신 코드를 그대로 한번 더 붙였더니, 윗탭 오른쪽에 탭이 붙는것도 문제지만, 숫자를 1,2,3으로 되어있는걸 4,5,6으로 바꿔주면 되는줄 알았는데, 두 탭덩어리가 동시 동작하네요...

답변을 작성하시기 전에 로그인 해주세요.
전체 0
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT