HTML ID와 클래스.

섹션에 HTML ID를 지정하면 버튼이 해당 섹션으로 이동할 수 있습니다. 휴대폰에서 요소를 숨기거나 화면 크기별로 간격을 설정하거나 테마에서 정의한 모양을 재사용하려면 HTML 클래스를 추가합니다. 두 필드는 모든 요소의 일반 패널 하단에 있습니다. 클래스는 모양을 일관되게 유지합니다. CSS 규칙이 바뀌면 해당 클래스가 있는 모든 요소가 따라갑니다.

동영상에서는 아래의 첫 번째 실전 방법에 따라 버튼이 페이지 아래쪽 섹션으로 이동하도록 만듭니다.

시작하기 전에

• DXPR Builder에서 페이지를 엽니다. 요소를 가리키면 더보기가 있는 컨트롤 바가 표시됩니다. 빌더가 처음인가요? 첫 페이지를 참조하세요.
• 저장(대화상자)은 변경 사항을 에디터에 유지합니다. 콘텐츠 위 빌더 툴바의 저장은 페이지를 저장하고 “Saved field”를 표시합니다.
• HTML ID 사용은 이동 대상에 사용합니다. “둘러보기 예약” 버튼이 예약 양식으로 스크롤할 수 있습니다. 긴 페이지 상단의 링크 목록이 각 부분으로 안내할 수 있습니다.
• 반복되는 모양에는 클래스 사용을 사용합니다. 웹마스터가 CSS를 한 번 작성하면 필요한 곳에 클래스를 추가합니다. 반면 스타일 패널은 값을 각 요소에 복사하므로 시간이 지나면 달라집니다.
• 스타일 패널로 할 수 없는 작업에는 클래스 사용을 사용합니다. 휴대폰에서 요소 숨기기나 화면 크기별 간격 변경이 예시입니다.

실전: 섹션으로 이동하는 버튼

1. 대상 섹션에 마우스를 올리고 더보기, 설정을 차례로 클릭합니다.
2. 패널 일반에서 programmes 같은 짧은 이름을 HTML ID에 입력합니다. 저장을 클릭합니다.
3. 먼저 버튼의 설정을 엽니다. 링크에 정확히 같은 이름 앞에 #을 붙여 입력합니다. #programmes. 저장을 클릭합니다.
4. 빌더 툴바에서 저장을 클릭합니다.
5. 보기 메뉴(눈 모양 아이콘)에서 미리보기를 선택하고 버튼을 클릭합니다.

버튼보다 페이지 아래쪽에 있는 섹션으로 테스트하면 스크롤을 확인할 수 있습니다. 대상이 접기 패널, 탭, 캐러셀 슬라이드 안에 있으면 링크가 먼저 해당 항목을 엽니다.

실전: 휴대폰에서 요소 숨기기

1. 해당 요소에 마우스를 올리고 더보기, 설정을 차례로 클릭합니다.
2. 패널 일반에서 HTML 클래스 상자를 클릭합니다.
3. 항목에서 초소형 기기, 휴대폰에서 숨기기(<576px)를 선택합니다. 반응형 가시성 그룹에 있습니다.
4. 대화상자에서 저장을 클릭한 뒤 툴바에서 저장을 클릭합니다.

이제 너비 576px 미만의 화면에서는 에디터에서도 요소가 사라집니다. 확인하려면 휴대폰에서 페이지를 엽니다.

실전: 직접 클래스 입력

상자 HTML 클래스에서는 목록에서만 선택할 수 있습니다. 클래스 이름을 직접 입력하려면 먼저 텍스트로 전환합니다.

1. 해당 요소에 마우스를 올리고 더보기, 설정을 차례로 클릭합니다.
2. 항목 HTML 클래스에서 텍스트로 편집을 클릭합니다. 상자가 요소에 이미 있는 클래스를 나열하는 일반 텍스트 필드로 바뀝니다.
3. 그 뒤에 클래스 이름을 공백으로 구분하여 추가합니다(예: brand-card py-3 py-lg-5). 점은 제외합니다. 팀의 CSS에 있는 .brand-card는 여기에서 brand-card입니다.
4. 대화상자에서 저장을 클릭한 뒤 툴바에서 저장을 클릭합니다.

요소가 웹팀에서 정의한 모양을 적용합니다.

표시 내용

모드 미리보기에서는 버튼이 페이지를 섹션까지 부드럽게 스크롤하고 고정 헤더를 위한 공간을 남깁니다. 주소 표시줄은 #programmes로 끝납니다. 너비 576px 미만에서는 숨겨진 요소가 표시되지 않습니다. 직접 입력한 클래스는 대화상자를 다음에 열 때 칩으로 표시되며, 목록에 없는 경우(예: “brand-card”) 따옴표로 표시됩니다.

필드의 동작 방식

HTML ID

ID는 문자로 시작해야 합니다. 그 뒤에는 문자, 숫자, 하이픈, 밑줄을 사용할 수 있지만 공백은 사용할 수 없습니다. 잘못된 ID는 필드 아래에 오류를 표시하며, 수정하기 전까지 저장이 작동하지 않습니다.

필드를 비워 두면 DXPR Builder가 만든 ID가 요소에 유지됩니다. 빈 필드에는 해당 ID가 회색으로 표시됩니다. 각 ID는 페이지당 한 번씩 사용합니다. 두 요소가 하나를 공유하면 링크가 첫 번째 요소로 이동합니다.

HTML 클래스

목록에는 작업별로 그룹화된 그림자 클래스와 Bootstrap 5 클래스가 들어 있습니다(예: 바깥 여백, 안쪽 여백, 반응형 가시성, 둥근 모서리). 테마에서 끝에 자체 그룹을 추가할 수 있습니다.

열린 목록을 스크롤하거나 padding, py-5, circular 같은 이름 일부를 입력하여 좁힙니다. 입력은 목록 필터링만 수행합니다. 목록에 없는 클래스는 텍스트로 편집을 사용합니다.

Bootstrap 클래스는 페이지가 Bootstrap 5를 로드할 때만 작동합니다. 테마에서 제공되거나 일반 설정 > Bootstrap(/admin/dxpr_studio/dxpr_builder/settings)에서 제공되며, 여기에서 Bootstrap 파일 사이드로드가 Bootstrap 5로 설정되어 있습니다.

색상 및 간격 클래스 같은 Bootstrap 유틸리티 클래스는 !important로 표시됩니다. 같은 속성에서는 스타일 패널보다 우선합니다. Primary background는 배경보다 우선하며, 위쪽 바깥 여백 크기 3(mt-3)은 위쪽 바깥 여백보다 우선합니다.

이름에 화면 크기가 포함된 클래스는 해당 너비부터 적용됩니다.

따라서 py-3 py-lg-5는 작은 화면에서 위아래 16px의 안쪽 여백을 제공하고 너비 992px부터 48px을 제공합니다.

테마 개발자용

클래스에는 테마의 CSS 규칙이 필요합니다. 예를 들면 다음과 같습니다.

.brand-card {
  background: #f4f6fb;
  border-left: 4px solid #1a4d8f;
  padding: 2rem;
}

편집자에게 HTML 클래스 목록에 해당 클래스를 표시하려면 테마의 .info.yml에 등록합니다. 유틸리티 클래스를 참조하세요. 사이트 전체의 스타일은 사용자 정의 CSS를 참조하세요.

표시되지 않는 경우

• 저장이 작동하지 않고 HTML ID에 “ID must start with a letter”라고 표시됩니다. ID가 위의 규칙을 어겼습니다. 문자로 시작하고 문자, 숫자, 하이픈, 밑줄만 사용합니다.
• 새 클래스를 입력할 수 없습니다. 상자는 목록 필터링만 수행합니다. 먼저 텍스트로 편집을 클릭합니다.
• 예상한 클래스가 목록에 없습니다. 목록에는 DXPR Builder와 테마에서 정의한 클래스만 들어 있습니다. 텍스트로 편집을 클릭하고 입력합니다.
• 버튼이 전혀 스크롤되지 않습니다. 링크는 HTML ID와 정확히 같아야 하며(대소문자 포함), 앞에 #이 있어야 합니다. 두 필드를 확인하고 미리보기에서 테스트합니다.
• 클래스가 적용되지 않습니다. 이름 철자가 틀렸거나 테마에 해당 규칙이 없거나 Bootstrap 5가 로드되지 않았습니다. 철자를 확인한 뒤 규칙이나 Bootstrap 파일 사이드로드에 대해 웹마스터에게 문의합니다.
• 팀의 클래스가 일부만 변경합니다. 같은 속성의 스타일 패널 값이 테마 클래스보다 우선합니다. 스타일 패널에서 해당 값을 지웁니다.
• 버튼이 잘못된 위치로 이동합니다. 두 요소가 ID를 공유하며 첫 번째 요소가 우선합니다. 각 요소에 고유한 ID를 지정합니다.
• 섹션 제목이 고정 헤더 아래에 숨겨집니다. DXPR Builder가 헤더를 인식하지 못합니다. 웹마스터가 스크롤 오프셋 선택자를 일반 설정 > 고급 설정(/admin/dxpr_studio/dxpr_builder/settings)에서 헤더의 CSS 선택자로 설정합니다.

다음 단계

• 반응형 디자인: 화면 크기별로 표시할 요소를 계획합니다.