본문 바로가기
프로그래밍/HTML, CSS, JavaScript

[HTML/CSS] 카테고리 DIV 박스 만들기

by [바가지] 2018. 6. 17.
반응형

카테고리 DIV 박스 만들기

 

카테고리 DIV 박스 만들기

 

DIV박스 만들기 예제로 카테고리 형태의 박스를 만들어 보도록 하겠습니다.

소스를 참고하여 직접 만들어 보면 도움이 될 것이라 생각합니다.

참고로 디자인 감각이 없어, 색상이 이상하네요. 이렇게 저렇게 변경 해 보아도 시간만 흘러 이대로 올려 봅니다.

 

  HTML/CSS 소스

<!DOCTYPE html>
<html>
  <head>
    <title>카테고리 DIV 박스 만들기</title>
  </head>

 

  <style type="text/css">

    #divCategory {

      background:#008299;

      color: #fff;

      padding: 15px;

      width: 300px;

      margin: 50px auto;

    }
    #divCategory ul{
      padding: 0; 
      list-style: none;
    }
    #divCategory ul li {
       border-top: 1px solid #003399; 
       border-bottom: 1px solid #3DB7CC;
    }
    #divCategory ul li a {
      padding: 10px; 
      display: block;
      color: #fff;
      text-decoration: none;
    }
    #divCategory ul li:first-child {border-top: none;}
    #divCategory ul li:last-child {border-bottom: none;}
    #divCategory ul li a:hover {background: #050099;}
  </style>

  <body>
    <div id="divCategory">
      <h2>category</h2>
      <ul>
        <li><a href="" target="_blank">여행</a></li>
        <li><a href="" target="_blank">맛집</a></li>
        <li><a href="" target="_blank">요리</a></li>
        <li><a href="" target="_blank">건강</a></li>
        <li><a href="" target="_blank">육아</a></li>
      </ul>
    </div>

  </body>
</html>

 

  브라우저 실행 결과

 

 

DIv 예제

 

  소스설명

 

- list-style: none; 

  → 리스트 스타일의 효과(예:●)를 사용하지 않도록 설정 합니다.

- #divCategory ul li {
     border-top: 1px solid #003399; 
     border-bottom: 1px solid #3DB7CC;
  }

  → li(리스트항목) 위, 아래로 1px 의 각 다른 색의 실선이 표시 되도록 설정 합니다.

  → 색상을 다르게 하면 입체효과가 나타납니다.

 

-  #divCategory ul li:first-child {border-top: none;}

  → 카테고리 li의 첫번째 항목의 윗 부분의 border(1px 실선 효과를 주었던 부분) 효과를 제거 합니다.


-  #divCategory ul li:last-child {border-bottom: none;}

  → 카테고리 li의 마지막번째 항목의 아래 부분의 border 효과를 제거 합니다.
 

-  #divCategory ul li a:hover {background: #050099;}

  → 마우스를 올렸을 때 배경색이 파란색으로 바뀌도록 효과를 줍니다. 

 

 

  마무리

 카테고리 DIV 박스 만들기를 통하여 CSS Style 속성에 대하여 알아 보았습니다.

반응형