검색결과 및 카테고리 목록 디자인

 

내용요약

1. 그림과 같이 검색 목록을 보기좋게 수정하여 본다.

2. 상부제목부분 폰트크게 적용하여 가독성 높인다

3. 목록앞에 숫자 삭제하고 날짜는 우측 끝으로 보낸다

4. 목록 밑줄도 흐리게하고 제목부분과 목록부분 간격도 조절하여 본다

 

---

 

skin.html 변경

• 상단 제목부분 글자크기 키우기 위해 <h4>~</h4>로 감쌈
• 날짜 우측정렬을 위해서 <time class="update">부분을 <time class="update pull-right">로 변경한다

 

변경후 skin.html

 

---

 

style.css 변경

• 리스트 목록하단 밑줄 제거위해 search-list {~}에서 border-bottom:1px solid #ccc;를 삭제한다
• 상단 제목과 목록의 간격을 띄우기 위해 .search-list ol { padding:30px 0 0 0; }를 추가한다
• 밑줄,폰트크기,줄간격 조절위해 .search-list ol li { -- }를 추가한다
• 폰트색상 조절위해 .search-list a { -- }를 추가한다
• 마우스 오버시 폰트색상 조절위해 .search-list a:hover { -- }를 추가한다
• 댓글표시 색상및 사이즈 조절위해 .search-list .cnt { -- }를 추가한다

 

변경후 style.css

 

참고사이트 : 마크쿼리커뮤니티

다운로드 : 검색결과및카테고리목록디자인.txt

 

목록앞에 숫자 나타내기 위해 추가수정 - 2014/7/15

.search-list ol li { -- } 내의 display:block;을 삭제 또는 주석처리 한다
추가한 .search-list ol { padding:30px 0 0 0; }을 padding:30px 0 0 25px; 로 변경한다