jQuey 강좌 7 - 폰트 크기 변경하기

프로그래밍/jquery 2010/03/25 22:53
  • 시작하기 전에
  • 문제
    • 버튼이나 링크를 클릭해서 폰트의 크기를 변경하고 싶다.
      (대부분의 뉴스 사이트에서 구현되어 있는 기능)
      jQuery 강좌 - 폰트 크기 바꾸기

      그림 1-1


  • 해결
    • 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 이벤트를 탐지하도록 이벤트를 걸어준것입니다.(여기서 걸어준다는 표현은 전문용어가 아니므로 참고해주시기 바랍니다.)

      나머지 부분은 주석으로 자세히 설명되어 있어서 더이상 설명은 생략하겠습니다만, 질문이 있으시면 언제나 댓글란을 이용해주세요.
  • 참고자료
저작자 표시 비영리 변경 금지

'프로그래밍 > jquery' 카테고리의 다른 글

jQuery 강좌 - 핸드폰 번호만 입력받기  (4) 2010/05/01
jQuey 강좌 7 - 폰트 크기 변경하기  (2) 2010/03/25
jQuery 강좌 - Selector(선택자) 개념  (2) 2010/02/07
jQuey 강좌 6 - Select 필드를 동적으로 변경하기 width PHP  (8) 2009/11/14
Posted by 웹눈
TAG ,
트랙백 0개, 댓글 2개가 달렸습니다