이 세션을 통해 다음을 발견하게 됩니다:
- 카테고리를 형성하고 구현하는 방법
- 카테고리 조정 방법
- category를 삭제하는 방법
- category를 복제하는 방법
- 조합 카테고리를 만드는 방법
- 글로벌 category 구축 방법
카테고리 생성 및 적용 방법
요소 스타일링을 시작하는 순간 category가 자동으로 생성되어 선택한 요소에 구현됩니다. 이 요소에 대한 모든 스타일 수정 사항은 이 category에 유지됩니다.
category를 시작하려면:
- 캔버스에서 요소 선택
- 입력 지정자 필드 category를 정의하고
그게 다입니다. category를 공식화했습니다!
스타일을 통합하기 전에 category 이름을 입력하여 수동으로 category를 시작할 수도 있습니다. 지정자 필드.
도달하는 방법에는 3가지가 있습니다. 지정자 필드:
- 스타일 패널의 지정자 필드에 액세스
- 사용 명령 + 입력하다 (Mac의 경우) 또는 제어 + 입력하다 (Windows의 경우) 키보드 단축키
- 요소를 마우스 오른쪽 버튼으로 클릭하고 상황에 맞는 메뉴에서 category 삽입을 선택합니다.
동일한 category를 원하는 만큼 많은 요소에 구현하려면:
- 캔버스에서 요소를 선택하세요.
- category 이름을 입력하십시오. 지정자 필드
- 때리다 입력하다
category 이름을 입력하기 시작하면 지정자, category 이름이 나타나는 것을 볼 수 있습니다. 지정자 드롭 다운 목록. 이름을 선택하거나 키보드 화살표를 사용하여 탐색하고 을 눌러 category를 선택할 수 있습니다. 입력하다.
카테고리를 수정하는 방법
category가 설정되고 다양한 요소에 구현된 후 해당 category를 변경할 수 있습니다.
category를 수정하려면:
- 해당 category가 있는 요소를 선택하세요.
- 스타일링을 조정하세요
모든 스타일 수정은 해당 category가 사이트 전체에 사용되는 모든 발생에 영향을 미칩니다.
category에는 요소 유형에 따라 고유한 이름이 제공되지만 이름을 자유롭게 바꿀 수 있습니다.
category의 이름을 바꾸는 방법에는 4가지가 있습니다.
- category 이름을 두 번 탭합니다. 지정자, 이름을 바꾸고 다음을 누릅니다. 입력하다
- 누르다 명령 + Shift + Enter, category의 이름을 바꾸고 입력하다
- 요소를 마우스 오른쪽 버튼으로 클릭하고 다음을 선택하십시오. category 이름 바꾸기, 클래스 이름을 변경하고 입력하다
- category 이름 위로 마우스를 가져가세요. 지정자, 나타나는 드롭다운을 클릭하고 category 이름 바꾸기, category의 이름을 바꾸고, 입력하다
새 이름이 디자인 매니저 그리고 지정자 에서 스타일 패널.
다음에서 category의 이름을 바꿀 수도 있습니다. 디자인 매니저.
CSS 이름 지정에 대한 우수 사례:
- 범주 이름은 대소문자를 구분합니다("alert"는 "ALERT"와 동일).
- 카테고리 이름은 문자로 시작해야 합니다.
- 카테고리 이름은 영숫자 형식(az 및 0-9)과 하이픈을 사용해야 하며 특수 문자를 피해야 합니다.
전문가의 팁: 카테고리 이름을 지정할 때 하이픈을 논리적 그룹 구분 기호(탭 메뉴)로 적용하고 스타일이 아닌 작업을 기반으로 카테고리별 이름을 제공하는 것이 좋습니다. 좋음: 양식 버튼. 나쁨: 파란색 버튼.
category 이름의 고유 문자
고유 문자는 알파벳이나 숫자와 다른 문자를 말합니다. 구두점 및 기타 기호는 고유 문자의 인스턴스 역할을 합니다.
category 이름에는 가장 고유한 문자를 포함할 수 있지만(예: 당신의 category 이름 +), Webflow는 자동으로 고유 문자를 하이픈으로 변경하므로 보증되지 않습니다.
예를 들어, category라는 이름의 당신의 category 이름 + 라벨이 붙은 category와 정확히 동일하게 취급됩니다. 당신의 category 이름 $ 왜냐하면 둘 다 + 그리고 $ 고유한 문자는 하이픈으로 변환됩니다. (예: 당신의 category 이름 –).
인용된 시나리오에서 고유 문자를 활용하는 두 개의 개별 카테고리에 대한 스타일 변경은 이후 두 카테고리 모두에 적용됩니다.
category를 지우는 방법
이미 category를 보유하고 있는 요소에 다른 category를 적용하려는 경우 다음 두 가지 방법으로 기존 category를 제거할 수 있습니다.
- 입력 지정자 필드 그리고 누르세요 삭제 키보드에서
- category 위로 마우스를 가져가서 아래쪽 화살표를 탭하고 category 제거
클래스 복제 방법
원래 클래스를 수정하지 않고 클래스를 복제하고 조정할 수 있는 옵션이 있습니다.
기존 수업의 사본을 만들려면 다음 안내를 따르세요.
- 해당 수업 위에 마우스 포인터를 올려보세요.
- 아래쪽 화살표를 선택하세요.
- 선택하다 중복 수업
- 클래스에 새 이름을 지정하고 입력하다
중요한: 복제된 클래스는 원래 클래스와 독립된 새로운 클래스를 구성합니다. 수정 사항은 더 이상 복제된 클래스에 적용되지 않습니다.
콤보 클래스를 구축하는 기술
요소에 클래스를 적용하고 스타일을 추가한 후 동일한 클래스의 다른 요소에 영향을 주지 않으면서 이 클래스의 특정 인스턴스에 대해 사소한 스타일 조정을 구현하려고 할 수 있습니다. 새로운 클래스를 만들고 동일한 스타일을 복제하는 대신 Webflow는 우리가 콤보 클래스라고 부르는 것을 쉽게 생성하여 스타일 재정의를 도입하여 독특한 변형을 만들 수 있습니다.
새 클래스 이름을 입력하여 요소에 콤보 클래스를 추가할 수 있습니다. 선택기 필드 기본 클래스 바로 옆에 있습니다.
당신은 액세스할 수 있습니다 선택자 3가지 다른 방식으로:
- 선택 선택기 필드, 기존 클래스 옆에 위치
- 누르기 명령 + 입력하다 (Mac의 경우) 또는 제어 + 입력하다 (윈도우즈에서)
- 요소를 마우스 오른쪽 버튼으로 클릭하고 선택 수업 추가 컨텍스트 메뉴에서
초기 기본 클래스 이후의 모든 클래스는 콤보 클래스로 인식됩니다. 콤보 클래스는 선택한 요소에만 추가되었으므로 이 요소에 적용된 스타일 수정 사항은 기본 클래스의 다른 항목에 영향을 주지 않습니다.
콤보 클래스를 적용하는 기술
다른 요소가 동일한 기본 클래스와 콤보 클래스를 보유하도록 하려면 이러한 클래스를 연속적으로 적용할 수 있습니다. 먼저 기본 클래스를 적용한 다음 콤보 클래스를 적용합니다.
키보드 단축키: 선택기 필드에 클래스 이름을 입력할 때 쉼표를 입력하면 해당 클래스가 포함되어 선택기 필드에 다시 초점을 맞출 필요 없이 후속 콤보 클래스를 신속하게 입력할 수 있습니다.
스타일 재정의에 대한 접근 방식
콤보 클래스를 생성하면 새 스타일을 도입하거나 기본 클래스에서 상속된 스타일을 재정의할 수 있습니다. 수정 사항은 콤보 클래스에만 영향을 미칩니다.
스타일 패널 내에서 상속된 스타일은 주황색으로 표시되고 재정의되거나 새로운 스타일은 파란색으로 강조 표시됩니다.
기본 클래스 수정에 대한 접근 방식
콤보 클래스를 사용하여 요소의 스타일을 지정하는 동안 콤보 클래스는 보다 구체적인 선택 항목으로 사용되므로 모든 스타일 조정은 콤보 클래스에만 영향을 미칩니다. 기본 기본 클래스의 스타일을 지정하려면 선택기 위에 있는 상속 메뉴를 통해 액세스할 수 있습니다.
- 위의 상속 선택기 표시를 클릭합니다. 선택기 필드
- 기본 클래스를 선택하세요
- 스타일 변경 사항 구현
- 때리다 뒤쪽에 위로 선택자 콤보 클래스 스타일 지정으로 되돌리려면
기본 클래스에 대한 모든 변경 사항은 콤보 클래스와 함께 선택한 요소를 포함하여 해당 기본 클래스가 적용되는 모든 요소에 반영됩니다.
때리다 뒤쪽에 선택기 위의 콤보 클래스 스타일 지정으로 다시 전환
콤보 클래스에서 동일한 속성의 스타일을 이미 지정한 경우 기본 클래스에 대한 특정 스타일 변경 사항이 콤보 클래스에 표시되지 않을 수 있습니다. 콤보 클래스에 의해 값이 재정의되기 때문입니다. 이러한 스타일은 빨간색 취소선으로 표시됩니다.
복제에 대비하여 클래스를 결합하면 보다 체계적인 접근 방식이 제공됩니다. 클래스의 핵심 속성을 상속받은 콤보 클래스는 베이스의 스타일을 유지하면서 변형 역할을 합니다. 그러나 계층화된 상속 관리의 복잡성으로 인해 여러 콤보 클래스를 생성하지 않는 것이 좋습니다.
더 심도 있는 수정을 목표로 하는 경우 원본 클래스를 복제하는 것이 더 효율적인 방법임이 입증되었습니다. 이렇게 하면 원래 스타일의 모든 특성을 갖춘 고유한 새 클래스가 생성되어 더 쉽게 조정할 수 있습니다.
보편적인 클래스 만들기
글로벌 클래스는 웹 사이트 전체의 다양한 요소에 적용할 수 있는 다양한 스타일을 제공합니다. 이러한 클래스는 광범위한 스타일을 수용하며 기본 클래스에 할당됩니다. 그러나 전역 클래스로 스타일이 지정된 요소는 기본 클래스 요소와 별도로 유지됩니다. 예를 들어, 보편적으로 적용되는 그림자 스타일을 디자인하는 것은 균일성을 위한 전략적 접근 방식을 제시합니다.
전역 클래스 요소를 효과적으로 구현하려면 모든 전역 클래스 요소를 수용할 수 있는 스타일 가이드 페이지와 같은 전용 페이지를 만드는 것이 좋습니다. 여기에서 다음을 수행할 수 있습니다.
- 단면 블록 삽입
- 고유한 클래스 이름을 지정합니다(예: Supreme Glow).
- 섹션 블록 사용자 정의 원하는 속성(예: 사이트 전체 사용을 위한 반복 그림자 속성) 포함
그리고 짜잔! 다른 스타일과 함께 적용할 수 있는 전역 클래스를 성공적으로 구축했습니다.
기억하다: 전역 클래스 이름은 전역적으로 해당 클래스에 대한 적용을 나타냅니다.
전역 클래스를 다른 클래스 위에 겹쳐 놓으면 해당 스타일 속성을 다양한 클래스 구조에 원활하게 통합할 수 있습니다.
최적의 참조:
- Workspace 스팟 및 멤버 포함 또는 제거 - 2024년 4월 15일
- 센터링 상자 요약 - 2024년 4월 15일
- 나중에 참조할 수 있도록 사이트 저장 - 2024년 4월 15일
EN 
ZH 
ZH_CN 
KO 
JA