폰트 키우기
'-' 버튼을 클릭하면 본문의 폰트를 작아지게 하고, '+' 버튼을 누르면 폰트를 키워봤습니다. 그리고 다시 처음으로 돌아가고 싶으면 '초기화' 버튼을 누르면 돌아가게도요.
<body>
<p class="btnBox">
<button class="zoomOut"> - </button>
<button class="origin"> 초기화 </button>
<button class="zoomIn"> + </button>
</p>
<p class="fontSize">12px</p>
<div id="txtBox">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Modi id autem doloribus ipsum ullam esse, error quibusdam
consequatur consectetur, quod accusantium, dolorum eum
perferendis explicabo quisquam quis ut neque placeat?
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Modi id autem doloribus ipsum ullam esse, error quibusdam
consequatur consectetur, quod accusantium, dolorum eum
perferendis explicabo quisquam quis ut neque placeat?
</div>
</body>
가볍게, 버튼을 세 개 만들어주고, 기본값을 12px로 지정해줍니다. p태그로 위치도 잡아줬습니다. div 박스를 만들어 lorem으로 아무 텍스트나 불러 옵니다.
<script>
$(function(){
let basicFont = 12; // 기본 폰트 크기를 12px로 지정
$(".zoomIn").click(function(){ // zoomIn을 누르면, 함수 발생
basicFont++; // basicFont는 1씩 계속 증가하고,
// 20 넘어가면 20에서 동작 멈춤
if( basicFont > 20 ) {basicFont = 20; return false;}
// 기존에 크기가 몇인지 알려주던 p 태그의 텍스트도 현재 폰트 크기랑 같이 변경
$(".fontSize").text(basicFont + "px");
// txtBox의 폰트 크기는, 변수 basicFont 크기대로 감
$("#txtBox").css("font-size", basicFont);
});
$(".zoomOut").click(function(){ // zoomOut을 누르면, 함수 발생
basicFont--; // basicFont가 1씩 계속 감소
// 10 이하로 내려가면 10에서 동작 멈춤
if( basicFont < 10 ) {basicFont = 10; return false;}
$(".fontSize").text(basicFont + "px");
$("#txtBox").css("font-size", basicFont);
});
$(".origin").click(function(){
$(".fontSize").text("12px");
$("#txtBox").css("font-size", "12px");
});
});
</script>
다음과 같은 모습이 나옵니다 ㅎ 직접 크기를 키우고 줄여 보세요.
윈도우 Scroll 이벤트
예를 들어 이 포스팅만 해도, 글꼴 관련된 서식이나 줄맞춤, 기본모드와 HTML 모드 등 다양한 것을 설정할 수 있는 메뉴바가 스크롤을 내림으로써 사라진다면 굉장히 불편할 것입니다. 그렇기 때문에 스크롤을 내릴 때, 일정 부분에서 필요한 메뉴가 고정이 되는 기능을 한 번 jQuery로 해 보겠습니다.
하나의 페이지라 생각했을 때, 저희는 저 카테고리에서 여러가지 메뉴를 이용할 것일 텐데요. 스크롤을 내릴 때마다 저 카테고리가 위에 달려 가면 매우 불편하겠죠? 일정 위치까지 내렸을 때 position: fixed 속성을 부여한 on 클래스를 붙여줄 겁니다.
jQuery를 이용하여 코드를 짤 거고, 만약 ~라면 on을 붙이고, 그 외엔 on을 제거하라 할 테니, if문과 addClass, removeClass를 사용하면 될 것 같습니다.
<script>
$(window).scroll(function(){ // 윈도우에서 스크롤을 내리면 함수 실행
if($(this).scrollTop() > $("header").height()) { // 만약 ScrollTop이 header의 위치보다 커지면
// header의 위치보다 크다는 게, header보다 Top에서부터 더 멀어졌단 것이니, header 이후부터 position이 fixed.
$("#quick").addClass("on"); // #quick(카테고리)에 on을 붙여라
}
else { // 아니면
$("#quick").removeClass("on"); // on을 클래스 제거해라
}
});
</script>
아래는 코드펜을 이용한 동작 화면입니다.
'FE > jQuery' 카테고리의 다른 글
| [jQuery] 아코디언 메뉴 개발 (0) | 2021.06.30 |
|---|---|
| [jQuery] 애니메이션 메소드 / CSS 속성을 변수 지정 (0) | 2021.06.29 |
| [jQuery] 라이브러리 연동 2 / class 동작 (0) | 2021.06.28 |
| [jQuery] 라이브러리 파일 연동 및 복습 (0) | 2021.06.26 |
댓글