Title Widget – 섹션 제목을 스타일리시하게

# Title Widget – 섹션 제목을 스타일리시하게

들어가며

케이테마 프리미엄 Title Widget은 섹션 제목과 부제목을 전문적이고 세련되게 표현하는 위젯입니다. 단순한 텍스트를 넘어 다양한 스타일 옵션과 구분선, 배경 효과로 눈에 띄는 제목을 만들 수 있습니다.

주요 기능

• 제목 + 부제목: 메인 제목과 보조 설명
• 구분선: 제목 위/아래 구분선 (선택 사항)
• 배경 효과: 제목 배경 강조
• 정렬 옵션: 좌, 중앙, 우 정렬
• HTML 지원: 제목 내 HTML 태그 사용 가능
• 애니메이션: GSAP 애니메이션 연동 가능

콘텐츠 설정

제목

기본 제목:

Our Services

HTML 태그 사용:

<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와 접근성도 고려하여 완벽한 제목 섹션을 만드세요!