친효애드온 커스텀 DIV 박스 색상 설정 방법

친효애드온 중 하나인 커스텀 DIV 박스 활용에 대해서 좀 더 자세한 설명 방법이 필요할 것 같습니다. 뭐 대단한건 아니구요. 색상에 대해서 변경하는 방법을 알려드리면 여러분들께서 직접 원하는 색을 선택해서 적용을 할 수 있을 것 같습니다. 색이란게 자꾸 보면 질리잖아요? 따라서 사용자가 그때 그때 원하는 색을 사용함으로서 티스토리를 운영하는데 약간의 즐거움이라도 충족한다면 좋지 않을까 싶습니다.

 

커스텀 DIV 박스란?

친효스킨 최신버전에는 지금까지 개발한 친효애드온이 기본적으로 세팅되어 있습니다. 사용자는 그저 이것을 꺼내 사용하기만 하면 되는 것입니다. 그러나 의외로 이 기능을 모르고 친효스킨을 사용하시는 분들이 많습니다. 개인적으로 정말 많이 사용하는 애드온 중 하나인 커스텀 DIV 박스! 이 내용은 아래의 글을 참고해 주시기 바랍니다.

 

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

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

다 읽으셨다면 이제부터는 쉽습니다. 색상을 변경하는 방법에 대해 설명드리겠습니다.

 

기존 DIV 박스 그라디언트 색상 변경 방법

먼저 친효애드온의 CSS 코드를 찾습니다. 「div박스」 라고 검색하면 쉽게 찾을 수 있습니다.

 

.rgyBG2 {
    /* Colors Of Sky */
    color: #222;
    background: #E0EAFC;
    background: -webkit-linear-gradient(to left, #CFDEF3, #E0EAFC);
    background: linear-gradient(to left, #CFDEF3, #E0EAFC);
}

.rgyBG3 {
    /* Burning Orange */
    color: #fff;
    background: #FF416C;
    background: -webkit-linear-gradient(to right, #FF4B2B, #FF416C);
    background: linear-gradient(to right, #FF4B2B, #FF416C);
}

.rgyBG4 {
    /* Electric Violet */
    color: #fff;
    background: #4776E6;
    background: -webkit-linear-gradient(to right, #8E54E9, #4776E6);
    background: linear-gradient(to right, #8E54E9, #4776E6);
}

.rgyBG5 {
    /* Midnight City */
    color: #fff;
    background: #232526;
    background: -webkit-linear-gradient(to left, #232526, #414345);
    background: linear-gradient(to left, #232526, #414345);
}

.rgyBG6 {
    /* Emerald Water */
    color: #fff;
    background: #348F50;
    background: -webkit-linear-gradient(to left, #56B4D3, #348F50);
    background: linear-gradient(to left, #56B4D3, #348F50);
}

그리고나서 조금 더 아래로 내려가보면 이 부분을 확인할 수 있습니다. 코드 색상이 약간 다를 수 있습니다. 싹 다 변경했기 때문입니다. 이 부분을 여러분들께도 안내해드릴 것입니다.

 

CSS에서 색상을 정하는 부분은 특별한 경우가 아닌 이상 16진수 코드를 사용합니다. 그리고 앞에 #(샵)을 붙여 사용합니다. 그러면 딱 봐도 어느 부분이 색상을 정의하는 곳인지 보이실겁니다. 현재 div 박스에서는 사용되는 색상 영역이 대표적으로 두가지입니다. 각각의 영역은 다음과 같습니다.

 

color : 글씨 색상

background : 배경 색상

 

그런데 백그라운드 색상이 1개가 아니고 3개입니다. 그 이유는 웹 호환성 때문입니다. 디테일하게 설명하면 복잡해지니까 그냥 그런가보다 하고 넘어가주시면 됩니다. 어쨌거나 색상 코드만 수정하면 되는 부분이니까요. 그러면 이제 # 부분의 색상 코드만 알면 원하는 색 표현이 가능하다는 사실을 알았습니다. 문제는 색상 코드를 어떻게 뽑느냐하는 부분일 것입니다. 하지만 전혀 고민하지 않아도 됩니다. 이미 사이트에서 컬러코드를 편리하게 제공하는곳이 있습니다.

 

HTML 컬러 코드

HTML 컬러 코드

이곳을 방문하셔서 원하는 16진수 색상 코드를 확보하세요. 그리고 CSS를 수정하면 됩니다. 수정하는 방법도 어렵지 않습니다.

 

.rgyBG2 {

    color: #222;

    background: #E0EAFC;

    background: -webkit-linear-gradient(to left, #CFDEF3, #E0EAFC);

    background: linear-gradient(to left, #CFDEF3, #E0EAFC);

}

그렇습니다. 이렇게 수정하면 되는 것입니다. 같은 색상 코드끼리 같이 세트로 묶어서 동일한 코드로 변경해주시면 되는 것입니다. 나머지 코드는 신경쓰지 않아도 됩니다. 그저 이렇게 같은 색상 코드끼리 원하는 색상 코드로 일괄 변경해주면 된다는 것만 이해하면 됩니다. 그리고 완성된 DIV 커스텀 박스를 직접 사용해보면 됩니다.

 

사이트에서 제공하는 그라디언트 코드를 직접 사용하기

위의 방법은 색상 하나 하나를 자신이 원하는 색상 코드로 변경하여 사용하는 방법입니다. 다음 방법은 이미 완성된 그라디언트 테마 CSS 코드를 그대로 사용하는 방법입니다. 이 방법은 이미 과거에 한번 작성한 문서가 있으므로 아래의 글을 정독해주시기 바랍니다.

 

CSS 그라디언트(그라데이션) 쉽게 만드는 사이트 uiGradients 사용 방법

CSS 그라디언트(그라데이션) 쉽게 만드는 사이트 uiGradients 사용 방법

해당 문서에서는 원하는 테마 색상 CSS 코드를 복사하는 과정까지 설명되어 있습니다. 따라서 본문에서는 복사까지 했으니 이제 친효스킨에 직접 적용하는 방법에 대해 안내하겠습니다.

 

Emerald Water 라고 하는 그라디언트 테마가 왠지 마음에 들었습니다. 그래서 해당 색상을 선택 후 코드 아이콘을 눌러서 CSS 코드를 모두 복사합니다. 그리고 임시로 메모장에 붙여넣기를 합니다.

 

background: #348F50;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #56B4D3, #348F50);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #56B4D3, #348F50); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

해당 색상 코드는 이렇게 되어있을겁니다. 참고로 /* 어쩌구 저쩌구 */ 라고 되어있는 부분은 주석이라고 하는데 이것은 일종의 설명서 역할을 하는 부분입니다. 따라서 CSS 스타일에 영향을 주지 않습니다. 그냥 해당 코드에 대한 코멘트를 달아놓는데 사용되는 것입니다. 따라서 해당 역역은 삭제해도 무방합니다.

 

자, 위의 코드가 기존 친효애드온 CSS의 DIV 박스 영역과 많이 흡사하게 생겼습니다. 비교해보세요. color 아래의 부분과 100% 형태가 동일하다는걸 확인할 수 있을겁니다. 그러면 어디를 바꿔치기를 하면 될까요?

 

.rgyBG2 {

    color: #222;

    background: #E0EAFC;

    background: -webkit-linear-gradient(to left, #CFDEF3, #E0EAFC);

    background: linear-gradient(to left, #CFDEF3, #E0EAFC);

}

그렇습니다. 파란색 영역만 변경해주면 되는 것입니다. 완전 쉽죠? 이런식으로 이미 색조합이 되어있는 CSS 그라디언트 코드를 사용하는 방법도 있습니다. 참고로 저도 이 방법을 사용 중입니다.

 

새로운 커스텀 DIV 박스를 만들고 싶다면?

현재 커스텀 DIV 박스의 개수는 총 4개입니다. rgyBG2 부터 rgyBG5까지 완성되어 있습니다. 친효스킨 2.3 버전에는 하나를 더 추가했습니다. 그래서 총 5개이며 새로운 클래스명은 rgyBG6 입니다. 이 클래스명은 일종의 옷장 이름이라고 생각하시면 됩니다. DIV가 사람이구요. 그래서 어떤 옷장의 이름을 사용해서 DIV에게 입혀주느냐에 따라 색상이 달라지게 되는 것입니다.

 

방법은 정말 쉽습니다. 기존의 커스텀 DIV 박스 CSS 코드를 하나 더 복사합니다.

 

.rgyBG6 {
    /* Emerald Water */
    color: #fff;
    background: #348F50;
    background: -webkit-linear-gradient(to left, #56B4D3, #348F50);
    background: linear-gradient(to left, #56B4D3, #348F50);
}

그리고 클래스명을 변경해줍니다. 보시는 것처럼 rgyBG5에서 숫자만 하나 더 늘어난 rgyBG6로 변경해주었습니다. 그리고 나머지 색상은 위에서 충분히 다 설명드렸으니까 응용해서 변경해주면 되는 것이구요. 어렵지 않죠? 이렇게하면 새로운 커스텀 DIV 박스가 하나 더 추가가 된 것입니다. 이제 글쓰기에서 해당 div 박스의 클래스명을 사용해주면 됩니다. 끝.