구성 요소 개요
배너 구성 요소는 백그라운드 이미지, 오버레이 색상, 기본 내용 필드 및 버튼, 짧은 텍스트 또는 기타 주요 정보에 대한 보조 텍스트 필드가있는 대안의 전체 넓은 헤더 옵션을 제공합니다.
- 배너는 주로 섹션 전선에서 사용해야합니다.배너는 섹션 전면에 사용되도록 설계되었지만 섹션 세부 사항, 프로필 세부 사항 및 학위 세부 사항 페이지 스키마에 사용될 수 있습니다.
- 배너는 대체 헤더로 사용될 수 있습니다 :제목 필드에 H1 옵션이 있기 때문에 배너는 섹션 전면의 헤더로 사용될 수 있습니다.
- 배너는 내용없이 사용할 수 있습니다 :배너는 제목으로 만 사용될 수 있으며 바디 카피가 없습니다.
- 구성 요소가 사용 된 텍스트의 크기로 구부립니다.사용중인 텍스트의 양과 배너 구성 요소의 전체 크기와 모양에 어떤 영향을 미치는지 고려하십시오.
- 선택한 배경 이미지 고려 :배너 구성 요소 내의 컨텐츠의 목적과 일치해야합니다.
- 배경 이미지 크기 :배경 이미지는 1200x500px 여야합니다.
- 배너 구성 요소에 다른 색상 오버레이를 사용할 수 있습니다 :배너 구성 요소는 파란색 또는 회색 오버레이를 허용합니다. 색상 선택이 어떻게 정보를 전달하고 다른 장치 (예 : 모바일, 데스크탑)에서 볼 수있는 방법에 대해 생각해보십시오.
- 배경 이미지를 회색으로 만들 수 없습니다 :배경 이미지를 회색으로 만들 수 없기 때문에 선택한 이미지와 오버레이 색상으로 텍스트가 어떻게 보이는지 염두에 두십시오 (해당 옵션의 콜 아웃 구성 요소 참조)..
- H- 태그를 올바르게 사용하십시오 :배너 구성 요소는 H1 태그 사용을 허용합니다. 배너를 사용하여 섹션 세부 사항 페이지에 두 번째 H1을 소개하지 마십시오.
- Alt-Text는 배경 이미지에 포함되어야합니다 :배너 구성 요소가 백그라운드 이미지를 사용하지만 사용자필수이미지에 대한 승인 된 대체 텍스트 포함.
배너 구성 요소에 필요한 이미지 크기는입니다.1200 x 500 px.
배너 : 단위 이름 - 목적.
- example: 배너 : Jour- 미래 학생
예제 배너 구성 요소
24630_24642
파란색 오버레이 및 메인 설명 텍스트가 포함 된 배너
예 #2
회색 오버레이 및 기본 설명 텍스트가 포함 된 배너
예 #3
파란색 오버레이, 메인 설명 및 왼쪽 설명 텍스트가 포함 된 배너
예 #4
배너, 회색 오버레이, 기본 설명 및 왼쪽 설명 텍스트