Lined Notebook

4. 스킨 임의 사용자화에 관하여

by 프라치노
320x100

몇몇 분들은 스킨이 제공하지 않는 기능을 추가하거나 기본 틀에 벗어나 스킨의 모양새를 개조하고 싶어 스킨의 코드를 편집하려고 할 것입니다. 그러나 그런 분들은 이 스킨을 편집하기에 약간의 고통이 따를 수 있습니다.

티스토리 스킨, 프라치노 공책은 로드 속도 향상을 위해 압축되고 최적화된 별도의 자바스크립트와 스타일 시트 파일이 사용됩니다. 덕분에 프라치노 공책을 적용한 블로그들은 페이지 로드 속도가 빠른 편에 속하다는 장점이 있죠. 하지만 최적화된 코드는 사람이 보기에 어려울 수 있습니다. 그리고 전문 지식이 부족한 상태에서 코드를 편집하면 페이지에 문제가 발생할 수 있으며 이는 접근성과 속도 저하로 이어질 수 있습니다.

소스 파일 편집은 되도록 하지 말 것

되도록이면 스킨이 제공하는 자바스크립트와 스타일 시트 파일은 편집하지 말 것을 권장합니다. 정말 부득이하게 편집해야 한다면 차라리 소스 파일을 새로 만들어 스킨의 HTML에 경로를 지정할 것을 권장합니다.

스킨 편집 페이지의 CSS 편집

스타일 시트 같은 경우 이미 사용자화 코드를 넣을 수 있는 파일이 제공되며 추가적인 HTML을 편집할 필요가 없습니다. 이는 스킨 편집 페이지에서 ‘html 편집’ 버튼 → ‘CSS’ 탭을 눌러 이동하여 스타일 시트 코드를 추가하면 됩니다. 코드를 편집하기 전에 스킨 편집 페이지에서 ‘일반 항목’의 ‘사용자화된 CSS 활성화’ 옵션이 켜져 있는지 확인하세요. 옵션이 꺼져 있으면 편집된 스타일 시트는 적용되지 않습니다.

브라우저의 개발자 도구

스킨을 임의 사용자화하기 위해 스타일 시트 코드를 추가할 때 브라우저의 개발자 도구는 도움이 될 수 있습니다. 대부분의 브라우저는 개발자 도구를 지원하며, 키보드의 Shift + Ctrl + I 키(macOS는 option + command + I 키)를 누르면 도구를 열 수 있습니다. 없다면 브라우저 환경설정에서 개발자 기능이 꺼져 있는지 확인하세요.

개발자 도구의 ‘요소 선택 도구’를 사용하여 원하는 요소를 선택하면 선택된 요소에 적용된 스타일 시트의 속성을 확인할 수 있습니다. 이것을 참조하여 변경할 선택자와 속성값 코드를 위에 설명한 곳에 추가하면 됩니다.

페이지 속도나 검색 최적화를 목적으로 한 임의 스킨 사용자화

블로그의 페이지 속도 또는 검색 최적화(Search Engine Optimization)를 위해 스킨을 임의로 사용자화하는 것은 절대로 권장하지 않습니다. 티스토리와 프라치노 공책은 이미 최적화가 이루어져 있으며 별도의 행동을 취할 필요가 없습니다. 특히 검색 최적화를 위해서라면 오히려 작성된 글의 HTML 구조를 확인해보는 것이 좋습니다.

광고 삽입을 목적으로 한 임의 스킨 사용자화

수익을 위해 블로그에 별개의 광고를 삽입할 때에는 광고 사업자가 안내하는 방법 하에 스킨을 편집해야 합니다.

개인 도메인의 로그인 배너 장착을 위한 임의 스킨 사용자화

프라치노 공책은 개인(2차) 도메인에 발생되는 로그인 문제에 관한 불편을 해소하기 위해 기본(1차) 도메인으로 우회를 유도하는 기능이 기본으로 제공됩니다. 따라서 별도의 배너를 장착할 필요가 없습니다.

jQuery(제이쿼리) 기반 플러그인 사용을 위한 임의 스킨 사용자화

프라치노 공책은 jQuery 라이브러리를 사용하지 않지만 티스토리는 jQuery 라이브러리 버전 3.2.1을 사용합니다. 따라서 스킨에 jQuery 라이브러리 기반 플러그인을 사용할 때 jQuery 라이브러리(jquery.min.js)를 불러오기 위한 HTML 코드를 추가로 넣을 필요가 없습니다.

300x250
반응형

이 글의 태그

블로그의 정보

프라치노 공책

프라치노

활동하기