# Title Widget – 섹션 제목을 스타일리시하게
들어가며
케이테마 프리미엄 Title Widget은 섹션 제목과 부제목을 전문적이고 세련되게 표현하는 위젯입니다. 단순한 텍스트를 넘어 다양한 스타일 옵션과 구분선, 배경 효과로 눈에 띄는 제목을 만들 수 있습니다.
주요 기능
- 제목 + 부제목: 메인 제목과 보조 설명
- 구분선: 제목 위/아래 구분선 (선택 사항)
- 배경 효과: 제목 배경 강조
- 정렬 옵션: 좌, 중앙, 우 정렬
- HTML 지원: 제목 내 HTML 태그 사용 가능
- 애니메이션: GSAP 애니메이션 연동 가능
콘텐츠 설정
제목
기본 제목:
Our ServicesHTML 태그 사용:
<strong>Premium</strong> Features혁신적인 <span class="text-primary">솔루션</span>부제목
짧은 설명:
Discover what we can do for you긴 설명:
고객의 성공이 우리의 목표입니다.
최고의 서비스를 경험하세요.HTML 태그
- H1, H2, H3, H4, H5, H6: SEO 및 접근성
- 기본값: H2 (권장)
레이아웃 옵션
정렬
- 왼쪽: 일반 섹션 제목
- 중앙: 히어로 섹션, 주요 섹션 (가장 인기)
- 오른쪽: 특수 레이아웃
구분선 위치
- 위: 제목 위에 구분선
- 아래: 제목 아래 구분선 (기본값)
- 양쪽: 위아래 모두
- 없음: 구분선 표시 안 함
스타일 옵션
1. 제목 스타일
Typography
- 폰트 패밀리: 기본 또는 커스텀
- 폰트 크기: 32px ~ 72px (기본: 48px)
- 폰트 굵기: Light ~ Black
- Text Transform: 대문자, 소문자
- 줄 높이: 1.1 ~ 1.5
- Letter Spacing: 자간
색상
- 텍스트 색상: 단색 또는 그라디언트
- 그라디언트 색상: 2가지 색상 조합
배경
- 배경색: 제목 뒤 배경 (선택 사항)
- 패딩: 배경 크기 조절
- Border Radius: 둥근 모서리
텍스트 쉐도우
- Text Shadow: 깊이감 추가
- 예: 2px 2px 4px rgba(0,0,0,0.3)
2. 부제목 스타일
Typography
- 폰트 크기: 16px ~ 24px (기본: 18px)
- 폰트 굵기: Light, Regular
- 줄 높이: 1.5 ~ 1.8
색상
- 텍스트 색상: 회색 계열 (#6c757d)
간격
- Margin Top: 제목과의 간격 (15px ~ 30px)
3. 구분선 스타일
스타일
- 선 타입: 실선, 파선, 점선, 이중선
- 굵기: 1px ~ 10px (기본: 3px)
- 너비: 50px ~ 300px 또는 100%
- 색상: 브랜드 컬러
위치
- 정렬: 좌, 중앙, 우 (제목 정렬 따름)
- 간격: 제목과의 거리 (10px ~ 30px)
특수 효과
- 그라디언트 선: 2가지 색상 그라디언트
- 둥근 끝: Border Radius
- 중앙 강조: 가운데가 두꺼운 디자인
4. 컨테이너 스타일
- 배경: 전체 컨테이너 배경 (선택 사항)
- 패딩: 내부 여백
- Margin: 외부 여백 (섹션과의 간격)
- Border: 테두리 (선택 사항)
- Border Radius: 둥근 모서리
실전 활용 예제
예제 1: 중앙 정렬 섹션 제목 (클래식)
설정:
- 제목: “Our Services”
- 부제목: “Discover what we can do for you”
- 정렬: 중앙
- 제목 크기: 48px, Bold
- 제목 색상: #000000 (검정)
- 부제목 크기: 18px, Regular
- 부제목 색상: #6c757d (회색)
- 구분선: 아래, 80px 너비, 3px 굵기, Primary 색상
- 구분선 정렬: 중앙
결과: 전통적이고 깔끔한 섹션 제목
예제 2: 그라디언트 제목 (모던)
설정:
- 제목: “Premium Features”
- 부제목: “Experience the best”
- 정렬: 중앙
- 제목 크기: 56px, ExtraBold
- 제목 색상: 그라디언트 (#667eea → #764ba2)
- 구분선: 없음
- 배경: 연한 회색 (#f8f9fa)
- 패딩: 30px
- Border Radius: 15px
결과: 눈에 띄는 그라디언트 제목
예제 3: 좌측 정렬 + 긴 구분선
설정:
- 제목: “Why Choose Us”
- 부제목: “10년 경력의 전문가들이 함께합니다”
- 정렬: 왼쪽
- 제목 크기: 40px, Bold
- 제목 색상: #212529
- 구분선: 위, 100% 너비, 1px 굵기
- 구분선 색상: #dee2e6 (연한 회색)
- 패딩 상단: 20px (구분선과 제목 사이)
결과: 전문적이고 정돈된 좌측 정렬 제목
예제 4: 배경 강조 제목
설정:
- 제목: “Limited Time Offer”
- 부제목: “Don’t miss out!”
- 정렬: 중앙
- 제목 크기: 48px, Bold
- 제목 색상: 흰색
- 제목 배경: Primary 색상 (#0d6efd)
- 제목 패딩: 20px 40px
- Border Radius: 50px (pill 모양)
- 구분선: 없음
- Text Shadow: 2px 2px 4px rgba(0,0,0,0.3)
결과: 강렬한 Call-to-Action 스타일 제목
디자인 팁
제목 스타일 조합
클래식 (전통적)
- 제목: 검정 또는 진한 회색
- 부제목: 중간 회색
- 구분선: 얇고 긴 (1px, 100px)
- 정렬: 중앙
모던 (현대적)
- 제목: 그라디언트 또는 브랜드 컬러
- 부제목: 밝은 회색
- 구분선: 두껍고 짧음 (5px, 60px) 또는 없음
- 정렬: 중앙
- Letter Spacing: 넓게
미니멀 (간결함)
- 제목: 큰 사이즈, Light 굵기
- 부제목: 작은 사이즈
- 구분선: 없음
- 배경: 없음
- 여백: 넉넉히
대담한 (임팩트)
- 제목: 매우 큰 사이즈 (72px+), ExtraBold
- 부제목: 생략 또는 매우 작게
- 구분선: 매우 두껍게 (10px)
- Text Transform: 대문자
- 색상: 고대비
구분선 활용
짧은 구분선 (50-80px)
- 장식적 요소
- 중앙 정렬 제목에 어울림
- 두껍게 (3-5px) 표현
긴 구분선 (100% 너비)
- 섹션 구분
- 좌측 정렬 제목에 어울림
- 얇게 (1-2px) 표현
그라디언트 구분선
- 모던하고 화려함
- 브랜드 컬러 2가지 조합
- 중앙 정렬 추천
SEO 및 접근성
HTML 태그 선택 가이드
- H1: 페이지당 1개 (페이지 메인 제목)
- H2: 섹션 제목 (가장 많이 사용)
- H3: 하위 섹션
- H4-H6: 더 세부적인 제목
중요: 제목 계층을 건너뛰지 말 것 (H2 다음 바로 H4 사용 금지)
접근성
- 색상 대비: WCAG AA 기준 (4.5:1 이상)
- 명확한 제목: 섹션 내용을 정확히 설명
- 간결함: 너무 긴 제목은 피하기
호환성
- WordPress 5.0+
- Elementor 3.0+
- PHP 7.4+
- 케이테마 프리미엄 플러그인 2.0+
마무리
Title Widget은 섹션의 첫인상을 결정하는 중요한 요소입니다. 다양한 스타일 옵션과 구분선, 배경 효과로 평범한 제목을 눈에 띄는 작품으로 변신시키세요. SEO와 접근성도 고려하여 완벽한 제목 섹션을 만드세요!