**<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;
}
'N스크린하이브리드앱과정 > HTML&CSS' 카테고리의 다른 글
| [3주][4일][1~2th] HTML: 요소의 크기 지정 및 여백 처리하기. 외 2종 (0) | 2013.08.01 |
|---|---|
| [3주][3일][1~2th] HTML5: {ul,li}태그, 클래스 사용하기 예제(2) (0) | 2013.07.31 |
| [3주][1일][5~7th] 자바스크립트(JAVA SCRIPT) (0) | 2013.07.29 |
| [3주][1일][1~2th] HTML5 : 표 이쁘게 꾸미기(이클립스) (0) | 2013.07.29 |
| [2주][5일][5~7th] 자바스크립트 실습. alert = 경고창. (0) | 2013.07.26 |