상세 컨텐츠

본문 제목

jQuery - jQuery 기본 예제 #6

Development/JS

by 에스프리터 2018. 2. 27. 18:23

본문

- 텍스트 크기를 늘리거나 줄일 수 있는 예제입니다
- 애니메이션 효과를 넣어서 좀 더 부드럽게 전환할 수 있습니다.
- 버튼에 커서를 올릴 때 색상을 부여할 수 있습니다.
- 일부 내용을 숨기고 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 안내] 
- 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

태그

관련글 더보기

댓글 영역