8. 스킨 옵션 - 제목

8. 스킨 옵션 - 제목

제목 영역은 블로그 제목이나 글 제목, 카테고리 목록과 검색 목록 등의 제목이 노출되는 영역입니다. 메인에는 블로그 제목과 설명이 출력되며 글에는 글 제목과 해당 글의 카테고리 명, 쓴 날짜 그리고 관리 기능이 출력됩니다. 카테고리 목록에서는 해당 카테고리 명이 출력되고 검색 목록에서는 어떤 검색어로 몇 개의 글이 있는지 알려줍니다.

설정하기

제목 관련 기능은 '블로그관리 > 꾸미기 > 스킨 편집'의 스킨 옵션을 통해 쉽게 설정 가능합니다. 제목에서 제공하는 스킨 옵션은 폰트 색상, 배경 색상 설정이 기본적으로 가능하며 제목 영역의 배경 이미지를 지정할 수 있습니다. 뿐만 아니라 배경 이미지를 메뉴 영역까지 확장할 수 있는 기능도 있습니다. 마지막으로 배경 이미지와 어울림을 위해 제목에 그림자 효과도 지원합니다.

폰트 색상

색상표에서 원하는 색상을 선택하거나 혹은 직접 HTML 색상코드를 입력하면 설정한 색상으로 제목 폰트 색상이 변경됩니다. 기본적으로 검정 색을 사용하며 배경 이미지를 선택했을 경우 주로 흰 색을 많이 사용합니다.

배경 색상

색상표에서 원하는 색상을 선택하거나 혹은 직접 HTML 색상코드를 입력하면 설정한 색상으로 제목 배경 색상이 변경됩니다. 배경 이미지를 선택했다면 회색 계열의 색상을 선택하면 좋습니다. 왜냐하면 이미지가 모두 불러오기 전까지 알맞게 해당 영역을 채워주고 있을테니까요.

배경 이미지

그냥 그대로 배경 색상을 지정해 제목을 꾸며도 좋습니다. 다만, 조금 더 다른 연출을 원한다면 배경 이미지를 선택해 남들과 다른 제목을 꾸밀 수 있습니다. 기본적으로 배경 이미지는 말 그대로 제목 영역에만 채워집니다.

배경 이미지 확장

제목에 배경 이미지를 지정후 메뉴 영역까지 지정하고 싶다면 확장을 설정해보세요. 해당 기능은 배경 이미지가 메뉴 영역까지 확장해 상단 모두를 이미지로 채워줍니다. 확장을 설정해도 메뉴가 그대로 노출되고 있다면 아마도 메뉴 배경 색상을 지정해서 그럴 수도 있습니다. 배경 이미지 확장 기능을 선택하면 기본 메뉴의 배경 색상을 투명하게 지정해야 정상적으로 작동합니다.

그림자 효과

배경 이미지가 어두운 톤이면 큰 문제가 없지만 일정 부분이 밝은 부분이 있으면 제목이 잘 드러나지 않을 수 있습니다. 이때 해당 기능을 사용하면 제목 주위에 일정하게 그림자가 출력되어 제목을 잘 볼 수 있도록 도와줍니다.

제목이 정의된 곳

83
84
85
86
87
/* 페이지 타이틀 색상 */
.pagetitle-wrapper{ background-color:  }
#pagetitle { color:  }
#pagetitle a, #pagetitle .article-info { color:  }
#pagetitle .svg-icon path { fill:  }
cs

탕비수다 이마고 스킨에서 제공하는 스킨 옵션을 이용하면 다양한 효과를 연출할 수 있습니다. 아래 CSS는 제목과 관련된 내용입니다. '블로그관리 > 꾸미기 > 스킨 편집'의 [html 편집]에서 'HTML'에서 확인할 수 있습니다.

이미지 맵

롤랑존

이미지를 활용해 다양한 기능을 제공하는 티스토리 반응형 스킨

    '설명서' 카테고리의 다른 글

    글에 남긴 여러분의 의견은 13개 입니다.

    *

    *