카테고리 DIV 박스 만들기
DIV박스 만들기 예제로 카테고리 형태의 박스를 만들어 보도록 하겠습니다.
소스를 참고하여 직접 만들어 보면 도움이 될 것이라 생각합니다.
참고로 디자인 감각이 없어, 색상이 이상하네요. 이렇게 저렇게 변경 해 보아도 시간만 흘러 이대로 올려 봅니다.
HTML/CSS 소스
<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>
브라우저 실행 결과
소스설명
- 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 속성에 대하여 알아 보았습니다.
'프로그래밍 > HTML, CSS, JavaScript' 카테고리의 다른 글
[자바스크립트] 현재시간 화면에 표시하기 (4) | 2018.06.20 |
---|---|
[HTML/CSS] 텍스트 그림자 효과 꾸미기 (4) | 2018.06.19 |
CSS를 이용한 문자열(제목) 자르기 / white-space, text-overflow (1) | 2018.05.27 |
DIV 배경이미지 변경하기 / CSS 배경설정 자바스크립트로 제어하기 (9) | 2018.05.26 |
자바스크립트 배열의 선언 및 사용법 예제 (10) | 2018.04.24 |