최근글 부트스트랩 적용할려면 어찌 해야 하나요?
본문
반응형 홈페이지를 제작하면서 최근글이 pc에서는 문제없이 잘 되는데
모바일로 가면 모바일 기기의 넓이에 따라서 최근글 글자수를 적용하고 싶은데 ..
잘 몰라서..문의 합니다.
스킨 자료실에 있는
이 스킨을 다운 받아서 적용 했는데
반응형 크기에 맞게 글자수가 잘려야 하는데 글자수가 잘리지 않고
밑으로 해서 두줄로 나오는 현상이 발생하네요.
제가 적용을 잘못 한 것인가요?
[code]
<!--메인 내용1 시작-->
<div class="col-md-12">
<div class="product serviceBox_2">
<figure class="touching effect-bubba">
<div class="product-img">
<a href="board.php?bo_table=talk1">
<img class="img-responsive" src="main/mainright1.jpg">
</a>
</div>
</figure>
<div class="service-content f10 mt20">
<?php echo latest("bootstrap", "talk1", 4, 35); ?>
</div>
</div>
</div>
<!--메인 내용1 끝-->
[code]
답변 3
1.일단 자신이 예상하는 최근글 영역의 최대 너비만큼 최대 글자수를 지정합니다.
2.CSS로 글자 자르기 기법을 사용해 출력 글자수를 조정합니다.
해당 페이지 안에도 소스를 넣어줘야 보이네요.
답변 감사합니다.
<?php echo latest("bootstrap", "talk1", 4, 35); ?>
<?php echo latest("bootstrap", "talk1", 4, 30); ?>
35 ->30 으로 글자수 조정해보세요.
답변 감사합니다.
제 생각에는 글자수를 줄여서 될게 아닌거 같아서 질문 올렸네요
다양한 모바일 기기에 따라서 폭이 다 다른데..
예를 들면
큰 기기에서는 30 글자가 되더라도
작은 기기에서는 20글자로 해야 하거든요
이렇게 글자를 자른다고 해서 될것은 아닌거 같아요. ㅠ.ㅠ
폭이 좁아지면 그 폭을 벗어나는 글자는 보이지 않게 되어야 하거든요.
글자수 줄이는게 맞는거 같고요. 가로가 몇px까지 줄어드는지 모르겠지만
브라우저가 돌아가는 현존하는 디바이스중 최소 가로px은 생각보다 그렇게 작지 않습니다.
굳이 디바이스별 글자수를 조정할려면 CSS만으로는 힘들거같고요.
jquery나 php 사용해야될듯싶어요.
밑에는 디바이스별 글자크기가 줄어드는 간단한 jquery입니다.
$(function () {
var autoFont = function () {
$("h1").css('font-size', Math.max(Math.min($("h1").width() / (1.1 * 10))));
}
autoFont();
$(window).resize(function () {
autoFont();
});
});
참고로 모바일화면에선 viewport meta 태그를 쓰게 되면 자동으로 폭이 깔맞춤 됩니다
해당 최근글 css를 보면
/* 새글 스킨 (latest) */
.kor { word-wrap: break-word; word-break: keep-all; }/* 한글 줄바꿈 */
.latest {
max-width:100%; /* Customise it accordingly */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.latest-more { margin-top:6px; }
.latest-right { width:85px; text-align:right; }
.latest-hr { display:block; margin:5px 0px; }
이렇게 되어 있는데..
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
위에 소스를 보면
크기를 넘으면 글자를 줄바꿈 하지 말고 숨기게 되어 있거든요.
그런데 지금 적용된 것을 보면 글자가 숨기는게 아니고 줄바꿈으로 나옵니다. ㅠ.ㅠ
해당 최근글 소스는
<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨
add_stylesheet('<link rel="stylesheet" href="'.$latest_skin_url.'/style.css">', 0);
?>
<!-- <?php echo $bo_subject; ?> 최신글 시작 { -->
<div class="col-md-12 kor">
<h4>
<b>
<a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=<?php echo $bo_table ?>"><?php echo $bo_subject; ?></a>
</b>
<small class="pull-right latest-more">
<a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=<?php echo $bo_table ?>">더보기</a>
</small>
</h4>
<hr class="latest-hr">
<ol class="list-unstyled">
<?php for ($i=0; $i<count($list); $i++) { ?>
<li class="latest">
<?php
echo "<span class=\"latest-right pull-right\"> ";
// if ($list[$i]['link']['count']) { echo "[{$list[$i]['link']['count']}]"; }
// if ($list[$i]['file']['count']) { echo "<{$list[$i]['file']['count']}>"; }
if (isset($list[$i]['icon_new'])) echo " " . $list[$i]['icon_new'];
if (isset($list[$i]['icon_hot'])) echo " " . $list[$i]['icon_hot'];
if (isset($list[$i]['icon_file'])) echo " " . $list[$i]['icon_file'];
if (isset($list[$i]['icon_link'])) echo " " . $list[$i]['icon_link'];
if (isset($list[$i]['icon_secret'])) echo " " . $list[$i]['icon_secret'];
echo "</span>";
//echo $list[$i]['icon_reply']." ";
echo "<a href=\"".$list[$i]['href']."\">";
if ($list[$i]['is_notice'])
echo "<strong>".$list[$i]['subject']."</strong>";
else
echo $list[$i]['subject'];
if ($list[$i]['comment_cnt'])
echo $list[$i]['comment_cnt'];
echo "</a>";
?>
</li>
<?php } ?>
<?php if (count($list) == 0) { //게시물이 없을 때 ?>
<li>게시물이 없습니다.</li>
<?php } ?>
</ol>
</div>
<!-- } <?php echo $bo_subject; ?> 최신글 끝 -->
