요소 상태 (데스크탑, 호버...)

슬리드는 그래픽 디자인 도구만큼이나 쉽지만, 요소 상태는 반응형 웹 디자인과 인터랙티브 애니메이션을 구현하는 기능입니다. 요소 상태를 사용하여 아름다운 포스터를 만들고, 이를 실제 웹페이지로 변환할 수 있습니다.

버튼을 클릭하면 이 스타일 속성에 허용되는 요소 상태를 확인할 수 있습니다.

기본

이 스타일 속성의 기본 상태입니다.

데스크탑

데스크탑 상태는 데스크탑 화면을 특별히 타겟팅하도록 정의됩니다. 이를 통해 더 큰 디스플레이에 맞춰 디자인을 조정하여 데스크탑 장치에서 최적의 레이아웃과 기능을 보장할 수 있습니다.

스타일 속성에 데스크탑 상태를 추가하면 기본 상태는 모바일 화면에 적용되고, 데스크탑 상태는 데스크탑 화면에 적용됩니다. 보통 데스크탑 상태에서는 큰 글꼴 크기와 간격을 설정합니다.

호버

호버 상태는 사용자가 요소 위로 커서를 이동할 때 트리거됩니다. 버튼이나 링크를 강조하여 상호작용성을 나타내는 데 유용합니다.

보통 호버 상태에서는 색상, 크기 조정, 회전을 설정할 수 있습니다.

눌림

눌림 상태는 요소가 클릭되거나 탭될 때 활성화됩니다. 버튼이나 링크가 눌렸음을 나타내는 시각적 피드백 효과를 만드는 데 사용할 수 있습니다.

선택됨

선택됨 상태는 현재 URL과 일치할 때 버튼이나 링크에 적용됩니다. 이는 종종 내비게이션 메뉴에서 활성 페이지를 강조하는 데 사용됩니다.

포커스

포커스 상태는 입력란과 텍스트 영역이 선택될 때, 주로 키보드 탐색을 통해 사용됩니다. 이는 사용자가 어떤 입력 필드가 활성화되어 있는지를 식별하는 데 도움을 줍니다.

플레이스홀더

플레이스홀더 상태는 입력란과 텍스트 영역 내의 플레이스홀더 텍스트를 스타일링합니다. 이는 디자인 미학에 맞게 사용자 정의할 수 있습니다.