친효애드온! DIV 그라데이션 박스로 텍스트 강조하기

이 방법은 기존 DIV 커스텀 박스 만들기와 같습니다. 단지 클래스명만 다를 뿐 입니다. 그래도 처음부터 설명드리는게 훨씬 이해하시기 수월할테니 꼼꼼히 차근차근 안내해 드리겠습니다. 아래의 글은 그냥 참고만 하시기 바랍니다.

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

CSS 세팅하기

기본적으로 친효스킨 최신 버전을 사용하시면 CSS는 세팅이 되어 있습니다. 따라서 본문의 내용은 친효스킨을 사용하지 않는 분들을 기준으로 설명되어 있음을 밝힙니다. 먼저 아래의 첨부파일을 다운로드 해주시기 바랍니다.

친효애드온 - DIV 그라데이션 박스 CSS.txt

0.00MB

첨부파일의 텍스트 문서를 열어보시면 다음의 CSS 코드들이 들어있습니다.

.rgyBG2,
.rgyBG3,
.rgyBG4,
.rgyBG5 {
    margin: 10px 0;
    padding: 10px 15px;
    border-radius: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    word-break: normal;
    font-size: 1em;
}

.rgyBG2 {
    color: #333;
    background: #EFEFBB;
    background: -webkit-linear-gradient(to right, #D4D3DD, #EFEFBB);
    background: linear-gradient(to right, #D4D3DD, #EFEFBB);
}

.rgyBG3 {
    color: #fff;
    background: #b92b27;
    background: -webkit-linear-gradient(to right, #1565C0, #b92b27);
    background: linear-gradient(to right, #1565C0, #b92b27);
}

.rgyBG4 {
    color: #333;
    background: #A1FFCE;
    background: -webkit-linear-gradient(to right, #FAFFD1, #A1FFCE);
    background: linear-gradient(to right, #FAFFD1, #A1FFCE);
}

.rgyBG5 {
    color: #fff;
    background: #3a6186;
    background: -webkit-linear-gradient(to right, #89253e, #3a6186);
    background: linear-gradient(to right, #89253e, #3a6186);
}

이 CSS 스타일 코드를 사용중인 티스토리 스킨의 CSS에 붙여넣기를 해주시고 저장하시면 됩니다. 관리자 > 꾸미기 > 스킨편집 > HTML편집 > CSS탭으로 들어가시면 됩니다. 그리고 적당히 빈 공간을 확보하시고 그대로 붙여넣기만 하면 끝이죠.

사용 방법

이제 세팅은 다 끝이 났으니까 사용 방법을 알아봅시다. 어렵지 않습니다. 먼저 묶어서 강조하고자 하는 텍스트를 선택해야 합니다. 아래에 예제를 올려보겠습니다. 텍스트는 무작위로 생성했습니다.

"그들은 심장은 목숨이 그들은 것이다. 피가 그들의 방지하는 그들의 불어 산야에 충분히 보이는 소리다.이것은 이것이다. 생의 황금시대를 이 방황하여도, 이상이 끓는 있는 붙잡아 크고 위하여서. 이상 피가 것은 주는 위하여서, 실현에 희망의 것이다. 생의 끝에 눈이 황금시대다. 길을 유소년에게서 그들은 것이다. 거선의 인간에 내려온 위하여, 주며, 소담스러운 목숨을 있으랴? 얼음에 청춘은 타오르고 운다. 보이는 거선의 없으면, 사라지지 것이다.보라, 있으랴? 위하여, 모래뿐일 인간에 천하를 트고, 철환하였는가? 아니더면, 장식하는 그러므로 오아이스도 이상을 사막이다."

위의 텍스트를 DIV 그라데이션 박스로 감싸주겠습니다. 여기부터는 수동 세팅입니다.

글쓰기 에디터에서 기본모드 > HTML로 들어갑니다. 그러면 아래의 태그를 찾습니다.

<p>"그들은 심장은 목숨이 그들은 것이다. 피가 그들의 방지하는 그들의 불어 산야에 충분히 보이는 소리다.이것은 이것이다. 생의 황금시대를 이 방황하여도, 이상이 끓는 있는 붙잡아 크고 위하여서. 이상 피가 것은 주는 위하여서, 실현에 희망의 것이다. 생의 끝에 눈이 황금시대다. 길을 유소년에게서 그들은 것이다. 거선의 인간에 내려온 위하여, 주며, 소담스러운 목숨을 있으랴? 얼음에 청춘은 타오르고 운다. 보이는 거선의 없으면, 사라지지 것이다.보라, 있으랴? 위하여, 모래뿐일 인간에 천하를 트고, 철환하였는가? 아니더면, 장식하는 그러므로 오아이스도 이상을 사막이다."</p>

여기가 텍스트를 구성하는 부분입니다. 이제 그라데이션 박스를 적용시키기 위해서 div 태그로 감싸줍니다.

<div>
<p>"그들은 심장은 목숨이 그들은 것이다. 피가 그들의 방지하는 그들의 불어 산야에 충분히 보이는 소리다.이것은 이것이다. 생의 황금시대를 이 방황하여도, 이상이 끓는 있는 붙잡아 크고 위하여서. 이상 피가 것은 주는 위하여서, 실현에 희망의 것이다. 생의 끝에 눈이 황금시대다. 길을 유소년에게서 그들은 것이다. 거선의 인간에 내려온 위하여, 주며, 소담스러운 목숨을 있으랴? 얼음에 청춘은 타오르고 운다. 보이는 거선의 없으면, 사라지지 것이다.보라, 있으랴? 위하여, 모래뿐일 인간에 천하를 트고, 철환하였는가? 아니더면, 장식하는 그러므로 오아이스도 이상을 사막이다."</p>
</div>

이렇게 될 겁니다. 여기까지 하면 이제 50%는 다 끝났습니다. 나머지 한 단계만 남았습니다. 방금 수동으로 넣은 <div> 태그에 클래스명(class)을 입력해주기만 하면 됩니다. 현재 친효스킨 2.2 버전에서는 4개의 그라데이션 스타일 클래스명이 추가되어 있습니다. 클래스명은 다음과 같습니다.

rgyBG2

rgyBG3

rgyBG4

rgyBG5

이렇게 4개의 클래스명을 가지고 있습니다. 각 클래스명의 스타일을 한 눈에 살펴보기 쉽게 그라데이션 효과를 적용시켰습니다. 이 4개 중 원하는 스타일을 사용하시면 됩니다. 즉 div에 클래스명을 부여하기만 하면 됩니다. 이번에는 rgyBG5를 사용해 보겠습니다. 최종적으로 아래의 태그처럼 수정해주면 될 겁니다.

<div class="rgyBG5">
<p>"그들은 심장은 목숨이 그들은 것이다. 피가 그들의 방지하는 그들의 불어 산야에 충분히 보이는 소리다.이것은 이것이다. 생의 황금시대를 이 방황하여도, 이상이 끓는 있는 붙잡아 크고 위하여서. 이상 피가 것은 주는 위하여서, 실현에 희망의 것이다. 생의 끝에 눈이 황금시대다. 길을 유소년에게서 그들은 것이다. 거선의 인간에 내려온 위하여, 주며, 소담스러운 목숨을 있으랴? 얼음에 청춘은 타오르고 운다. 보이는 거선의 없으면, 사라지지 것이다.보라, 있으랴? 위하여, 모래뿐일 인간에 천하를 트고, 철환하였는가? 아니더면, 장식하는 그러므로 오아이스도 이상을 사막이다."</p>
</div>

이렇게해서 최종 완성된 스타일이 아래의 형태입니다.

이쁘죠? 앞으로 div 그라데이션 박스 스타일은 계속 추가시킬 예정입니다. 이 방법을 통해서 좀 더 멋들어지고 눈에 띄는 텍스트 박스를 표현 할 수 있습니다. 너무 남발하면 오히려 가독성을 해칠 수 있으니 적시적소로 사용해 보시기 바랍니다. 끝.