**<ul><li>태그 활용**
1. li태그 사용하기
<style type="text/css">
ul{
list-style-type: none;
}
</style>
(1) 본래의 <li>태그
(2) 스타일을 적용했을 때
2. 배경 적용
ul{
list-style-type: none;
background:#ff0;
width:250px;
height:250px;
}
3. 행 간격 주고 li에 배경주기
li{
background:#0f0;
margin: 10px; //행 간격
padding:10px;
}
4. 셀 간격 넓히기
li{
background:#0f0;
margin: 10px; //행 간격
padding:10px 10px 10px 20px;
}
5. 배경이미지 적용하기
li{
background-image:url("bg_check.jpg");
margin: 10px;
padding:10px 10px 10px 20px;
}
6. 옆으로 나란히 놓기
ul{
list-style-type: none;
width:700px;
height:250px;
}
li{
float:left;
background-image:url("bg_check.jpg");
background-repeat:no-repeat;
background-position:20px 10px;
margin: 10px 10px 10px -10px;
padding:10px 10px 10px 20px;
}
7. 링크 스타일 꾸미기(클래스 사용)
스타일 부분
.top a:link{
text-decoration: none;
color:#555;
}
.top a:hover{
text-decoration: underline;
background-image:url("bg_check.jpg");
color:#f55;
}
.top a:visited{
text-decoration: none;
color:#0f0;
}
.top a:active{
text-decoration: none;
color:#000;
}
바디 부분
<nav class="top">
<body>
<nav class="top">
<ul>
<li> <a href="#">home</a>
<li> <a href="#">previous page</a>
<li> <a href="#">next page</a>
</ul>
</nav>
<nav class="top">
<ul>
<li> <a href="#">home</a>
<li> <a href="#">previous page</a>
<li> <a href="#">next page</a>
</ul>
</nav>
</body>
(1) home: 눌렀을 때(visited)
previous page : hover효과
(2) next page: 눌렀을 때(visited)
previous page : hover효과(밑줄)
.top a:hover{
text-decoration: underline;
background-image:url("bg_check.jpg");
color:#f55;
}
(3) next page : hover효과(배경이미지 적용)
.top a:hover{
text-decoration: underline;
background-image:url("bg_check.jpg");
color:#f55;
}
nineDeveloper
안녕하세요 현직 개발자 입니다 ~ 빠르게 변화하는 세상에 뒤쳐지지 않도록 우리모두 열심히 공부합시다 ~! 개발공부는 넘나 재미있는 것~!