Web programming

(22.12.10)CSS: A νƒœκ·Έ 속성 (link, visited, hover, active), HTML ν…Œμ΄λΈ” λ§ˆμš°μŠ€μ˜€λ²„ 이벀트

ν”„λ‘œκ·Έλž˜λ¨Έ μ˜€μ›” 2022. 12. 11.

 

CSS: A νƒœκ·Έ 속성 (link, visited, hover, active)

 

 

a:link : λ°©λ¬Έ μ „ 링크 μƒνƒœμ΄λ‹€.

 

a:visited : λ°©λ¬Έ ν›„ 링크 μƒνƒœμ΄λ‹€.

 

a:hover : 마우슀 μ˜€λ²„ ν–ˆμ„ λ•Œ 링크 μƒνƒœμ΄λ‹€.

 

a:active : 클릭 ν–ˆμ„ λ•Œ 링크 μƒνƒœμ΄λ‹€.

 

μ˜ˆμ‹œ

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
a:link{
 text-decoration:none;
 color: black;}
a:visited{
 text-decoration:none;
 color: black;}
a:hover{
 text-decoration:none;
 color: white;}
a:active{
 text-decoration:none;
 color: white;}
 
</style>
</head>
<body>
<header> <h2>1λΆ„ λŒ„μŠ€ν•™μŠ΅ν•˜κΈ°</h2></header>
<nav>
<font size=4><b>
 <span id="id">&emsp;<%=userid%></span>&emsp;
 <span id="loginbtn"><a href=lmslogin?cmd=loginform>둜그인</a>&emsp;</span>
 <span id="logout"><a href="javascript:logout();">λ‘œκ·Έμ•„μ›ƒ</a>&emsp;</span>
 <span id="joinmem"><a href="lmslogin?cmd=joinmem">νšŒμ›κ°€μž…</a>&emsp;</span>
 <span id="my_info"><a href="lmslogin?cmd=my_info">내정보 λ³΄λŸ¬κ°€κΈ°</a>&emsp;</span>
 <a href="javascript:loginOK();">λ™μ˜μƒ ν•™μŠ΅</a>&emsp; 
 <a href="/index.jsp">ν™ˆμœΌλ‘œ</a></b>
 </font> 
 </nav>
cs

 

 

 

μ‹€ν–‰κ²°κ³Ό:

λ™μ˜μƒ ν•™μŠ΅μ— 마우슀 μ»€μ„œλ₯Ό κ°€μ Έλ‹€ λŒ”μ„ λ•Œ


 

HTML ν…Œμ΄λΈ” λ§ˆμš°μŠ€μ˜€λ²„ 이벀트

 

1
2
3
4
<style>
.changeColor {
      background-color: #bff0ff;}
</style>
cs

색이 λ°”λ€ŒλŠ” cssμ½”λ“œ

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
  $(document).ready(function(){
      changeColor();
      clickTd();
      clickTr();
  })
 
  function changeColor(){
      $('#table tr').mouseover(function(){
         $(this).addClass('changeColor');
      }).mouseout(function() {
         $(this).removeClass('changeColor');
      });
  }
</script>
cs

jQueryλ ˆλ”” ν•¨μˆ˜λ‘œ table의 tr을 μ°Ύμ•„ 마우슀λ₯Ό 올리면 changeColorλΌλŠ” classλ₯Ό λ™μ μœΌλ‘œ μƒμ„±ν•΄μ£ΌλŠ” ν•¨μˆ˜μž…λ‹ˆλ‹€.

 

마우슀 μ»€μ„œκ°€ tr μœ„μ—μ„œ λ‚΄λ €κ°€λ©΄ 생성해쀀 classκ°€ μ—†μ–΄μ Έμ•Όν•˜κΈ°μ— removeClass()ν•¨μˆ˜λ₯Ό μ‚¬μš©ν•˜μ—¬ μ—†μ• μ€λ‹ˆλ‹€.

 

μ‹€ν–‰ κ²°κ³Ό : 

첫번째 tr에 μ»€μ„œλ₯Ό μ˜¬λ Έμ„ λ•Œ

λŒ“κΈ€