-
[2주][4일][1~2교시] CSS: 가상선택자. 롤오버효과, 하이퍼링크 등N스크린하이브리드앱과정/HTML&CSS 2013. 7. 25. 10:44
**가상선택자**(선택자 끝에: 가상선택 내용붙임)
※ 스타일 css 적용은 <head>태그 안에서 이루어집니다!!!!!!!!!
※ id보다 class가 우선순위가 높다!!!
☆ 표에만(cc태그에만) 스타일 적용
<style type="text/css">
.cc{ <-- cc 클래스
width:500px;
background-color:#ff0; 노란 배경
}
.cc td{border-bottom:1px #f00 solid;} "a" 태그에만 스타일 적용body{
font-family:"맑은 고딕";
}
</style>밑줄 효과가 그어졌다.
소스
☆ 롤오버효과 - 표 배경
<style type="text/css">
.cc{
width:500px;
background-color:#ff0;
}
.cc td{border-bottom:1px #f00 solid;}
.cc tr:hover{background-color:#00f;}
body{
font-family:"맑은 고딕";
}
</style>☆ 롤오버효과 - 셀 안의 글자
<style type="text/css">
a{
text-decoration:none;
}
.cc{
width:500px;
background-color:#ff0;
}
.cc td{border-bottom:1px #f00 solid;}
.cc tr:hover{
color:#00f;
}
body{
font-family:"맑은 고딕";
}
</style>두번째 행의 셀 안의 글자가 파란색이 되었다.
☆ 하이퍼링크 밑줄 없애기
<style type="text/css">
a{
text-decoration:none;
}
.cc{
width:500px;
background-color:#ff0;
}
.cc td{border-bottom:1px #f00 solid;}
.cc tr:hover{background-color:#00f;}
body{
font-family:"맑은 고딕";
}
</style>☆ 하이퍼링크에 롤오버 적용
<style type="text/css">
a{
text-decoration:none;
}
.cc{
width:500px;
background-color:#ff0;
}.cc td{border-bottom:1px #f00 solid;}
a:hover{
color:#f00;
}body{
font-family:"맑은 고딕";
}
</style>전체소스
☆ 하이퍼링크가 색 바뀌면서 롤오버효과 주기
<style type="text/css">
a{
text-decoration:none;
}
.cc{
width:500px;
background-color:#ff0;
}
.cc td{border-bottom:1px #f00 solid;}a:hover{
color:#f00;
}
.dd a{
color:#0f0;
}
.dd a:hover{
color:#00f;
text-decoration:underline;
}body{
font-family:"맑은 고딕";
}</style>
마우스를 갖다 대었을 때
☆ 표에 밑줄효과 주기
(1) 표에 클래스 이름을 지정해준다.
<!표1>
<table class="cc">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr>
<td class="ee">7</td>
<td class="ee">8</td>
<td class="ee">9</td>
</tr>
</table>(2) 스타일을 적용한다.
<style type="text/css">
a{
text-decoration:none;
}
.cc{
width:500px;
background-color:#ff0;
border-collapse:collapse; //셀 안의 여백을 없애준다
cursor:pointer; //마우스를 갖다댈 때 손가락표시로 바뀐다(테이블 전체)
}
.cc td{border-bottom:1px #f00 solid;}
.cc tr:hover{
background-color:#fff;
color:#0f0;
}
a:hover{
color:#f00;
}
.dd a{
color:#0f0;
}
.dd a:hover{
color:#00f;
text-decoration:underline;
}
.cc .ee{border-bottom:5px #f00 solid;}
body{
font-family:"맑은 고딕";
}
</style>'N스크린하이브리드앱과정 > HTML&CSS' 카테고리의 다른 글
[2주][5일][1~2th] HTML5 맛보기! (0) 2013.07.26 [2주][4일][1~2교시] CSS: 레이아웃 만들기, 영역 나누기. (0) 2013.07.25 [2주][3일] 웹표준: market.html에 css 스타일 적용하기 (0) 2013.07.24 [2주][3일] 웹표준: css선택자의 3가지 종류. {아이디/클래스/태그} 선택자 (0) 2013.07.24 [2주][2일차]웹표준 (0) 2013.07.23
