조건 - Webflow 블로그 및 리소스

다양한 조건에서 요소의 모양과 동작을 변경하여 요소에 상호 작용성을 도입할 수 있습니다.

이 교육 세션 내에서:

다양한 조건에서 요소를 디자인하세요
기본 조건 스타일로 되돌리기
조건에서 요소의 스타일 삭제
링크 요소의 현재 상태를 설계합니다.
상속된 스타일의 기원을 이해하다

다양한 조건에서 요소를 디자인하세요

호버 조건과 같이 다양한 조건에서 요소에 다양한 스타일을 구현하려면 스타일 패널 내의 선택기에서 조건 드롭다운 목록을 열고 스타일을 적용할 조건을 선택합니다.

조건 드롭다운 목록에는 none, mouse, pressed, focused 조건이 옵션으로 포함됩니다. 드롭다운 목록은 스타일 패널의 선택기 섹션에서 강조 표시됩니다.

선택기의 조건 드롭다운 목록에서 조건을 선택하면 녹색 상태 클래스(pseudo-class라고도 함)가 선택기 필드의 끝에 표시됩니다. 이는 현재 요소에 대해 해당 조건을 스타일링하고 있다는 표시 역할을 합니다.

버튼 요소가 선택되어 선택기 섹션에 녹색 호버 클래스 상태가 표시됩니다.

여러분은 수많은 스타일링 선택을 할 수 있는 자유가 있습니다. 여러분이 여기에 적용하는 변경 사항은 최종 사용자가 이 요소와 상호 작용할 때 관찰하게 될 것입니다.

현재 조건과 관계없이, 조건을 선택 취소하거나 다른 곳으로 이동할 때까지 구현한 수정 사항은 캔버스에서 눈에 띄게 표시됩니다.

조건 메뉴(드롭다운)

드롭다운 메뉴에서 스타일을 지정할 조건을 선택합니다. 그 후, 스타일 패널에서 조정한 내용은 선택한 조건에 대해 보존됩니다.

기본 조건

기본 조건은 요소의 초기 상태를 나타냅니다. 이는 요소의 고유한 모습입니다.

다른 조건을 사용자 지정한 후 조건 드롭다운 메뉴에서 "없음"을 선택하여 기본 조건의 스타일을 되돌릴 수 있습니다.

호버 조건

마우스 포인터가 요소 위로 호버링될 때 호버 조건이 분명해집니다. 호버링은 대부분의 터치 지원 기기에서 실행 가능하지 않을 수 있으므로 더 작은 뷰포트를 위한 디자인을 제작할 때 이 점을 염두에 두십시오.

활성화된 조건

활성화된 상태는 요소를 클릭하거나 탭할 때 나타나는 것입니다. 이 상태는 활성화가 본질적으로 호버 상태의 확장이기 때문에 호버 조건의 스타일을 상속합니다.

집중된 조건

키보드를 사용하여 탐색하면 버튼과 링크와 같은 특정 대화형 요소에 집중할 수 있으며, 트리거하지 않아도 됩니다. 마우스나 포인터를 사용하여 대화형 요소를 클릭하거나 참여하면 초점과 활성화가 모두 달성됩니다. 이 조건은 대화형 요소가 키보드, 마우스 또는 터치 상호 작용을 통해 초점이 맞춰지는 경우를 시뮬레이션합니다.

포커스(키보드) 조건

초점 조건과 유사하게, 이 상태는 활성화(예: 키보드 탐색)를 필요로 하지 않고 대화형 요소의 초점을 에뮬레이트합니다. 일반적으로 초점이 맞춰졌을 때 텍스트 입력 필드에 적용되며 초점 방법(예: 마우스, 키보드 등)과 무관합니다.

키보드 기반 탐색에 의존하는 방문자를 위한 웹사이트 접근성을 향상시키려면 대화형 요소가 페이지에서 쉽게 식별될 수 있도록 이 조건을 스타일링하는 것이 중요합니다. 요소의 레이아웃에 영향을 미치지 않으므로 대화형 요소에 개요를 추가하는 것이 좋습니다.

방문한 상태

방문한 조건은 이전에 본 링크의 상태를 나타냅니다. 이 상태는 기본 "없음" 조건의 스타일을 상속합니다.

방문한 조건에 대해 텍스트 색상, 배경 색상, 테두리 색상을 수정할 수 있습니다. 배경 색상은 다른 조건에서 다르게 설정된 경우에만 표시됩니다.

플레이스홀더

이 조건은 양식 필드의 조건 드롭다운 목록에서 사용할 수 있습니다. 이를 통해 기본 조건의 인쇄 스타일을 상속하는 입력된 텍스트와 별도로 플레이스홀더 텍스트의 스타일을 지정할 수 있습니다.

플레이스홀더 텍스트와 관련하여 타이포그래피, 배경 및 그림자를 사용자 정의할 수 있습니다.

왼쪽의 1단계에서 양식의 입력 필드를 선택합니다. 오른쪽의 2단계에서 드롭다운 상태 메뉴에서 플레이스홀더 상태를 선택합니다. — 양식에서 입력 필드를 선택하고 선택기에서 조건 드롭다운 메뉴를 열어 자리 표시자의 스타일을 지정합니다.

확인된 상태

이 조건은 폼 checkboxes 및 Element 설정에서 사용자 지정 스타일이 활성화된 라디오 버튼의 조건 드롭다운 목록에서 액세스할 수 있습니다. 이를 통해 checkbox 또는 라디오 버튼의 체크된 상태를 스타일 지정할 수 있습니다.

기본 조건 스타일로 되돌리기

조건에 대한 스타일 수정을 완료한 후 다음 작업 중 하나를 실행하여 기본 "없음" 조건으로 되돌릴 수 있습니다.

조건 드롭다운 메뉴에서 "없음"을 선택하세요
키보드에서 ESC를 누르세요(현재 요소의 선택도 해제됩니다)
다른 요소를 선택하세요

조건에서 요소의 스타일 삭제

조건에서 사용자 지정 스타일이나 모든 스타일을 제거하려면:

요소를 클릭하세요.
조건 드롭다운 메뉴에서 조건을 선택하세요
기존 스타일을 삭제합니다(파란색)

링크 요소와 탭의 현재 상태를 디자인합니다.

링크 요소는 현재 상태도 가지고 있습니다. 사용자 지정 스타일이 현재 상태에 적용되면 사용자가 해당 상태에 있을 때 링크 요소의 모양이 반영됩니다.

현재 상태(선택기의 녹색 태그)

현재 조건은 해당 요소가 현재 페이지, 섹션 또는 탭과 연관되어 있는 경우 모든 링크 태그 또는 선택한 링크 요소의 클래스에 자동으로 할당됩니다.

현재 조건은 기본 "없음" 조건의 모든 스타일을 상속합니다.

링크의 현재 상태 선택

모든 링크 블록, 텍스트 링크, 버튼, 탐색 링크의 현재 상태에 접근하려면:

링크 요소를 선택하고 D를 눌러 링크 설정을 엽니다.
페이지 옵션을 선택하고 드롭다운에서 현재 페이지를 선택합니다(링크가 홈페이지에 있는 경우 홈페이지를 선택합니다)
S를 눌러 스타일 패널로 이동합니다. 링크에 클래스를 적용한 경우 선택기 필드에서 녹색 현재 조건이 활성화된 것을 볼 수 있습니다. 그렇지 않은 경우 선택기를 클릭하고 열리는 드롭다운에서 "모든 링크" 태그를 선택합니다. 현재 조건도 태그에 적용됩니다.

첫 번째 단계는 왼쪽에서 링크 요소를 선택하는 것입니다. 두 번째 단계는 오른쪽의 링크 설정 드롭다운 메뉴에서 홈페이지를 선택하여 요소를 홈페이지에 링크하는 것입니다.

세 번째 단계는 링크 요소가 선택된 상태에서 왼쪽의 드롭다운 메뉴에서 모든 링크 태그를 선택하는 것입니다. 네 번째 단계는 오른쪽의 모든 링크 태그에 녹색 "현재" 상태가 추가된 것을 확인하는 것입니다.

무엇을 찾고 계신가요?

정황