[21.09.09] exam11 - id 속성과 class속성(버튼 색 바꾸기)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#subjectA:link { color: black; text-decoration: none; }
#subjectA:visited {color: blue; text-decoration: none; }
#subjectA:hover {color: green; text-decoration: underline; }
#subjectA:active {color: magenta; text-decoration: none; }
.num:link { color: black; text-decoration: none; }
.num:visited {color: black; text-decoration: none; }
.num:hover {color: green; text-decoration: underline; }
.num:active {color: black; text-decoration: none; }
.num하게 되면 클래스 속성이라는 의미
</style>
</head>
<body>
<div id="content">
<!-- 게시판 제목 -->
<div id="title">
<h1>공지사항</h1>
<h2>우리 사이트의 새로운 소식을 알려드립니다.</h2>
</div>
<hr/>
<!-- 게시물 리스트 -->
<div id="list">
<table border="1" width="800" align="center">
<!-- 표 제목 -->
<thead>
<tr>
<th width="50">번호</th>
<th>제목</th>
<th width="100">작성자</th>
<th width="70">조회수</th>
<th width="120">작성일</th>
</tr>
</thead>
<!-- 본문 영역 (글목록)-->
<tbody>
<tr>
<td align="center">3</td>
<td><a href="#" id="subjectA">웹 표준 + 웹 접근성 실무완성 수강안내</a></td>
<td align="center">관리자</td>
<td align="center">123</td>
<td align="center">2014-05-01</td>
</tr>
<tr>
<td align="center">2</td>
<td><a href="#">HTML5+반응형웹 수강안내</a></td>
<td align="center">관리자</td>
<td align="center">123</td>
<td align="center">2014-05-01</td>
</tr>
<tr>
<td align="center">1</td>
<td><a href="#">Javascript+jQuery+Ajax 수강안내</a></td>
<td align="center">관리자</td>
<td align="center">123</td>
<td align="center">2014-05-01</td>
</tr>
</tbody>
<!-- 하단 영역 (페이지번호,쓰기링크) -->
<tfoot>
<tr>
<td colspan="5" align="center">
<a href="#" class="num">1</a>
<a href="#" class="num">2</a>
<a href="#" class="num">3</a>
<a href="#" class="num">4</a>
<a href="#" class="num">5</a>
</td>
</tr>
<tr>
<td colspan="5" align="right">
<a href="#">새 글 쓰기</a>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</body>
</html>
**<a>태그가 여러번 나오는데, <a>태그에서 style 속성을 부여하면 모든 <a>태그에 다 적용된다.
특별히 웹 표준 + 웹 접근성 ~~에 걸고 싶다? 그러면 <td><a href="#" id=""> id속성을 갖고 있는 스타일에 #을 걸어준다.
<a href="#" id="subjectA"> : "#subjectA"라는 아이디 속성을 가진 것을 찾아 그것을 style(꾸미겠다) ~~를 의미한다.
#subjectA:link { color: red; text-decoration: none; } - <a>태그가 걸렸을 때
#subjectA:visited {color: blue; text-decoration: none; } - 마우스에서 손을 뗐을 때
#subjectA:hover{color: green; text-decoration: underline; } - 마우스가 그냥 올라갔을 때 (누르는 것이 아니다)
#subjectA:active{color: magenta; text-decoration: none; } - 마우스 누르고 있을 때
#을 걸면 맨 위 페이지를 보여달라는 말
class속성은 <a>태그가 많을 때
id속성은 단 하나의 값만을 바꿀 때
