고정 헤더 영역
상세 컨텐츠
본문
- 텍스트 크기를 늘리거나 줄일 수 있는 예제입니다
- 애니메이션 효과를 넣어서 좀 더 부드럽게 전환할 수 있습니다.
- 버튼에 커서를 올릴 때 색상을 부여할 수 있습니다.
- 일부 내용을 숨기고 read more을 통해 읽을 수 있습니다.
↓ ↓ ↓ ↓ ↓ <시작 | 파일명 파일명 : jq6.html > ↓ ↓ ↓ ↓ ↓
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link type="text/css" rel="stylesheet" a href="css/jq6.css"/>
<script type="text/javascript" src="js/js6.js"></script>
</head>
<body>
<div>
<div id="container">
<h2>텍스트 크게 조정</h2>
<div id="switcher">
<div class="Label"> 글씨 크기 변경</div>
<button id="sw-default">보통</button>
<button id="sw-large">크게</button>
<button id="sw-small">작게</button>
</div>
<div class="speech">
<p><b>[속보] 검찰, 박 전 대통령에 징역 30년·벌금 1185억 구형.</b></p>
<p>
"박 전 대통령, 헌정사에 지울 수 없는 오점 남겨"
"밀실에서 경제 권력자들에게 최순실 이익제공 요구"
"쌈짓돈으로 만든 국민연금을 재벌 승계 수단으로 이용"
</p>
<br>
<a href="#" class="more">read more</a>
<p>
"비선실세 위해 대통령 권한 사유화"
"국정농단하고 헌법 가치 훼손"
"권위주의 정부 정경유착 답습"
"재벌 승계 돕는데 국민연금 악용"
"국민에게 좌절감과 박탈감 줘"
</p>
</div>
</div>
</div>
</body>
</html>
↑ ↑ ↑ ↑ ↑ <종료 | 파일명 파일명 : jq6.html > ↑ ↑ ↑ ↑ ↑
|
[ Console 결과]
|
[Github 안내]
- 해당 예제는 espriter_practice/WebContent/'03_08_jQuery_tutorial2 ' 에 있습니다.
본 포스팅은 IT 교육기관인 KIC 캠퍼스에서 공부하며 작성한 리포트입니다.
혹시 잘못된 내용이 있거나 문제 소지시 댓글 남겨주시면 조치하겠습니다.
'Development > JS' 카테고리의 다른 글
| jQuery - Ajax로 자료 읽기 예제 (0) | 2018.02.28 |
|---|---|
| jQuery - jQuery 기본 예제 #8 (0) | 2018.02.27 |
| jQuery - jQuery 기본 예제 #7 (0) | 2018.02.27 |
| jQuery - jQuery 기본 예제 #6 (0) | 2018.02.27 |
| jQuery - jQuery 기본 예제 #5 (0) | 2018.02.27 |
| jQuery - jQuery 기본 예제 #4 (0) | 2018.02.27 |
| jQuery - jQuery 기본 예제 #3 (0) | 2018.02.27 |
댓글 영역