배경 스타일 - Webflow 도움말
요소에 설정할 수 있는 배경 스타일 개요: 색상, 이미지, 그라데이션, 색상 오버레이, 비디오.
배경 색상
이미지와 비디오를 제외한 모든 요소에 배경 색상을 설정할 수 있습니다 (이미지와 비디오를 배경으로 사용할 수는 있습니다). 색상 값을 입력하거나 색상 선택기를 사용하여 배경 색상을 추가하세요. 텍스트 요소나 텍스트 요소 내의 특정 텍스트 콘텐츠에도 배경 색상을 추가할 수 있습니다.
사이트 전체에서 배경 색상을 일관되게 유지하려면 Body (All pages) 태그를 사용하여 상속을 설정하세요. 스타일 패널에서 Body 요소를 선택하고 태그를 선택하거나 상속 메뉴를 사용하여 스타일을 지정하세요. Body (All pages)에 대한 변경 사항은 기본적으로 새 요소에 적용됩니다.
대부분의 요소는 기본적으로 투명한 배경을 가지고 있습니다. 슬라이더 컴포넌트와 같은 일부 요소는 기본 색상을 가지고 있으며 이를 덮어쓸 수 있습니다.
배경 이미지
Webflow는 배경 이미지를 사용자 정의할 수 있는 다양한 옵션을 제공합니다.
배경 이미지를 추가하거나 변경하려면:
- 스타일 패널에서 배경으로 스크롤
- 에셋 패널에서 이미지 선택 클릭
- HiDPI 기기에서 더 선명한 이미지를 위해 @2x 박스 체크
배경 비디오를 설정하려면, 추가 패널에서 배경 비디오 컴포넌트를 사용하세요.
배경 이미지 크기
- 사용자 정의: 너비/높이 또는 백분율 값을 설정합니다. 100% 이상의 값으로 더 크게 확장합니다.
- 커버: 배경을 채우고 덮으며, 이미지가 잘릴 수 있습니다.
- 컨테인: 요소 내부에 이미지를 유지합니다.
배경 이미지 위치
기본값은 왼쪽 상단입니다. 위치를 수동으로 조정할 수 있습니다 (px, %, VW, VH).
타일
배경 이미지는 기본적으로 수직 및 수평으로 반복됩니다. 수평, 수직 또는 반복하지 않도록 제어할 수 있습니다.
고정 또는 스크롤
고정되지 않음(이미지가 스크롤됨) 또는 고정(이미지가 제자리에 유지됨)을 선택하세요. 고정 이미지는 뷰포트에 의해 제한됩니다.
그라디언트
그라디언트는 단독으로 사용하거나 배경 색상/이미지 위에 레이어로 사용할 수 있습니다. 두 가지 유형:
- 선형 그라디언트
- 방사형 그라디언트
둘 다 색상이 사라지는 지점(스톱)이 있습니다.
선형 그라디언트
다이얼, 화살표(45도 간격), 또는 필드 입력을 통해 각도로 방향을 설정합니다.
그라디언트 스톱
스톱에서 색상/불투명도를 편집합니다. 이미지 위에 레이어링하면 낮은 불투명도에서 이미지가 보입니다. 클릭하여 스톱을 추가하고 드래그하여 제거합니다.
반복
그라디언트를 반복하는 토글입니다.
반전
스톱 위치를 반전시키는 아이콘입니다.
방사형 그라디언트
원형 그라디언트를 생성합니다. 왼쪽 스톱은 중심의 색상입니다.
위치
점이나 값/단위로 초점을 선택합니다.
크기
프리셋 제어:
- 가장 가까운 측면: 중심에서 가장 가까운 측면까지
- 가장 가까운 모서리: 중심에서 가장 가까운 모서리까지
- 가장 먼 측면: 중심에서 가장 먼 측면까지
- 가장 먼 모서리: (기본값)
색상 오버레이
색상 선택기와 불투명도로 배경에 색상 오버레이를 추가합니다.
이미지와 그라디언트 레이어링
여러 배경 이미지, 그라디언트 및 오버레이를 쌓아 효과를 줍니다. 드래그로 순서를 변경하고, 눈 아이콘으로 가시성을 전환하며, 휴지통으로 삭제합니다.
배경 비디오
배경 비디오는 배경에 영화적 감각을 더하기 위한 무음, 반복 비디오입니다. 주의할 점:
빠른 찾기(CMD/CTRL+E) 또는 추가 패널 > 구성 요소에서 추가하세요. 비디오를 업로드하세요(<30MB; webm, mp4, mov, ogg). 파일 이름에는 공백/특수 문자를 피해야 합니다.
업로드 후 트랜스코딩이 이루어집니다(브라우저 지원을 위한 mp4 및 webm).
비디오 설정
- 비디오 반복: 계속 반복됩니다.
- 비디오 자동 재생: 페이지 로드 시 시작됩니다.
- 재생/일시정지 버튼 포함: 방문자가 재생을 제어할 수 있습니다.
배경 비디오 미리보기
- 썸네일에 마우스 오버
- 새 탭에서 열기
- 바의 미리보기 아이콘
배경 비디오 교체
설정을 열어 비디오를 교체하고, 트랜스코딩하고, 미리보기 등을 수행하세요.
배경 비디오를 섹션으로 사용하기
배경 비디오 요소 안에 콘텐츠를 드롭하세요. 스타일 패널에서 평소처럼 스타일을 지정하세요.
배경 비디오 오버레이
대비를 위해 그라데이션 또는 단색 오버레이를 추가하세요. 오버레이는 비디오 위에, 콘텐츠 아래에 위치합니다.
이것이 Webflow에서 배경을 사용하는 방법입니다!