| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 | 29 | 30 | 31 |
- ctrl+/
- Parent
- SUB함수
- addClass
- excel중복체크
- calc.minus
- selectedIndex
- 1521
- index %
- Math.round()
- FileZilla설치
- Math.floor()
- push오류
- is_check
- Math.ceil()
- selectoptions
- FileZilla다운로드
- 증가값
- 주석이 먹히지 않을 때
- Excel
- 파일질라설치오류
- hide
- Git
- removeClass
- 파일질라다운로드
- 파일질라설치
- calc.plus
- slideUp
- toFixed()
- 소스트리인증실패
- Today
- Total
잡동사니에도 사랑을
[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속성은 단 하나의 값만을 바꿀 때
'JAVA_EE > HTML' 카테고리의 다른 글
| [21.09.09] exam09 - <thead>/<tbody>/<tfoot> (0) | 2021.09.09 |
|---|---|
| [21.09.09] exam10 - cellpadding / cellspacing / colspan / rowspan (0) | 2021.09.09 |
| [21.09.09] exam12 - 블록 레벨 요소(div, p, h1, ul)/인라인 레벨 요소(span) (0) | 2021.09.09 |
| [21.09.09] exam13 - <mark>/<abbr>/<dfn>/<cite>/<small>/<ruby> (0) | 2021.09.09 |
| [21.09.09] exam14 - <blockquote>사용한 인용문 구현 (0) | 2021.09.09 |
