친효애드온 : 커스텀 DIV 박스 모듈 (마크1)

스크립트를 써서 출력하는 Syntaxhighlighter 코드는 로딩이 다소 오래 걸려서 포스팅 출력 시간이 지연됩니다. 신형 글쓰기에 있는 코드블럭은 뭔가 많이 부족합니다. 차라리 그럴바에 그냥 직접 DIV를 꾸며서 사용하자고 생각했고 바로 실천에 옮겼습니다.

HTML, CSS, 자바스크립트 등의 코드를 직관적으로 표현하고자 할 때 사용하면 요긴합니다. 코드 뿐만 아니라 뭔가 강조하고자 하는 내용에 대한 텍스트를 작성할 때에도 좋습니다. 얼마든지 활용 가능한 모듈이라고 생각합니다. 백그라운드 색상도 커스텀 할 수 있어서 원하시는 색상코드를 넣고 사용하시면 됩니다.

커스텀 DIV 박스 모듈 미리보기

먼저 검정색 백그라운드 DIV 박스 입니다.

.rgyBG {

    margin: 10px 0;

    padding: 10px 15px;

    border-radius: 10px;

    color: #eee;

    overflow: hidden;

    text-overflow: ellipsis;

    word-wrap: break-word;

}

/* 검정 DIV박스 */

.rgyBG-Black {

    background-color: #333;

}

다음은 빨간색 DIV 박스 입니다.

/* 빨강 DIV박스 */

.rgyBG-Red {

    background-color: #FF5544;

}

마지막으로 파란색 DIV 박스 입니다.

/* 파랑 DIV박스 */

.rgyBG-Blue {

    background-color: #007AAE;

}

개인적으로는 검정색 DIV를 자주 사용할 예정 입니다. 눈에 확 들어오는걸 좋아하는데 검정색이 딱 제 스타일 입니다. 보기에도 편해보입니다. 나머지 두개의 DIV는 그냥 취향껏 사용하시면 될 것 같습니다.

CSS 세팅하기

먼저 아래의 첨부파일을 받아서 메모장으로 열어주시기 바랍니다.

친효애드온 - 커스텀 DIV박스.txt

열어보시면 위의 미리보기에 있는 코드들이 보일 것 입니다. 전체 복사하시고 티스토리의 관리자 화면으로 이동합니다. 꾸미기 > 스킨편집으로 들어가서 HTML 편집을 클릭합니다. 여기에서 3개의 탭 중 CSS 탭으로 이동합니다.

친효스킨을 기준으로 설명 드리자면 기왕이면 보기 좋게 정렬하기 위해서 Ctrl + F를 누르시고 친효애드온 시작 이라고 검색하시면 딱 저 부분이 검색이 됩니다. 바로 아래에 공간을 만들고 그대로 붙여넣기를 해주시고 적용을 하시면 됩니다. 기타 다른 스킨의 경우는 그냥 적당히 빈 공간을 아무데나 만드셔서 붙여넣기 하시면 됩니다.

HTML 세팅하기

HTML을 따로 세팅하는건 없지만, 이것과 관련된 사용 방법이 있습니다.

사용 방법

글쓰기 모드에서 설명을 드립니다. 포스팅을 작성할 때 마다 수동으로 사용하는 방법입니다. 자동으로 적용되는 방법은 애석하게도 없습니다. 현재 이 본문에서 사용된 방법을 그대로 설명드리겠습니다.

구형 글쓰기 에디터

현재 본문에 쓰여진 텍스트 입니다.

이 부분 입니다. 글쓰기를 그대로 진행합니다. 텍스트의 일부 폰트 색상은 글쓰기 에디터에서 변경한 것 입니다. 오른쪽 상단의 HTML에 체크를 해서 코딩 상태로 전환합니다.

지금 보시면 해당 텍스트를 <div class="rgyBG rgyBG-Black"> 하고, 마무리하는 </div> 로 감싸줬음을 확인할 수 있습니다. rgyBG는 커스텀 DIV 모듈의 기본 스타일을 정의해놓은 클래스명 이며, rgyBG-Black은 색상을 정의하는 클래스명 입니다. 현재는 3가지의 색상이 기본으로 들어있기 때문에 원하는 클래스명을 사용해서 div로 감싸주시면 됩니다.

예를 들어서 파란색 DIV로 감싸겠다고 한다면 <div class="rgyBG rgyBG-Blue">감싸줄 텍스트</div> 가 되는 것 입니다. 중요한 포인트는 클래스명에 rgyBG는 기본적으로 들어간다는 점 입니다. 이게 기본 스타일이 저장된 클래스명이기 때문입니다. 기본 클래스명 다음에 한 칸 띄우고 다음 색상 클래스명을 입력하시는 것 잊지 마세요. 그리고 대소문자 구별이 있으니 이 부분도 주의해 주시기 바랍니다.

색상 커스텀

미리보기 부분에 보시면 Background-color 다음에 흰색으로 표시된 16진수 코드가 바로 색상코드 부분입니다. 이 부분을 원하는 색상 코드로 입력하셔서 사용하시면 됩니다.

색생코드는 티스토리 글쓰기 에디터에서도 확인할 수 있습니다. 이렇게 확인하시면 됩니다. 만약 원하는 색상이 여러개면 CSS에 해당 DIV를 스타일로 지정해서 골라 사용하시면 됩니다. 이 부분을 CSS에 마크업해서 사용하시면 됩니다.

.직접 만든 클래스명 (영어 혹은 영어+숫자 조합으로 사용. 한글 불가) {

    background-color: #색상코드;

}

직접 커스텀한 DIV 박스를 사용하는 방법은 위에서 말씀드린 방법과 동일합니다. <div class="rgyBG 직접 만든 클래스명"> 형태로 사용하시면 됩니다. 마무리는 늘 </div> 라는거 잊지 마시구요. 그리고 rgyBG 다음에 한 칸 띄우는 것도요.

설명하다보니 다소 글이 길어졌습니다. 최대한 이해하기 쉽고 사용하기 쉽게 설명드렸는데 잘 전달되었는지 모르겠습니다. 그러면 유용하게 사용해 보시기 바랍니다. 끝.