티스토리 친효스킨 인용구 두번째 스타일 설정 방법

안녕하세요. 친절한효자손입니다. 댓글로 인용구 수정 방법에 대해서 문의를 주셨는데 답변으로는 내용이 너무 길어 불가능하여 이렇게 따로 글을 작성하게 되었습니다. 친효스킨의 경우는 대부분의 중요 구간을 주석으로 표시해두었습니다. 따라서 CSS에서 해당 스타일에 대한 부분을 한번 키워드 검색해 보시면 좀 더 찾기 쉬울 것입니다. 혹은 크롬 개발자툴로 해당 위치 영역을 탐색하여 관련 CSS를 확인하는 방법도 좋습니다. 참고로 이 방법은 친효스킨뿐만 아니라 티스토리에서 사용 가능한 모든 반응형 스킨에서 적용 가능한 방법입니다.

 

인용구 스타일 확인

먼저 친효스킨 적용 시 인용구는 어떻게 적용되는지 확인해 봅니다.

 

인용구1 스타일

인용구2 스타일

인용구3 스타일

 

이렇게 적용이 되고 있습니다. 본문에서는 두번째 인용구 스타일의 수정 방법에 대해 안내해 드리겠습니다.

 

CSS 위치 살펴보기

인용구의 CSS 위치는 「인용구」라고 검색해보시면 금새 찾을 수 있습니다.

 

/* 본문 인용구 스타일 (새로운 글쓰기 에디터) */
blockquote[data-ke-style='normal'],
blockquote[data-ke-style='style2'] {
    border-left: 20px solid #eee;
    padding: 10px 5px;
}

친효스킨의 CSS에서 위의 코드를 찾습니다. 여기에 마크업되어있는 속성들의 역할은 다음과 같습니다.

 

border-left : 왼쪽 선에 대해 정의함. (20px의 두께 / 직선(solid)타입 / 선 색상은 #eee)

padding : 영역 확장에 대해 정의함. (상/하로 10px만큼, 좌/우로 5px 만큼 영역 증가)

 

즉 인용구 스타일의 왼쪽에 존재하고 있는 회색 네모칸을 조절하려면 border-left를 수정하면 됩니다. 20px의 값을 조절하면 두꺼워지거나 얇아집니다. 선 타입은 solid, dashed, dotted의 세 가지 타입이 있는데 인용구에서는 그냥 solid를 사용하는것이 낫습니다. 나머지는 점선 패턴이라 다소 어울리지 않습니다. 마지막으로 선 색상은 16진수 헥사코드를 사용하므로 원하는 컬러의 헥사코드를 파악하시어 사용하면 됩니다. padding의 경우에도 값을 조절하면 영역이 그만큼 확장되거나 줄어들기에 왼쪽 선에 대한 가로 사이즈도 증가하거나 줄어들 것입니다.

 

새로운 속성 추가도 가능

그렇습니다. 위의 CSS 코드에 새로운 속성을 부여할수도 있습니다. 가령 인용구2의 글씨 색상을 변경하거나 크기를 변경하는 방법입니다. 각 속성은 다음과 같습니다.

 

font-size : 폰트 크기

color : 폰트 색상 (헥사코드 혹은 rgba 속성)

background-color : 배경색 (헥사코드 혹은 rgba 속성)

 

예를 들어서 폰트 크기를 20으로 키우려면 font-size: 20px;을 사용하면 될 것입니다. 글씨 색상은 빨강으로 하려면 color: red;로 입력하면 됩니다. 마지막으로 배경색을 아주 연한 회색으로 하려면 background-color : #eee; 정도로 입력하면 될 것입니다. 그 밖의 다양한 CSS 스타일은 검색을 통해서 알아보시고 적용해 보시기 바랍니다. 친효스킨 외의 타 스킨에서는 위의 코드를 그대로 복사하시어 CSS에 붙여넣고 적용하시면 됩니다. 끝.