티스토리 뷰

Web Dev/jQuery

jQuery 강좌7. 폰트 크기 변경하기

ezBuilder 2013. 3. 8. 09:35
반응형
  • 문제
    • 버튼이나 링크를 클릭해서 폰트의 크기를 변경하고 싶다.
      (대부분의 뉴스 사이트에서 구현되어 있는 기능)
  • 해결
    • jQuery를 통해 현재의 폰트 사이즈를 알아낸 다음 그 수치에 버튼을 클릭할때마다 +1 이나 -1 을 해줌으로써 폰트 사이즈를 변경합니다.
  • 토의
    • 위 그림 1-1 에서 볼수 있듯이 크게, 작게 링크를 클릭하게 되면 현재 폰트 사이즈에서 +1이나 -1을 해줍니다. 예제 소스는 아래와 같습니다.

      <head>
      < meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      < title>폰트 사이즈 바꾸기 - 웹눈의 웹이야기</title>

      < script type="text/javascript" src="jquery.txt"></script>
      < script type="text/javascript">
      //현재 폰트 사이즈를 저장할 전역 변수
      var currentFontSize ;
      //문서가 준비되었는지 이벤트를 걸어준다.
      $(document).ready(init);
      //초기화

       

      function init()
      {
      // 1. 크게, 작게 링크에 이벤트를 걸어줍니다.
      $("#fontControll li a").click(clickHandler);
      }
      //크게, 작게 링크가 클릭되었을때 처리하는 함수
      function clickHandler(e)
      {
      //이벤트 전파를 막는다.
      e.preventDefault();
      //크게, 작게 중 어느것이 클릭되었는지 판별
      var whichClicked = $(this).attr("id");
      //현재의 폰트 사이즈를 전역 변수에 저장한다.
      currentFontSize = parseInt($(".article").css("font-size"));
      //클릭된 링크에 따라 폰트를 크게 혹은 작게 설정합니다.
      switch(whichClicked)
      {
      case "larger" :
      //1폰트 크게한다.
      setFontSize(1) ;
      break ;
      case "smaller" :
      //1폰트 작게한다.
      setFontSize(-1) ;
      break ;
      }
      }
      function setFontSize($size)
      {
      var totalFontSize = currentFontSize + $size ;
      $(".article").css({"font-size":totalFontSize+"px"});
      }
      < /script>
      < style type="text/css">
      #fontControll li{
      display:inline ;
      font-size:12px ;
      }
      .article {
      font-size:12px ;
      }
      < /style>
      < /head>
      < body>
      <div id="titles">
      <h1>폰트 크기 바꾸기 예제 - <a href="http://webnoon.net" target="_blank">웹눈의 웹이야기</a></h1>
      </div>
      <div id="fontSizeControllBox">
      <ul id="fontControll">
      <li><a href="http://naver.com" id="larger">크게</a></li>
      <li><a href="http://google.com" id="smaller">작게</a></li>
      </ul>
      </div>
      <div id="contents">
      <p class="article">
      이번 예제는 뉴스 사이트에서 흔히 볼수있는 폰트 사이즈를 변경해보는것입니다.<br />
      크롬, 파이어폭스, 익스플로어7 에서 테스트 되었습니다.<br />
      이 예제의 자세한 설명은 웹눈 블로그 <a href="http://webnoon.net" target="_blank">http://webnoon.net</a> 에서 자세히 보실수 있습니다.
      </p>
      </div>

       

      < /body>

    • 코드는 매우 직관적으로 짜여져 있습니다. 여기서 "이벤트를 걸어준다" 라는 말이 모호하게 느껴질수도 있는데, 이말은 "이벤트 발생을 탐지한다" 정로도 해석할수 있겠습니다.

      즉, $(document).ready([callbackFunction]) 에서는 "문서가 로딩이 완료될때 발생시키는 이벤트" 를 탐지하기 위해서 $(document) 객체에 ready라는 이벤트를 걸어주었습니다.

      마찬가지로 크게, 작게 링크[$("#fontControll li a")]에도 click 이벤트를 탐지하도록 이벤트를 걸어준것입니다.(여기서 걸어준다는 표현은 전문용어가 아니므로 참고해주시기 바랍니다.)

      나머지 부분은 주석으로 자세히 설명되어 있어서 더이상 설명은 생략하겠습니다만, 질문이 있으시면 언제나 댓글란을 이용해주세요.

    from. http://webnoon.net/entry/jQuey-강좌-7-폰트-크기-변경하기

    반응형
    저작자표시 비영리 변경금지

    'Web Dev > jQuery' 카테고리의 다른 글

    [jQuery강좌] 1. 웹 개발자를 위한 jQuery 기본이해  (0) 2013.03.08
    jQuery 강좌8. 핸드폰 번호만 입력받기  (0) 2013.03.08
    jQuery Selector(선택자) 개념  (0) 2013.03.08
    jQuery 기본 Selector  (0) 2013.03.08
    jQuery 강좌6. Select 필드를 동적으로 변경하기 with PHP  (0) 2013.03.07
    댓글
    반응형
    공지사항
    최근에 올라온 글
    최근에 달린 댓글
    Total
    Today
    Yesterday
    링크
    TAG more
    «   2024/05   »
    일 월 화 수 목 금 토
    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
    글 보관함