콘텐츠 뒤에 색상이나 사진 배치.
페이지의 한 구역에 브랜드 색상이나 사진을 지정하여 제목을 돋보이게 하고 구역이 하나의 블록으로 읽히도록 합니다. 색상과 사진은 모든 요소의 스타일 패널에서 설정합니다. 섹션에는 고정 사진, 패럴랙스, 그라데이션, YouTube 동영상을 위한 배경 효과 패널이 추가로 있습니다.
동영상에서는 아래 실전 방법에 따라 제목 뒤에 사진을 배치하고 사진 위에 어두운 그라데이션을 올려 흰색 제목이 읽기 쉽게 유지합니다.
시작하기 전에
- DXPR Builder에서 페이지를 엽니다. 요소를 가리키면 더보기가 있는 컨트롤 바가 표시됩니다. 빌더가 처음인가요? 첫 페이지를 참조하세요.
- 저장(대화상자)은 변경 사항을 에디터에 유지합니다. 콘텐츠 위 빌더 툴바의 저장은 페이지를 저장하고 “Saved field”를 표시합니다.
- 섹션을 페이지 전체 구역에 사용합니다. 배경 효과는 섹션에만 있습니다.
- 텍스트나 카드 요소는 컬럼 안 몇 줄 뒤의 색상 상자에 사용합니다.
- 테마는 페이지 본문이나 푸터처럼 모든 페이지의 배경에 사용합니다.
- 사진에 글자를 넣지 마세요. 배경 사진에는 대체 텍스트가 없으므로 스크린 리더가 건너뜁니다. 메시지는 위의 제목에 작성합니다.
실전: 사진 위의 읽기 쉬운 제목
복잡한 사진 위의 흰색 텍스트는 읽기 어렵습니다. 사진 위의 어두운 그라데이션이 이를 해결하며, 사진을 교체해도 계속 작동합니다. 제목을 담은 텍스트 요소가 있는 섹션이 필요합니다.
- 대상 섹션에 마우스를 올리고 더보기, 설정을 차례로 클릭합니다.
- 패널 스타일을 열고 배경 이미지에서 이미지 선택을 클릭합니다. 사진을 선택합니다. 이미지 크기 목록과 함께 축소판이 표시됩니다.
- 이미지 크기 목록에서 디자인하는 가장 넓은 화면만큼 넓은 크기를 선택하거나 원본 이미지(크기 조정 없음)를 선택합니다. 전체 구역에는 빠른 로딩을 위한 최적화를 사용하지 마세요.
- 설정으로 배경 스타일을 Cover, 배경 위치를 Center center로 지정합니다.
- 패널 배경 효과를 열고 배경 효과를 그라데이션으로 설정합니다. 사진은 그대로 유지되며 그라데이션이 위에 표시됩니다.
- 값으로 시작 색상의 색상 필드에
rgba(0, 0, 0, 0.6)(60% 검정)을 입력하고,rgba(0, 0, 0, 0.3)을 종료 색상에 입력합니다. 베일이 위에서 아래로 표시되도록 그라데이션 방향은 180으로 둡니다. - 대화상자에서 저장을 클릭합니다. 섹션에 어두운 베일 아래의 사진이 표시됩니다.
- 대상 텍스트 요소에 마우스를 올리고 더보기, 설정을 차례로 클릭합니다. 해당 요소의 스타일 패널에서 글꼴 색상을 흰색으로 설정하고 저장을 클릭합니다.
- 툴바에서 저장을 클릭합니다.
사진에서 가장 밝은 부분과 제목을 비교합니다. 최소 4.5대 1, 큰 제목은 3대 1의 대비를 목표로 합니다. 목표에 대한 설명은 타이포그래피 페이지에 있습니다. 여전히 읽기 어렵나요? 두 값을(예: 0.8과 0.5로) 높입니다.
표시 내용
섹션에 어두운 베일 아래의 사진이 표시되며, 위쪽이 가장 어둡고 흰색 제목이 표시됩니다. Cover는 섹션 전체를 채우므로 좁은 화면에서는 사진의 양옆이 더 많이 잘립니다.
설정의 동작 방식
| 컨트롤 | 기능 |
|---|---|
| 배경 | 콘텐츠 뒤의 색상. 선택 도구의 불투명도 슬라이더로 투명하게 만듭니다. |
| 배경 이미지 | 콘텐츠 뒤의 사진. 이미지 선택, URL, AI 이미지 생성(사이트에서 끄지 않은 경우)에서 가져옵니다. |
| 배경 스타일 | 사진이 요소를 채우는 방식. 다음 표를 참조하세요. |
| 배경 위치 | 사진이 고정되는 지점. Cover에서는 사진의 어느 부분이 표시되는지 결정합니다. |
| 배경 스타일 | 결과 |
|---|---|
| 테마 기본값 | 테마에서 별도로 지정하지 않는 한 사진이 왼쪽 위 모서리부터 원래 크기로 반복됩니다. |
| Cover | 사진이 요소를 가득 채우고 맞지 않는 가장자리는 잘립니다. 사진에 가장 적합합니다. |
| Contain | 사진 전체가 한 번 표시됩니다. 양쪽에 빈 구역이 남을 수 있습니다. 로고에 가장 적합합니다. |
| 반복 없음 | 원래 크기로 한 번만 표시됩니다. |
| 반복 | 사진이 요소를 가득 채우도록 바둑판식으로 배열됩니다. 패턴에 적합합니다. |
색상은 사진 아래에 있습니다. 사진의 투명한 부분, Contain 사진 주위의 구역, 사진이 로드되는 동안 표시됩니다. 사진의 주요 색조에 가까운 색상을 선택합니다.
크기 빠른 로딩을 위한 최적화는 사진을 너비 최대 1024px로 축소하고 WebP로 저장합니다. 상자에는 적합하지만 큰 화면의 전체 구역에서는 흐릿해 보입니다.
휴대폰을 포함하여 모든 화면 크기에서 같은 사진이 로드됩니다. 호버 스타일 패널에는 별도의 배경과 배경 이미지가 있으므로 상자가 호버 시 색상을 바꾸거나 사진을 교체할 수 있습니다.
섹션 배경 효과
이러한 효과에는 섹션이 필요합니다. 고정 이미지와 패럴랙스 이미지는 배경 이미지의 사진을 이동시키므로 사진을 먼저 설정합니다.
| 배경 효과 | 방문자 화면 | 설정 |
|---|---|---|
| 단순 이미지 | 사진이 페이지와 함께 스크롤됩니다. 기본값입니다. | 없음 |
| 고정 이미지 | 콘텐츠가 스크롤되는 동안 사진은 고정됩니다. | 없음 |
| 패럴랙스 이미지 | 사진이 콘텐츠보다 느리게 스크롤됩니다. | 패럴랙스 속도(0~100. 0인 상태에서 패럴랙스 이미지를 선택하면 20으로 설정됨), 패럴랙스 모드(고정 또는 로컬), 모바일에서 사용 안 함(너비 481px 미만 화면) |
| 그라데이션 | 두 색상의 혼합. 단독으로 또는 사진 위에 표시됩니다. | 시작 색상, 종료 색상, 그라데이션 방향(1~360도. 180은 위에서 아래로), 시작 위치, 종료 위치 |
| YouTube 동영상 | 섹션이 화면에 표시되는 동안 무음 동영상이 재생되고 스크롤되어 벗어나면 일시 정지됩니다. | YouTube 동영상 URL, 시작 시간(초), 종료 시간(초), 동영상 옵션 |
사진 위에서는 그라데이션이 항상 가장자리에서 가장자리까지 표시됩니다. 시작 위치와 종료 위치는 사진 없는 그라데이션에만 적용됩니다.
배경이 표시되지 않는 경우
- 사진이 얇은 조각으로 표시됩니다. 배경은 높이를 추가하지 않으므로 섹션 높이는 콘텐츠와 안쪽 여백만큼만 됩니다. 콘텐츠를 추가하거나 일반 패널에서 100% 높이를 켭니다. 안쪽 여백을 더 추가하려면 더 높은 섹션을 참조하세요.
- 사진이 반복되거나 한 모서리만 표시됩니다. 배경 스타일이 테마 기본값으로 설정되어 있습니다. Cover를 선택합니다.
- 넓은 화면에서 사진이 흐릿해 보입니다. 빠른 로딩을 위한 최적화는 너비를 최대 1024px로 만듭니다. 이미지 크기 목록에서 더 넓은 크기를 선택합니다.
- 사진이 진한 검정 뒤에 숨겨져 있습니다. 그라데이션 색상에 투명도가 없습니다. 각 값의 끝에
rgba(0, 0, 0, 0.6)처럼 1보다 작은 숫자를 붙입니다. - 제목이 계속 어둡게 표시됩니다. 텍스트 요소의 HTML 클래스에 있는 색상 클래스나
!important가 있는 테마 규칙이 우선합니다. 칩을 제거하거나 타이포그래피를 참조하세요. - 페이지를 다시 로드하자 배경이 사라졌습니다. 대화상자의 저장은 변경 사항을 에디터에만 유지합니다. 툴바에서 저장을 클릭합니다.
- 색상이 표시되지 않습니다. 사진이 가리고 있습니다. 사진 위의 색조에는 배경 효과의 그라데이션을 사용합니다.
- 시작 위치와 종료 위치를 변경해도 아무것도 바뀌지 않습니다. 섹션에 배경 이미지가 있으므로 그라데이션이 가장자리에서 가장자리까지 표시됩니다. 대신 그라데이션 방향과 투명한 색상을 사용합니다.
- 클래스 색상이 우선합니다. 예를 들어 Primary background 같은 클래스가 HTML 클래스에 있으면 배경보다 우선합니다. 해당 칩을 제거합니다.
- 배경은 서클 카운터, 진행률 표시줄, 구분선에서는 작동하지 않습니다. 이러한 요소는 자체 색상을 사용합니다. 일반 패널에서 배경색, 배경색, 색상을 설정합니다.
다음 단계
- 타이포그래피: 사진 위 제목 색상을 설정하고 대비를 확인합니다.