|
블로그 예쁘게 꾸미기 #5 카테고리 글 목록 또는 검색 결과 목록을 쉽고 간단한 방법으로 게시판 형태로 출력하기 |
|||
_변경 전 모습  _변경 후 모습  _CSS 수정하기 skin.html 모습 (ctrl+F키로 '해당'이라는 글자를 검색하면 금방 찾을 수 있어요.)<s_list> html파일을 보면 날짜, 제목, 댓글수 이렇게 차례로 출력하도록 나와있습니다. 저기서 날짜를 출력하는 부분이 css에 어디 부분인지 찾아냅니다.<div class="searchList result group"> <h3> <strong>'[#_list_conform_#]'</strong>에 해당되는 글 <span class="cnt">[#_list_count_#]</span>건 </h3> <ol class="box"> <s_list_rep> <li> <span class="date">[#_list_rep_regdate_#]</span> <a href="[#_list_rep_link_#]">[#_list_rep_title_#]</a> <span class="cnt">[#_list_rep_rp_cnt_#]</span> </li> </s_list_rep> </ol> </div> </s_list> style.css 수정한 모습 #content .result ol 두 부분을 수정했는데요. 우선 date에 float:right; 옵션을 주어서 제목 오른쪽 부분에 출력되도록 했구요, padding-right:15px;옵션을 줘서 오른쪽에서 15px만큼 들여쓰기를 했습니다. 그리고 ol에서 border-bottom:2px solid #000; 옵션을 줘서 지정한 색으로 목록 밑에 2px만큼의 선을 추가 했어요.{ padding-left:40px; border-bottom:2px solid #000;} #content .result li { border-bottom:1px solid #eee; padding:3px 0;} #content .result .date { float:right; padding-right:15px; color:#777;} _그냥 간단하게 고치길 원하시는 분을 위해.. 만약 해당하는 부분을 style.css에서 못찾겠다 하시는 분은 아까 skin.html에서 <span class="date">부분을 아래처럼 고쳐주시면 됩니다.<span class="date" style="float:right; padding-right:15px;"> [관련글] 2007/05/14 블로그 꾸미기 #1 - 파비콘과 메일주소 이미지 만들기 2009/01/28 블로그 꾸미기 #2 - 블로그 스킨도 생각대로 만들면 되고♬ 2009/01/28 블로그 꾸미기 #3 - 웹폰트 만들 때 주의사항 세 가지 2009/03/24 블로그 꾸미기 #4 - 테터데스크 최신글 섬네일 오른쪽 배치 |
|||
