덧글(코멘트) 들여쓰기 CSS로 간략하게 표현하기 정보
덧글(코멘트) 들여쓰기 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>
<!-- /코멘트 리스트 -->
추천
3
3
댓글 17개
css 작업 하시는김에 댓글 스타일을 네이버처럼 바꿔주시면 안될까요?
css 공부를 해야 하는데, 벌써 1년째 손이 안가네요.봐도 잘 모르겠구요.
지금 스타일은 네이버보다 너무 보기가 좋지 않다는게 의견이더라구요.
그래서 바꾸다가 몇번 실패해서 지금은 포기 단계 입니다. ㅠ..ㅠ..
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=
코멘트에 한번 붙여봅니다.
맨 아래쯤..
<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>
<!-- /코멘트 리스트 -->
덧글 내용은 너비를 기본적으로 확보해줘야 할것 같네요.. 보시고 응용하세요.
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 버젼업 중인데, 한번 도전해 보겠습니다.
지금 4.31.01 버젼업 중인데, 한번 도전해 보겠습니다.
버튼쪽 블록을 빼고 내용 뒤쪽에 span으로 감싸서 붙이시면 될겁니다.
그다음 내용너비 기본을 $comment_conts_inner = ($k > 0)?(($comment_conts_width*80/100)-($k*1)):"80"; 정도로 늘려서 테스트해보세요.
저도 집사람 사이트 틈틈이 만들어 보는건데 4.31.01 utf 버전으로 업글해서 마무리하려고 합니다.
버전문제인지 원본 쿼리 함수중에 mysql_real_escape_string 함수가 안되서 mysql_escape_string 함수로 바꾸기 까지 헤멘 생각을 하면 까마득 합니다.
그다음 내용너비 기본을 $comment_conts_inner = ($k > 0)?(($comment_conts_width*80/100)-($k*1)):"80"; 정도로 늘려서 테스트해보세요.
저도 집사람 사이트 틈틈이 만들어 보는건데 4.31.01 utf 버전으로 업글해서 마무리하려고 합니다.
버전문제인지 원본 쿼리 함수중에 mysql_real_escape_string 함수가 안되서 mysql_escape_string 함수로 바꾸기 까지 헤멘 생각을 하면 까마득 합니다.
admin 쪽에 아직 은근한 잔 버그들이 있습니다. 4.31.02를 기다리심이 ㅠ..ㅠ...
자동메뉴의 대명사 플록님!
오랫만에 글을 올리셨네요.
늘 감사하고있습니다.
즐거운 저녘 되세요^^
오랫만에 글을 올리셨네요.
늘 감사하고있습니다.
즐거운 저녘 되세요^^
반갑습니다.^^
오래됐는데 절 기억해주시네요.
그런데 누가실까 궁금??
오래됐는데 절 기억해주시네요.
그런데 누가실까 궁금??

와~ 플록님 글보고 일부러 로긴했네요.
정말 오랫만이십니다. 절 모르시겠지만, 플록님 홈피까지 쫒아가서 궁금한 점을 해결했던 저로선 정말 반갑기 그지 없네요^^
좋은 소스도 감사합니다 !
정말 오랫만이십니다. 절 모르시겠지만, 플록님 홈피까지 쫒아가서 궁금한 점을 해결했던 저로선 정말 반갑기 그지 없네요^^
좋은 소스도 감사합니다 !

맨 마지막 <div class="clear">에 style="border-top: 2px dotted rgb(221, 221, 221); clear:both;" 이렇게 해줘야 제대로 나오네요. 특히 clear:both 안하면 파폭에서 마지막 코멘트가 아래 입력폼(css일 경우)속에 뭍히네요.
반갑습니다.
class="clear"는 제 개인설정 값인데 그대로 두었네요.
style="clear:both;"로 처리하시는게 맞습니다.
float을 clear하지 않아서 생기는 문제가 의외로 매우 많습니다.
제 경우 권장하지 않는 방법이지만 현재로선 브라우저특성을 타지않는 방법이기 때문에 <div style="clear:both;"></div> 처럼 빈 엘리먼트를 집어넣는 방식을 주로 사용합니다.
float을 clear하는 방법이 몇가지 되는데요.. 아래 링크를 참조하세요.
http://naradesign.net/wp/2008/05/27/144/
class="clear"는 제 개인설정 값인데 그대로 두었네요.
style="clear:both;"로 처리하시는게 맞습니다.
float을 clear하지 않아서 생기는 문제가 의외로 매우 많습니다.
제 경우 권장하지 않는 방법이지만 현재로선 브라우저특성을 타지않는 방법이기 때문에 <div style="clear:both;"></div> 처럼 빈 엘리먼트를 집어넣는 방식을 주로 사용합니다.
float을 clear하는 방법이 몇가지 되는데요.. 아래 링크를 참조하세요.
http://naradesign.net/wp/2008/05/27/144/