덧글(코멘트) 들여쓰기 CSS로 간략하게 표현하기
오랬만에 글을 쓰네요.
덧글(코멘트) 들여쓰기 부분을 테이블 사용하지 않고 CSS로 간략하게 정리해봤습니다.
코딩후 해석된 소스보기 하는 버릇이 있어서 가끔 쓸데없는 삽질은 하곤합니다.^^
링크페이지 전체 소스를 보니 제 의도와 다르게 들어있는 테이블태그가 두개나 남았네요..ㅎㅎ
틈나면 입력부분도 해봐야 겠습니다.(링크는 잠시만 걸께요)
----------------------------------------------------
스타일에서 굵은 글씨만 추가된 셀렉터 입니다.
스타일에 추가;
#commentContents { width:100%; border:none; }
.comment_row { width:100%; border:none; clear:both; }
.comment_conts { float:right; width:auto; height:auto; border-top:1px solid #dddddd; }
----------------------------------------------------
<!-- 코멘트 리스트 -->
<div id="commentContents">
<?
for ($i=0; $i<count($list); $i++)
{
$comment_id = $list[$i][wr_id];
?>
<a name="c_<?=$comment_id?>"></a>
<div class="comment_row">
<?
for ($k=0; $k<strlen($list[$i][wr_comment_reply]); $k++)
continue;
$comment_conts_width = ($k > 0)?(100-($k*3))."%":"100%";//덧글 들여쓰기 3%씩 줄임
?>
<div class='comment_conts' style="width:<?php echo $comment_conts_width; ?>">
<div style="height:28px; background:url(<?=$board_skin_path?>/img/co_title_bg.gif); clear:both; line-height:28px;">
<div style="float:left; margin:0 2px;">
<strong><?=$list[$i][name]?></strong>
<span style="color:#888888; font-size:11px;"><?=$list[$i][datetime]?></span>
</div>
<div style="float:right; margin:0 5px;">
<? if ($is_ip_view) { echo " <span style=\"color:#B2B2B2; font-size:11px;\">{$list[$i][ip]}</span>"; } ?>
<? if ($list[$i][is_reply]) { echo "<a href=\"javascript:comment_box('{$comment_id}', 'c');\"><img src='$board_skin_path/img/co_btn_reply.gif' border=0 align=absmiddle alt='답변'></a> "; } ?>
<? if ($list[$i][is_edit]) { echo "<a href=\"javascript:comment_box('{$comment_id}', 'cu');\"><img src='$board_skin_path/img/co_btn_modify.gif' border=0 align=absmiddle alt='수정'></a> "; } ?>
<? if ($list[$i][is_del]) { echo "<a href=\"javascript:comment_delete('{$list[$i][del_link]}');\"><img src='$board_skin_path/img/co_btn_delete.gif' border=0 align=absmiddle alt='삭제'></a> "; } ?>
</div>
</div>
<!-- 코멘트 출력 -->
<div style='line-height:20px; padding:7px; word-break:break-all; overflow:hidden; clear:both; '>
<?
if (strstr($list[$i][wr_option], "secret")) echo "<span style='color:#ff6600;'>*</span> ";
$str = $list[$i][content];
if (strstr($list[$i][wr_option], "secret"))
$str = "<span class='small' style='color:#ff6600;'>$str</span>";
$str = preg_replace("/\[\<a\s.*href\=\"(http|https|ftp|mms)\:\/\/([^[:space:]]+)\.(mp3|wma|wmv|asf|asx|mpg|mpeg)\".*\<\/a\>\]/i", "<script>doc_write(obj_movie('$1://$2.$3'));</script>", $str);
$str = preg_replace("/\[\<a\s.*href\=\"(http|https|ftp)\:\/\/([^[:space:]]+)\.(swf)\".*\<\/a\>\]/i", "<script>doc_write(flash_movie('$1://$2.$3'));</script>", $str);
$str = preg_replace("/\[\<a\s*href\=\"(http|https|ftp)\:\/\/([^[:space:]]+)\.(gif|png|jpg|jpeg|bmp)\"\s*[^\>]*\>[^\s]*\<\/a\>\]/i", "<img src='$1://$2.$3' id='target_resize_image[]' onclick='image_window(this);'>", $str);
echo $str;
?>
</div>
<? if ($list[$i][trackback]) { echo "<p>".$list[$i][trackback]."</p>"; } ?>
<span id='edit_<?=$comment_id?>' style='display:none;'></span><!-- 수정 -->
<span id='reply_<?=$comment_id?>' style='display:none;'></span><!-- 답변 -->
<input type=hidden id='secret_comment_<?=$comment_id?>' value="<?=strstr($list[$i][wr_option],"secret")?>">
</div>
</div>
<? } ?>
</div>
<div class="clear"></div>
<!-- /코멘트 리스트 -->
|
댓글을 작성하시려면 로그인이 필요합니다.
로그인
댓글 17개
css 공부를 해야 하는데, 벌써 1년째 손이 안가네요.봐도 잘 모르겠구요.
지금 스타일은 네이버보다 너무 보기가 좋지 않다는게 의견이더라구요.
그래서 바꾸다가 몇번 실패해서 지금은 포기 단계 입니다. ㅠ..ㅠ..
흙... 이거를 못해서 며칠동안 삽질하다가 포기했었어요. ㅠ..ㅠ...
들여쓰기없이 한다면 글타래는 묶는 방법을 연구해야 겠네요??
-들여쓰기를 미세하게 하고 블럭을 왼쪽정렬로 하면 가독성은 좀 낳아질듯합니다.
들여쓰기 없이 글타래별 구분을 어떻게 줄지 의견좀 주세요.
지금은 아이콘+닉넴 등등 - 코멘트 - 아이콘+닉냄 등등 - 코멘트라서
읽는게 눈에 쉽게 안들어오거든요. 내용이 게시글정보와 섞여 버려서
읽기 어렵구 누구 글만 골라서 보기도 쉽지 않구요.
왼쪽부터 [아이콘 - 닉 - 내용 - 날짜] 이어서 붙이고,
액션 버튼들은 오른쪽에 붙이면 되나요?
왜 저는 이런거는 전혀 못하죠? ㅠ..ㅠ...
코멘트에 한번 붙여봅니다.
맨 아래쯤..
<input type=hidden id='secret_comment_<?=$comment_id?>' value="<?=strstr($list[$i][wr_option],"secret")?>">
바로 아래에 한줄 추가해야합니다.
<textarea id='save_comment_<?=$comment_id?>' style='display:none;'><?=get_text($list[$i][content1], 0)?></textarea>
덧) 전체 소스는 아래 링크참조하세요.
http://www.gnusr.com/g4/bbs/board.php?bo_table=work&wr_id=268&page=
덧글 내용은 너비를 기본적으로 확보해줘야 할것 같네요.. 보시고 응용하세요.
http://tottoe.com/bbs/board.php?bo_table=toes&wr_id=11&page=0&sca=&sfl=&stx=&spt=0&page=0&cwin=#c_105
---------------------------------
스타일;
#commentContents { width:100%; border:none; }
.comment_row { width:100%; border:none; clear:both; }
.comment_conts { float:left; width:auto; height:auto; border-top:2px dotted #dddddd; }
나머지는 인라인 코딩되어있으니 참고하세요.
float 속성으로 이름 - 내용 - 날짜 블럭을 왼쪽부터 정렬한 예제입니다.
position:absolute; 로 처리해도 될겁니다.
---------------------------------
<!-- 코멘트 리스트 -->
<div id="commentContents">
<?
for ($i=0; $i<count($list); $i++)
{
$comment_id = $list[$i][wr_id];
if ($is_admin) {
//print_r2($list[$i]);
}
?>
<a name="c_<?=$comment_id?>"></a>
<div class="comment_row">
<?
for ($k=0; $k<strlen($list[$i][wr_comment_reply]); $k++)
continue;
$comment_conts_width = ($k > 0)?(100-($k*1)):"100";//덧글 들여쓰기 1%씩 줄임
$comment_conts_inner = ($k > 0)?(($comment_conts_width*56/100)-($k*1)):"56";//내용 전체 56%에서 1%씩 줄임
?>
<div class='comment_conts' style="width:<?php echo $comment_conts_width; ?>%">
<div style="width:100%; height:auto; clear:both; padding:10px; line-height:20px; ">
<div style="float:left; width:100px; vertical-align:middle;">
<strong><?=$list[$i][name]?></strong>
</div>
<!-- 코멘트 출력 -->
<div style='float:left; width:<?php echo $comment_conts_inner; ?>%; min-width:200px; white-space:normal; overflow:hidden;'>
<?
if (strstr($list[$i][wr_option], "secret")) echo "<span style='color:#ff6600;'>*</span> ";
$str = $list[$i][content];
if (strstr($list[$i][wr_option], "secret"))
$str = "<span class='small' style='color:#ff6600;'>$str</span>";
$str = preg_replace("/\[\<a\s.*href\=\"(http|https|ftp|mms)\:\/\/([^[:space:]]+)\.(mp3|wma|wmv|asf|asx|mpg|mpeg)\".*\<\/a\>\]/i", "<script>doc_write(obj_movie('$1://$2.$3'));</script>", $str);
$str = preg_replace("/\[\<a\s.*href\=\"(http|https|ftp)\:\/\/([^[:space:]]+)\.(swf)\".*\<\/a\>\]/i", "<script>doc_write(flash_movie('$1://$2.$3'));</script>", $str);
$str = preg_replace("/\[\<a\s*href\=\"(http|https|ftp)\:\/\/([^[:space:]]+)\.(gif|png|jpg|jpeg|bmp)\"\s*[^\>]*\>[^\s]*\<\/a\>\]/i", "<img src='$1://$2.$3' id='target_resize_image[]' onclick='image_window(this);'>", $str);
echo $str;
?>
</div>
<div style="float:left; width:auto; margin-left:20px; color:#888888; font-size:11px; vertical-align:middle;">
<?=$list[$i][datetime]?>
<?// if ($is_ip_view) { echo " <span style=\"color:#B2B2B2; font-size:11px;\">{$list[$i][ip]}</span>"; } ?>
<? if ($list[$i][is_reply]) { echo "<a href=\"javascript:comment_box('{$comment_id}', 'c');\"><img src='$board_skin_path/img/co_btn_reply.gif' border=0 align=absmiddle alt='답변'></a> "; } ?>
<? if ($list[$i][is_edit]) { echo "<a href=\"javascript:comment_box('{$comment_id}', 'cu');\"><img src='$board_skin_path/img/co_btn_modify.gif' border=0 align=absmiddle alt='수정'></a> "; } ?>
<? if ($list[$i][is_del]) { echo "<a href=\"javascript:comment_delete('{$list[$i][del_link]}');\"><img src='$board_skin_path/img/co_btn_delete.gif' border=0 align=absmiddle alt='삭제'></a> "; } ?>
</div>
<div style="clear:both;"></div>
<? if ($list[$i][trackback]) { echo "<p>".$list[$i][trackback]."</p>"; } ?>
<span id='edit_<?=$comment_id?>' style='display:none;'></span><!-- 수정 -->
<span id='reply_<?=$comment_id?>' style='display:none;'></span><!-- 답변 -->
<input type=hidden id='secret_comment_<?=$comment_id?>' value="<?=strstr($list[$i][wr_option],"secret")?>">
<textarea id='save_comment_<?=$comment_id?>' style='display:none;'><?=get_text($list[$i][content1], 0)?></textarea>
</div>
</div>
</div>
<? } ?>
</div>
<div class="clear"></div>
<!-- /코멘트 리스트 -->
지금 4.31.01 버젼업 중인데, 한번 도전해 보겠습니다.
그다음 내용너비 기본을 $comment_conts_inner = ($k > 0)?(($comment_conts_width*80/100)-($k*1)):"80"; 정도로 늘려서 테스트해보세요.
저도 집사람 사이트 틈틈이 만들어 보는건데 4.31.01 utf 버전으로 업글해서 마무리하려고 합니다.
버전문제인지 원본 쿼리 함수중에 mysql_real_escape_string 함수가 안되서 mysql_escape_string 함수로 바꾸기 까지 헤멘 생각을 하면 까마득 합니다.
오랫만에 글을 올리셨네요.
늘 감사하고있습니다.
즐거운 저녘 되세요^^
오래됐는데 절 기억해주시네요.
그런데 누가실까 궁금??
정말 오랫만이십니다. 절 모르시겠지만, 플록님 홈피까지 쫒아가서 궁금한 점을 해결했던 저로선 정말 반갑기 그지 없네요^^
좋은 소스도 감사합니다 !
class="clear"는 제 개인설정 값인데 그대로 두었네요.
style="clear:both;"로 처리하시는게 맞습니다.
float을 clear하지 않아서 생기는 문제가 의외로 매우 많습니다.
제 경우 권장하지 않는 방법이지만 현재로선 브라우저특성을 타지않는 방법이기 때문에 <div style="clear:both;"></div> 처럼 빈 엘리먼트를 집어넣는 방식을 주로 사용합니다.
float을 clear하는 방법이 몇가지 되는데요.. 아래 링크를 참조하세요.
http://naradesign.net/wp/2008/05/27/144/