티스토리 반응형 스킨 만들기(Section 28) - 자바스크립트 활용하기(1)

티스토리 반응형 스킨 만들기 (tistory-one 스킨) 의 마지막 섹션인 자바스크립트 활용하기 포스트입니다.

거창하게 "반응형 스킨 만들기"라고 제목을 지었지만 막상 반응형 스킨을 만드려면 어떻게 해야한다는 설명보다는 티스토리 치환자 중심의 스킨 따라만들기가 되어버렸네요..;;
그래도 마무리는 해야하기때문에 마지막인 "자바스크립트 활용" 섹션을 진행하도록 하겠습니다.

 

 

자바스크립트?

javascript는 객체 기반의 스크립트 프로그래밍 언어입니다.(java와는 상관없는 언어입니다.)
이제는 css3를 이용하여 구현할 수 있는 홈페이지 메뉴의 마우스오버 애니메이션이나 쇼핑몰의 롤링 배너 등등 정적인 html 마크업만으로는 할 수 없는 동적인 기능(대표적으로 메뉴, 이미지 전환 애니메이션 또는 탭 메뉴 이벤트 등등)을 만들때 사용하는 언어입니다.
웹 브라우저에서 많이 사용하지만 서버 사이드 프로그래밍(node.js)도 지원하는 멋진 언어입니다.
많이 들어보셨을 jquery도 자바스크립트의 라이브러리 중 하나입니다.
더욱더 자세한 정보나 사용법을 숙지하시려면 자바스크립트 전문 사이트에서 정보를 얻으시길 바랍니다.
자바스크립트 참고 사이트 : https://www.w3schools.com/js/default.asp

※ 자바스크립트는 웹브라우저에서 가장 많이 사용하기 때문에 html, css의 선행학습이 필요합니다.

 

 

html, css, javascript를 알고 있는 사람이라면 티스토리 스킨은 혼자서도 뚝딱 만들 수 있기 때문에 마크업과 스크립트 사용을 못하는 사람들을 위하여 예제 따라하기 위주로 설명드리겠습니다.

 

자바스크립트 설정을 어떻게 할 것인가?

스크립트를 이용하여 조금 더 동적으로 블로그를 조작할 것인데. 그 스크립트 환경설정값을 어떠한 방식으로 적용 할 것인가를 고민해봐야합니다.

1. 첫번째 : javascript와 설정값을 미리 skin.html에 그냥 박아 넣는 방법
2. 두번째 : javascript파일에 설정값도 함께 넣고 skin.html 하단에 링크를 하는 방법
3. 세번째 : javascript파일을 링크하고 설정값들은 "사이드바"에 넣는 방법
4. 네번째 : javascript파일을 링크해두고 설정값들도 파일로 링크하는 방법(javascript 변수 또는 json 변수)  

위의 네개의 방법이 대체적으로 많이 사용하는 방법입니다.

javascript 변수에 대한 설명이나 json을 이용한 javascript 컨트롤은 나중에 시간되시면 따로 공부하시고..
우리는 기존의 script.js파일에다가 함수를 만들고 config.js라는 스크립트를 하나더 만들어 사용하도록 하겠습니다.

※ 환경설정 컨트롤 방법은 편하신대로 하시면 됩니다만 우리는 "config.js"로 하겠다는거 잊지 마세요~

 

 

그럼 이제 "블로그 제목(블로그 최상단)"을 이미지가 있다면 이미지를 나오게!!
이미지가 없다면 블로그 제목이 나오도록하는 스크립트를 짜보도록하겠습니다.

 

STEP 1. 자바스크립트 파일 새로 만들기

우리는 기존에 images/script.js 파일이 있지만 설정값들을 따로 관리하는 config.js 파일을 만들어서 작업을 해보도록 하겠습니다.
파일명은 마음대로 지으셔도 상관없습니다만 따라하시려면 config.js로 만드세요~

새로 만든파일은 당연히 images/config.js 안에다가 업로드 합니다.

우선 script.js 파일안에 우리가 원하는 동작을 하기 위한 스크립트 코드를 추가해보도록 하겠습니다.

 

 

STEP 2. 블로그 타이틀 또는 프로필 이미지 노출 설정 만들기

프로필 이미지가 없는 분들은 블로그 타이틀만 노출되도록 하고 사용하지만 블로그의 로고가 있으신분들은 프로필 이미지를 넣어 블로그 상단에 배치를 합니다.
이럴 경우 블로그 타이틀 코드(누구야 티스토리)를 삭제하고 프로필 이미지(https://tistory1.daumcdn.net/tistory/1976019/attach/9d929ff985204507ac252516435c0650)를 넣으셔도 무관하지만 매번 소스를 삭제하고 넣고를 반복하지 않고 config.js 파일에서 설정파일만 설정하면 자동적으로 적용되도록하는 스크립트를 만들어 보도록 하겠습니다.

script.js 의 상단에 아래와 같은 코드를 추가합니다.

    $.config = {
        logo : function(logo, title, img) {
            logo = logo !== undefined ? logo : false;
            title = title !== undefined ? title : ".blog-logo .title";
            img = img !== undefined ? img : ".blog-logo .img-profile";

            if (logo === true) {
                $(img).show();
                $(title).hide();
            } else {
                $(img).hide();
                $(title).show();
            }
        }
    };

$.config 라는 배열에 logo라는 함수를 추가했습니다.

1. logo 인자에 true가 넘어오면 블로그 타이틀은 감추고 블로그 프로필 이미지가 노출되도록 설정
2. 블로그 타이틀을 지정안하면 자동적으로 .blog-logo 아래의 .title 클래스를 가진 요소를 지정
3. 프로필 이미지 클래스나 아이디를 지정하지 않으면 .blog-logo 아래의 .img-profile 클래스를 가진 요소를 지정

 

위의 기능을 사용하기 위하여 미리 만들어둔 config.js 파일에 아래와 같이 추가합니다.

config.js 파일을 아래와 같이 코드를 생성합니다.

;(function($) {
    /**
     * logo 이미지 노출 여부
     *
     * $.config.logo( true/false , "블로그제목 ID(#) 또는 클래스(.)", "프로필 이미지 ID(#) 또는 클래스(.)" );
     * 예 : $.config.logo(true, "#blogTitle", "#profileImg");
     *
     * 첫번째 인자인 true/false를 넣지 않으면 false가 자동으로 입력됩니다.
     * 뒤의 블로그제목과 프로필 이미지의 대상을 지정안하면 기본값이 들어갑니다.
     */
    $.config.logo(true);
})(jQuery);

 

자세한 사용법은 주석으로 달아두었습니다.
사용법은 $.config.logo(true) 이렇게 넣어두면 프로필 이미지가 블로그 상단에 노출되도록 설정하였습니다.
만약 블로그 타이틀이 노출되게 하고 싶으시다면 $.config.logo(); 또는 $.config.logo(false); 라고 지정하면 끝입니다.

그럼 $.config.logo(true); 로 설정했을경우 화면은 아래와 같이 프로필 이미지가 노출됩니다.

로고 노출 : $.config.logo(true);

반대로 블로그 타이틀을 노출 시키려면 $.config.logo(false);를 설정하여 결과를 보면 아래와 같이 노출됩니다.

타이틀 노출 : $.config.logo(false);

끝났습니다.
혹시 두개다 노출하시려고 하시는 분들은 스크립트 적용하지 마시고 skin.html에 직접 마크업을 하시면 됩니다.;;;