사용자 정의 속성

HTML 속성은 HTML 요소의 속성(예: 동작 또는 모양)을 정의합니다. 예를 들어, 범주 유사한 요소를 분류하는 방법을 제공하는 HTML 특성이며 CSS와 함께 사용되어 해당 category를 공유하는 요소에 스타일을 포함합니다. URL 링크의 대상 URL을 지정하는 또 다른 HTML 특성입니다.

기본 Webflow 요소, 스타일 및 구성(예: 링크, 카테고리, ID 등)을 사용하여 일부 HTML 속성을 생성할 수 있습니다. 다음을 사용하여 다른 사람을 개발할 수 있습니다. 사용자 정의 속성는 도구 설명 작성, ARIA 특성으로 사이트 접근성 향상, CMS 데이터로 사용자 정의 코드 및 페이지 스타일 기능 확장 등 다양한 목적에 유용합니다.

이 튜토리얼을 통해 다음 사항을 이해하게 됩니다.

1. 사용자 정의 속성을 만드는 방법
2. 사용자 정의 속성에서 CMS 데이터를 활용하는 방법
3. 사용자 정의 속성에서 구성 요소 기능을 활용하는 방법
4. category 속성을 이용하여 부품 및 CMS 데이터를 디자인하는 방법
5. 사용자 정의 속성을 제어하는 방법

기억하다: 일부 사용자 정의 속성은 이미 기본 Webflow 요소, 스타일 및 구성을 사용하여 생성할 수 있으므로 예약되어 있습니다. 예를 들어, 지정할 수 없습니다. URL 링크를 모방하기 위해 기존 요소에 대한 사용자 정의 속성으로 사용되지만 링크 설정을 사용하여 링크 요소에 대한 링크 대상 URL을 정의할 수 있습니다.

사용자 정의 속성을 만드는 방법

새로운 사용자 정의 속성을 공식화하려면:

1. 사용자 정의 속성을 생성하려는 요소를 선택하세요.
2. 다음으로 향하세요 요소 설정 패널 > 사용자 정의 속성
3. 누르세요 "...을 더한" 아이콘
4. 들어가다 제목 사용자 정의 속성(예: 툴팁, 아리아 라벨등)과 함께 콘텐츠

전문가 팁: 다음에서 HTML 속성의 전체 목록에 액세스할 수 있습니다. Mozilla HTML 속성 참조.

사용자 정의 속성에서 CMS 데이터를 활용하는 방법

CMS 데이터를 사용자 정의 속성에 연결하여 디자인, 코드 및 동적 데이터 간의 연결을 형성하고 디자인의 강력함과 유연성을 강화할 수 있습니다. 이를 통해 HTML 데이터 속성(예: 지도 또는 소셜 위젯 미리 보기)을 활용하는 통합 또는 위젯을 관리하고, 사용자 정의 CSS를 사용하여 CMS 필드 값을 기반으로 페이지 스타일을 조정하고, CMS 데이터를 사용하여 ARIA 속성을 채워 사이트 접근성을 향상시킬 수 있습니다. , 그리고 더.

필수적인: 컬렉션 페이지 또는 컬렉션 목록 내의 사용자 정의 속성에 CMS 데이터를 독점적으로 연결할 수 있습니다.

CMS 데이터를 맞춤 속성에 연결하려면 다음 단계를 따르세요.

1. 사용자 정의 속성을 만들려는 요소를 선택하세요.
2. 방문하다 요소 설정 패널 > 사용자 정의 속성
3. “를 클릭하세요....을 더한" 아이콘
4. 들어가다 제목 사용자 정의 속성(예: 툴팁, 아리아 라벨, 등.)
5. 보라색 "을 클릭하세요.점” 아이콘이 콘텐츠 필드
6. 사용자 정의 속성에 연결하려는 컬렉션 필드를 선택하세요.

전문가 팁: CMS 데이터를 ID 속성에 연결할 수도 있습니다. 이 속성은 사용자 정의 속성과 별도로 처리됩니다. 요소 설정 패널. 이를 통해 특정 CMS 항목을 인식하는 고유 ID를 설정할 수 있으며, 이를 활용하여 사용자 정의 코드로 해당 항목을 타겟팅할 수 있습니다.

사용자 정의 속성에서 구성요소 속성을 활용하는 방법

사용자 정의 속성을 구성요소 속성에 연결할 수도 있습니다. 예를 들어 복잡한 스타일 및 CMS 분야를 촉진하고 규제하는 데 이러한 기능을 활용할 수 있습니다. 구성요소 속성에 대해 자세히 알아보세요.

구성 요소 속성을 사용자 정의 속성에 연결하려면 다음을 수행합니다.

1. 사용자 정의 속성을 만들려는 요소를 포함하는 기본 구성 요소를 수정합니다.
2. 사용자 정의 속성을 위조하려는 요소를 선택하세요.
3. 이동 요소 설정 패널 > 사용자 정의 속성
4. “를 클릭하세요....을 더한" 아이콘
5. 들어가다 제목 사용자 정의 속성(예: 툴팁, 아리아 라벨, 등.)
6. 보라색 "을 클릭하세요.점” 아이콘이 콘텐츠 필드
7. (선택사항) 새 구성요소 속성 설정
8. 사용자 정의 속성에 연결하려는 구성요소 속성을 선택하세요.

CMS 데이터와 구성요소를 디자인하는 방법 범주 기인하다

당신은 범주 사용자 정의 코드 클래스 또는 Webflow에서 설정한 클래스(예: 스타일링 패널에서 제작)를 사용하여 CMS 데이터 및 구성 요소에 대한 스타일 변형을 생성하는 속성입니다. 예를 들어 다음을 적용할 수 있습니다. 범주 사이트 전체의 카드 구성 요소에 밝은 테마와 어두운 테마를 사용하는 속성입니다.

기억하다: 그만큼 범주 속성은 텍스트 기반 CMS 데이터 및 구성 요소 속성에만 활용할 수 있습니다.

Webflow에서 고안한 클래스는 소문자이며 공백을 제외합니다. 예를 들어 스타일 패널에서 다음과 같은 클래스를 생성하는 경우 내 멋진 수업, 파생 클래스는 다음과 같습니다 내 최고 수준 — 따라서 스타일을 참조하기 위해 범주 속성을 입력하면 내 최고 수준.

또한 Webflow는 디자이너에서 생성된 단일 문자 클래스에 밑줄을 추가합니다(예: 씨 로 변하다 _씨).

필수적인: 그만큼 스타일 선택기 패널 CMS 데이터 또는 구성 요소 속성에서 참조되는 클래스를 인식하지 못합니다. 사용하지 않는 스타일을 지우기 전에 사용하지 않는 특정 클래스를 스타일 선택기 패널, 웹사이트의 어떤 맞춤 속성에도 활용되지 않습니다.

콘텐츠 관리 시스템 데이터

CMS 데이터를 사용자 정의하려면 수업 기인하다:

1. 특수 속성을 생성하려는 요소를 선택하세요.
2. 향하다 요소 설정 패널 > 특수 속성
3. “를 탭하세요.추가하다" 기호
4. 끼워 넣다 수업 로 식별자 부분
5. 보라색 "을 탭하세요.점” 기호가 값 부분
6. 링크하려는 컬렉션 섹션을 선택하세요. 수업 기인하다

알림: 컬렉션 페이지 또는 컬렉션 목록 내부의 사용자 정의 속성에만 CMS 데이터를 연결할 수 있습니다.

강요

구성요소를 사용자 정의하려면 수업 기인하다:

1. 포함하려는 요소를 포함하는 기본 구성요소를 편집합니다. 수업 기인하다
2. 통합하려는 요소를 선택하세요. 수업 기인하다
3. 로 진행 요소 설정 패널 > 특수 속성
4. “를 탭하세요.추가하다" 기호
5. 끼워 넣다 수업 로 식별자 부분
6. 보라색 "을 탭하세요.점” 기호 값 부분
7. (선택 사항) 구성 요소의 새로운 측면을 형성합니다.
8. 연결하려는 구성요소의 기능을 선택하세요. 수업 속성(예: "테마")

그런 다음 구성 요소 인스턴스 내에서 이 요소에 스타일을 적용하려면 다음을 수행합니다.  

1. 캔버스에서 구성 요소 인스턴스를 선택합니다.
2. 액세스 소품 패널
3. 클래스 제목(Webflow 또는 맞춤형 코드에서 지정한 제목)을 첨부된 구성 요소 기능의 콘텐츠로 삽입합니다. 수업 속성(예: 어두운 "테마" 구성 요소 기능의 콘텐츠로)

구성 요소 측면을 더 자세히 살펴보세요.

맞춤형 속성을 처리하는 기술

사용자 정의된 속성을 수정하려면:

1. 사용자 정의된 속성을 수정해야 하는 요소를 선택하세요.
2. 향하다 요소 설정 패널 > 특수 속성
3. 수정하려는 사용자 정의 속성을 탭하세요.
4. 갱신 식별자 및/또는 내용물 사용자 정의된 속성의

사용자 정의된 속성을 지우려면:

1. 사용자 정의된 속성을 제거하려는 요소를 선택하세요.
2. 액세스 요소 설정 패널 > 특수 속성
3. “를 탭하세요.쓰레기통지우려는 사용자 정의 속성 옆에 있는 " 기호