사용자 정의된 CSS 속성 및 특성

HTML 요소를 사용자 정의하려면 다음을 삽입합니다. 계단식 스타일 시트 (CSS) 속성을 클래스 또는 선택기에 적용합니다. Webflow에서 스타일 패널은 다양한 CSS 속성(예: 위치, 오버플로, 상자 그림자 등)에 대한 액세스를 허용합니다. 모두 CSS 속성.

맞춤형 CSS 속성 및 사양을 활용하면 스타일 패널에서 기본적으로 지원되지 않는 광범위한 CSS 속성 및 값을 통합할 수 있습니다. 이를 통해 설계 유연성이 향상되고 개인화된 코드 임베딩의 필요성이 줄어들어 설계 작업 흐름이 간소화됩니다.

주목: 제한된 브라우저 지원이 있는 CSS 속성과 공급업체 접두사가 있는 속성(예: -webkit)은 개인화된 속성으로 지원되지 않습니다.

유용한 통찰력: 특정 CSS 속성은 웹사이트 성능에 영향을 미칠 수 있습니다. 가능한 경우 광범위한 CSS 활용을 최소화하면서 복잡한 CSS 기능 및 속성의 활용을 최적화하는 것이 좋습니다.

이 튜토리얼에서는 다음 사항을 파악합니다.

1. 맞춤형 속성과 가치를 통합하는 방법
2. 개인화된 값을 Webflow 호환 속성에 연결하는 방법
3. 개인화된 값에 변수를 구현하는 방법
4. 일반적인 문의 사항 및 문제 해결 기술

맞춤형 속성과 가치를 통합하는 방법

시작하기 전에: 요소에 클래스를 설정하거나 HTML 태그 선택기를 활용하여 맞춤형 속성을 추가하려는 요소 세트를 선택하세요.

클래스에 개인화된 속성을 추가하려면 다음을 수행하십시오.

1. 개인화된 속성을 적용하려는 요소를 선택하세요.
2. 방문하다 스타일 패널 > 사용자 정의 속성
3. 딸깍 하는 소리 추가하다
4. CSS 속성을 입력하세요. 지정 지정 필드(예: 텍스트-장식-색상)
5. 입력 값 현장에서(예: #146EF5)
6. 때리다 입력하다 키보드에서

내부자 팁: 보다 정확하고 역동적인 디자인 영향을 위해 고급 기능(예: calc(), color-mix() 등)이 포함된 사용자 정의 값을 사용할 수 있습니다.

내부자 팁: 여러 줄의 CSS를 삽입할 수 있습니다. 스타일 패널 > 사용자 정의 속성. Webflow 자동으로 선택한 요소에 CSS를 구성하고 적용합니다.

속성 이름을 입력하면 액세스 가능한 속성과 해당 키보드 단축키(예: 명령 + 1, 명령 + 2등)이 실현될 예정이다. 속성 필드를 자동화하려면 명령 (Mac의 경우) 또는 제어 (윈도우즈에서) + 숫자 원하는 속성 옆의 자동 완성 목록에 표시되거나 위로 그리고 아래에 키보드의 키를 눌러 활용하려는 속성을 강조 표시하고 누릅니다. 입력하다 또는 탭 그것을 선택합니다.

내부자 팁: 일련의 맞춤형 속성 및 값을 적용할 때 다음을 누를 수 있습니다. 탭 값을 기록하기 위해 값을 입력한 후 그리고 추가하려는 다음 속성을 시작합니다.

Designer 캔버스는 맞춤형 속성 및 값을 도입할 때 변경 사항을 즉시 반영합니다. Webflow 호환 속성을 삽입하고 여기에 사용자 정의된 값을 할당하면 스타일 패널에 설정된 기존 값을 대체합니다. 스타일 패널에 적용된 모든 스타일과 마찬가지로 고유한 중단점에 서로 다른 값을 부여할 수도 있습니다.

특정 속성에 대해 MDN documentation을 참조하려면 속성 이름 위에 마우스를 놓고 MDN에서 보기. 당신은 또한 보유할 수 있습니다 명령 (Mac의 경우) 또는 제어 (Windows의 경우) 키보드에서 속성 이름을 탭하여 새 탭에서 MDN documentation을 잠금 해제하세요.

클래스나 태그에서 개인화된 속성을 제거하려면 지우려는 속성 위로 마우스를 가져간 다음 '쓰레기” 아이콘입니다.

개인화된 값을 Webflow 호환 CSS 속성에 연결하는 방법

기존 Webflow 호환 속성에 개인화된 값을 입력하여 연결할 수 있습니다. 스타일 패널 > 사용자 정의 속성, 개인화된 값을 Webflow 호환 글꼴, 크기 및 색상 속성에 직접 연결할 수도 있습니다.

1. 실행 스타일 패널
2. 개인화된 값(예: 너비 속성에 대한 입력)을 적용하려는 입력 필드를 클릭하거나 마우스오버합니다.
3. 보라색 '을 탭하세요.점” 아이콘 — 보라색 “점” 아이콘은 글꼴, 크기, 색상 속성에만 표시됩니다.
4. 다음을 클릭하세요. 관습 탭
5. 입력 개인화된 가치 현장에서 (예: 클램프(1rem, 1.5rem, 1.5rem))

주목: 배경 속성(예: 배경색, 배경 크기 등) 또는 하위 속성(예: box-shadow: 2px custom-value-offset 3px 4px #146EF5)에는 사용자 정의 CSS 값을 사용할 수 없습니다.

글꼴, 크기, 색상 속성이 아닌 속성에 개인화된 값을 적용하려는 경우 먼저 다음에서 개인화된 값을 추가할 수 있습니다. 스타일 패널 > 사용자 정의 속성.

Webflow 호환 속성에서 개인화된 값을 분리하려면 지우려는 개인화된 값을 탭한 다음 "풀리다” 아이콘입니다. 연결이 해제되면 값은 Webflow의 기본값으로 되돌아갑니다(예: 너비는 자동으로 되돌아가고 불투명도는 100%로 되돌아가는 등).

개인화된 가치에 변수를 활용하는 방법

개인화된 값에 변수를 통합할 수 있습니다.

주목: 개인화된 CSS 값이 변수 값과 동일한 유형인 경우에만 변수를 개인화된 CSS 값으로 활용할 수 있습니다(예: 색상 변수를 색상 값을 허용하는 개인화된 속성의 값으로만 설정할 수 있음).

변수를 속성 값에 연결하려면 다음을 수행하십시오.

1. 시작하다 변수 패널
2. 개인화된 CSS 값으로 사용하려는 변수 위로 마우스를 가져가세요.
3. 설정 '을 탭하세요.장부" 아이콘
4. 탭하세요. CSS 해당 값을 복제하는 필드(예: var(–webflow-blue))
5. 개인화된 속성을 적용하려는 요소를 선택하세요.
6. 다음으로 진출 스타일 패널 > 사용자 정의 속성
7. 딸깍 하는 소리 추가하다
8. CSS 속성을 입력하세요 지정 현장에서(예: 텍스트-장식-색상)
9. 복제한 값을 붙여넣으세요. CSS 필드의 값 필드
10. 때리다 입력하다 키보드에서

주목: 개인화된 값에 활용되는 변수의 이름을 변경하는 경우 맞춤화된 값을 수동으로 업데이트하여 정렬해야 합니다.

FAQ 및 문제 해결

공급업체 접두사가 붙은 개인화된 CSS 속성을 활용하고 싶지만 자동 완성 목록에 선택 항목이 없습니다.

제한된 브라우저 지원이 있는 CSS 속성과 공급업체 접두사가 있는 속성(예: -webkit)은 개인화된 속성으로 지원되지 않습니다.

속성에 개인화된 값을 정의하고 싶지만 해당 속성이 자동 완성 목록에 없습니다.

현재는 다음 속성에 대해 개인화된 값을 정의할 수 없습니다.

• 배경
• 배경 첨부
• 배경 이미지
• 배경 위치
• 배경 반복
• 배경 크기
• 글꼴 변형 설정
• 이행
• 전환 지연
• 전환 기간
• 전환 속성
• 전환 타이밍 기능

개인화된 값으로 인해 입력 오류가 발생합니다.

설정한 값이 유효한 CSS이고 선택한 속성에서 지원되는지 확인하세요. 속성 이름 위에 마우스를 놓고 MDN에서 보기 MDN documentation을 방문하여 속성과 값이 올바르게 설정되었는지 확인하세요.

내 개인화된 속성과 값이 Designer 캔버스에 반영되지 않습니다.

속성 및 값이 적절하게 구성되었지만 디자이너 캔버스에 반영되지 않은 경우 사이트 및/또는 사용자 정의 코드 포함 요소의 사용자 정의 코드를 면밀히 조사하고 충돌하는 속성 및 값을 제거하십시오. 또한 상충되는 약어가 있는지 검사해야 합니다. 속기 속성 — 예를 들어, 다음 컨트롤을 사용하여 margin-top을 정의한 경우 스타일 패널 > 간격그리고 약식 여백 속성을 추가했습니다. 스타일 패널 > 사용자 정의 속성, 한 값이 다른 값보다 우선할 수 있습니다.

내 개인화된 속성과 값이 게시된 사이트에 렌더링되지 않습니다.

속성과 값이 올바르게 구성되었지만 게시된 사이트에서 렌더링되지 않는 경우 테스트 중인 브라우저가 속성과 값을 지원하는지 확인하세요. 당신은 할 수 있습니다 사용할 수 있나요? 대지 브라우저 호환성을 확인하려면 CSS 속성을 검색하세요.

문제가 지속되거나 다른 우려사항을 신고하려면 고객 지원팀에 연락하세요 문제를 복제하는 단계를 안내합니다.