리스트 항목 배경색넣어서 보기좋게 꾸미기

카테고리의 모든글 또는 검색을 해서 나오는 리스트 부분을 배경색을 넣어서 하나의 블럭이 적용되는것을 알아보겠습니다.

이 방법은 마우스를 갖다 대었을때 즉 hover 기능이 좋습니다.

따로 지정하지 않아도 하나의 줄 전체가 선택이 되어지거나 마우스를 따라 가듯이 하는것이 좋습니다.

현재 제 블로그의 카테고리 분류 전체보기를 클릭해보세요. 그럼 아래처럼 나올겁니다.

티스토리의 치환자 부분을 참고하세요.

html 편집창에서 <div class="searchList"> 로 되어있는지? 또는 <div id="searchList"> 로 되어있는지 확인합니다.

id 로 되어있을경우 css 편집창에서 # 로 하고, class 로 되어있을경우 . 으로 합니다. 이점 알아두세요.

일단 id로 설명하겠습니다.

마우스를 올리면 검은색배경으로 되고 내리면 기존의 회색배경이 됩니다.

이 부분은 #searchList ol li a 에 해당이 됩니다.

그러므로 아래처럼 적용을 해줍니다. 모두 안적고 중요한부분만 간추립니다.


#searchList ol li a{
    background-color:#f2f2f2;
    display:block;
    margin:0;
    text-decoration:none;
}

그리고 마우스가 올라갔을때 배경색이 변경되는 부분입니다.


#searchList ol li a:hover{
    background-color:#000;
    color:#fff;
}

위의 것을 상속받으므로 배경색과 color만 지정을 해주면됩니다. 위의 두개의 코드만 넣어주면 리스트가 배경색이 변경되는 디자인을 볼수 있을겁니다.

추가팁. 줄간격 띄우기

줄과 줄간격을 어느정도 뛰우고 싶다면 아래처럼 하면 됩니다.

저의경우 줄과 줄간격이 10px 입니다. 위 아래로 10px씩 떨어져있습니다. 그래야 딱 붙는것보다 형태가 좋습니다.


#searchList ol li{
    margin:10px 0;
    padding:0;
}

추가팁. 한번 방문한곳 색깔 다르게 적용하기

한번 방문한곳은 링크의 색깔을 다르게 지정할수 있습니다.

단순이 링크만 수정하지말고 형태까지 약간 변경해주면 더 좋습니다.

#searchList ol li a:visited{
    border-left:10px solid #c1c1c1;//한번 방문했던곳은 왼쪽으로 보더를 10px 주었습니다.
}

demun(대문블로그)