탈

Mint 테마 메인 Index 수정 - 2016. 6. 10 수정

· 2016-06-03 (금) 15:14:56 · 10579 · 9
2016.06.03_03.png
2016.06.03_04.png
IMG_3976.PNG
민트 테마 상단을 위와 같이 수정 배치하고자 한다면...


theme/mint/css/mobile.css

109~110 Line

[code]#main_work ul{margin-left:0px}
#main_work ul li:first-child{float:left;width:34%;overflow:hidden}
#main_work ul li{float:left;width:33%;overflow:hidden}[/code]
수정 및 추가


theme/mint/mobile/index.php

[code]<div id="lt_slide">
<?php
// 이 함수가 바로 최신글을 추출하는 역할을 합니다.
// 사용방법 : latest(스킨, 게시판아이디, 출력라인, 글자수, 캐시타임, option);
// 테마의 스킨을 사용하려면 theme/basic 과 같이 지정
$options = array(
'thumb_width' => 800, // 썸네일 width
'thumb_height' => 450, // 썸네일 height
);
echo latest('theme/main_slide', '게시판 아이디', 4, 55, 1, $options);
?>
</div>
<div id="main_work">
<ul>
<li>
<a href="#" class="work_img"><img src="<?php echo G5_THEME_IMG_URL; ?>/bn1.gif" alt="배너이미지1"></a>
<a href="#" class="work_txt"><span class="work_txt_tit">사업설명 1</span><span class="work_txt_p">사업에 관한 간략 설명<br>회사에 대한 간략한 설명</span></a>

</li>
<li class="main_work_1">
<a href="#" class="work_img"><img src="<?php echo G5_THEME_IMG_URL; ?>/bn2.gif" alt="배너이미지2"></a>
<a href="#" class="work_txt"><span class="work_txt_tit">사업설명 2</span><span class="work_txt_p">사업에 관한 간략 설명<br>회사에 대한 간략한 설명</span></a>
</li>
<li>
<a href="#" class="work_img"><img src="<?php echo G5_THEME_IMG_URL; ?>/bn3.gif" alt="배너이미지3"></a>
<a href="#" class="work_txt"><span class="work_txt_tit">사업설명 3</span><span class="work_txt_p">사업에 관한 간략 설명<br>회사에 대한 간략한 설명</span></a>
</li>
</ul>

</div>[/code]
class="col_l_60 latest"
class="col_l_40 latest"
삭제

썸네일 칫수 수정

모바일에서도 각 항목을 원본처럼 100%로 출력합니다.


주먹구구식으로 수정했습니다.
더 바람직한 방법이 있으면 조언 바랍니다.

첨부파일

2016.06.03_03.png (453.6 KB)
13회 2016-06-03 15:25
2016.06.03_04.png (661.1 KB)
1회 2016-06-03 15:25
IMG_3976.PNG (198.8 KB)
2회 2016-06-10 15:44
|

댓글 9개

2016-06-03 (금) 17:31:09
모바일에서도 각 항목을 원본처럼 100%로 출력되게 수정했습니다.
2016-06-10 (금) 14:04:46
팁 다시한번 감사말씀드립니다..

말씀하신데로 적용하여서 첨부하신이미지처럼 되었습니다...
그런데 예전에는 화면을 모바일에서보면 상기 이미지와 동일하게 나오는데
예전에는 모바일로보면 일열로 나왔었는데 그러케는 안되나요?
번거롭게 해드려서 죄송합니가....꾸벅
2016-06-10 (금) 14:20:16
모바일에서 보이는 화면을 본문에 추가했습니다.
3개의 '사업설명'은 각각 모바일에서 100%로 아래로 나열됩니다.

이 글을 처음 작성했을 때는 모바일에서도 PC처럼 가로로 3개가 나열되게 수정했었는데... 옳은 방법이 아닌 듯 해서 다시 고친 것입니다.
그런데 모바일 가로가 넓을 때는 통하지 않네요. 다시 손을 봐야겠습니다.
2016-06-10 (금) 14:24:55
앗........빠른답변 감사드립니다...
상기위의 코드를 말씀하시는건가요?
2016-06-10 (금) 15:44:36
오류가 있어서 대폭 수정했습니다~^^
[http://sir.kr/data/editor/1606/cc45f613e6749aaf98593e820c8ec63c_1467036197_1063.png]

FM25 님 좋은 자료 감사합니다.
메인슬라이드 부분과 그 아래의 사업설명123 사이에 20px정도 간격을 두려면 어찌해야 할까요..
mobile.css
index.php
이것저것 만지다보니까 해결됬네요..^^;
나중에 쓸일 있을거 같아서 스크랩해갑니다
2019-09-19 (목) 00:43:21
좋은 팁입니다. 스크랩 합니다.
댓글을 작성하시려면 로그인이 필요합니다.

그누보드5 팁자료실

2,788건
+
제목 글쓴이 날짜 조회
25-12-06 조회 4,581
25-12-02 조회 4,433
25-11-30 조회 4,394
25-11-30 조회 4,023
25-11-27 조회 4,452
25-11-23 조회 3,853
25-11-23 조회 3,747
25-11-19 조회 3,780
25-11-15 조회 4,378
25-11-09 조회 3,765
25-11-06 조회 3,683
25-11-06 조회 4,080
25-11-05 조회 3,739
25-11-03 조회 3,457
25-11-01 조회 3,674
25-10-28 조회 3,546
25-10-28 조회 3,832
25-10-28 조회 3,499
25-10-27 조회 3,570
25-10-22 조회 3,610
25-10-22 조회 3,864
25-10-21 조회 3,304
25-10-17 조회 3,387
25-10-17 조회 3,332
25-10-17 조회 3,823
25-10-17 조회 3,342
25-10-15 조회 3,277
25-10-14 조회 3,334
25-10-14 조회 3,302
25-10-14 조회 4,165