배경 설정

CssBaseline 편집기를 통해 페이지 배경을 설정할 수 있습니다.

접근 경로

1. VertiTab 설정 페이지 열기
2. "커스텀 테마" 메뉴 클릭
3. 편집할 테마 선택 → "편집"
4. "🧩 컴포넌트 커스터마이징" 탭 클릭
5. "CssBaseline" 카드 펼치기
6. "Body 요소 스타일"의 "Body 배경"에서 설정

배경 선택기 기능

배경 유형

단색 배경

• 컬러 선택 아이콘을 눌러 배경 선택기를 엽니다.
• "단색" 탭에서 색상을 선택합니다.
• 팔레트 선택과 사용자 정의 입력을 지원합니다.
• 선택 즉시 미리보기됩니다.

그라데이션 배경

• "그라데이션" 탭으로 전환합니다.
• 방향과 색상을 구성합니다.
• 선형/방사형 그라데이션을 지원합니다.
• 여러 색상 정지점을 추가할 수 있습니다.

이미지 배경

• "이미지" 탭으로 전환합니다.
• 로컬 이미지 업로드 또는 URL 입력을 지원합니다.
• 표시 모드(cover/contain/repeat 등)를 설정할 수 있습니다.
• 위치를 조정할 수 있습니다.

인터페이스 요소

배경 미리보기 영역

• 현재 배경 효과를 보여주는 미리보기 박스
• 비어 있을 때는 투명 격자 표시
• 클릭하여 배경 선택기 열기

배경 값 표시

• 현재 배경의 CSS 값을 표시
• 길면 자동으로 생략 부호 처리
• 비어 있을 때는 플레이스홀더 텍스트 표시

동작 버튼

• 팔레트 아이콘: 배경 선택기 열기
• 지우기: 현재 배경 설정 초기화
• 닫기: 선택기 패널 닫기

사용 방법

단색 배경 설정

1. 미리보기 영역 또는 팔레트 아이콘을 클릭합니다.
2. "단색" 탭에 있는지 확인합니다.
3. 컬러 선택기에서 원하는 색을 고릅니다.
4. 색상이 미리보기 영역에 즉시 적용됩니다.

그라데이션 설정

1. 배경 선택기를 엽니다.
2. "그라데이션" 탭으로 전환합니다.
3. 유형과 방향을 선택합니다.
4. 시작/끝 색을 설정합니다.
5. 중간 색상 정지점을 추가해 복잡도를 높일 수 있습니다.

이미지 배경 설정

1. 배경 선택기를 엽니다.
2. "이미지" 탭으로 전환합니다.
3. 이미지를 업로드하거나 URL을 입력합니다.
4. 표시 모드와 위치를 조정합니다.
5. 미리보기를 확인 후 확정합니다.

배경 지우기

1. 배경 선택기를 엽니다.
2. "지우기"를 클릭합니다.
3. 또는 단색 모드에서 투명색을 선택합니다.

배경 효과

적용 범위

• 전체 페이지 배경: 모든 화면의 배경 표시
• 테마 일관성: 컬러 스킴·다른 컴포넌트와 조화
• 시각 계층: 인터페이스의 기본 레이어 제공

CSS 속성

배경 설정은 body 요소의 background 속성에 적용되며 다음을 지원합니다.

• 단색: #ffffff, rgb(255,255,255), rgba(255,255,255,0.8)
• 그라데이션: linear-gradient(...), radial-gradient(...)
• 이미지: url(...) 및 관련 속성

사용 팁

배경 선택 원칙

1. 테마와 조화: 전체 색상 체계와 어울리게
2. 방해 최소화: 텍스트·UI 가독성을 해치지 않게
3. 성능 고려: 대용량 이미지는 로딩에 영향
4. 사용자 경험: 방해가 아닌 향상에 초점

유형별 팁

• 단색: 심플·성능 우수 — 대부분 장면에 적합
• 그라데이션: 현대적인 느낌 — 시각 효과를 중시할 때
• 이미지: 개성 강함 — 대비/성능을 반드시 고려

흔한 문제 피하기

1. 대비 부족: 어두운 배경엔 밝은 텍스트, 밝은 배경엔 어두운 텍스트
2. 복잡한 이미지: 디테일 과다 이미지는 가독성 저하
3. 색 충돌: 배경과 테마 색의 조화 유지

저장

모든 배경 설정은 실시간 미리보기로 반영되며, "저장"을 눌러 변경사항을 저장하세요. 배경을 비우면 테마 기본 배경이 적용됩니다.