이 문서에서는 Tailwind의 위치 속성과 함께 마우스 오버, 포커스 및 기타 상태를 사용하는 방법을 보여줍니다.
Tailwind에서 위치 속성과 함께 호버, 포커스 및 기타 상태를 사용하는 방법은 무엇입니까?
Tailwind의 마우스 오버, 포커스 및 기타 상태는 매력적이고 사용자 친화적인 인터페이스와 사용자에게 매력적인 경험을 제공하는 Tailwind의 요소 스타일을 지정하는 데 사용됩니다. 경우에 따라 경험을 최고 수준으로 유지하기 위해 위치 속성이 적용됩니다.
방법 1: 위치 속성과 함께 Hover 변형 사용
hover 변형은 사용자가 선택한 요소 위로 커서를 이동할 때 선택한 요소의 스타일을 지정하는 데 사용됩니다. “ 위치 ” 속성은 “와 함께 사용할 수 있습니다. 호버링 ” 호버 전후의 위치를 설정합니다. 이 쌍은 사용자에게 매력적인 경험을 제공하는 데 사용됩니다.
1단계: HTML에 위치가 포함된 Hover 속성 추가
아래 코드에서는 hover 속성이 '의 위치 속성을 따라 적용됩니다. 단추 ' 요소:
< 몸 >
< 단추 수업 = '상대 w-40 h-12 bg-blue-500 hover:절대 hover:translate-x-4 hover:translate-y-4' >
< 피 수업 = '텍스트-흰색 텍스트-가운데' > 나를 호버 < / 피 >
< / 단추 >
< / 몸 >
이 코드에서는:
- “ 상대적인 ” 클래스는 상위 페이지를 기준으로 버튼을 설정합니다.
- “ w-40 ” 너비를 40px로 설정합니다.
- “ h-12 ” 높이를 12px로 설정합니다.
- “ bg-blue-500 ” 배경색을 파란색으로 설정합니다.
- “ 호버: 절대 ” 마우스 커서가 버튼 위로 움직일 때 버튼의 상대 위치를 절대 위치로 변경합니다.
- “ hover: 번역-x-4 '는 버튼을 x축에서 오른쪽으로 4px 이동하고 동시에 '만큼 아래로 4px 이동합니다. hover: 번역-y-4 '.
- 텍스트는 '를 기준으로 가운데 정렬됩니다. 텍스트 센터 '.
2단계: 확인
위 코드로 생성된 웹페이지를 미리 보면 다음과 같습니다.
출력에는 요소가 오른쪽 및 아래쪽 방향으로 4px만큼 이동되었음을 보여줍니다.
방법 2: 위치 속성과 함께 포커스 변형 사용
focus 변형은 사용자의 주의를 끌고 일부 요소를 강조하기 위해 HTML 요소의 스타일을 지정하는 데 사용됩니다. 위치는 상위 페이지에 상대적이거나 절대적인 개체 위치를 지정하기 위해 함께 적용될 수도 있습니다. 이는 사용자의 참여를 유지하기 위해 수행됩니다.
1단계: HTML에서 위치가 포함된 Focus 속성 추가
HTML 파일을 생성하고 적절한 위치에 focus 속성을 적용합니다. 예를 들어, 아래 코드에서는 상대 위치가 입력 상자에 적용됩니다.
< / 몸 >
이 코드에서는:
- '의 위치를 설정합니다. 입력 ” 요소를 “로 상대적인 '.
- “ 초점: 번역-x-4 '는 버튼을 x축에서 오른쪽으로 4px 이동하고 동시에 '만큼 아래로 4px 이동합니다. 초점: 번역-y-4 ” 사용자가 입력 상자를 클릭할 때 발생합니다.
- “ 포커스: 개요-2 ”는 사용자가 클릭하면 텍스트 상자 주위에 윤곽선을 만듭니다.
2단계: 출력 확인
코드로 생성된 웹페이지를 미리 보고 변경 사항을 확인하세요.
위 출력은 포커스가 맞춰졌을 때 선택한 요소에 스타일이 적용되었음을 보여줍니다.
위치 속성과 함께 활성 변형 사용.
활성 변형은 사용자가 버튼이나 다른 요소를 길게 클릭할 때의 상태를 정의하기 위해 HTML 요소의 스타일을 지정하는 데 사용됩니다. 위치 속성은 보다 역동적인 경험을 생성하는 사용자에게 더욱 매력적인 출력을 제공할 수 있습니다.
1단계: HTML에 위치가 포함된 Hover 속성 추가
HTML 파일을 생성하고 위치 속성과 함께 활성 변형을 적용합니다. 예를 들어, 이러한 속성은 아래 코드 예제의 버튼에 적용됩니다.
< 단추 수업 = '상대 w-48 h-12 bg-blue-500 활성:translate-y-2 활성:bg-green-400' >
< 기간 수업 = '텍스트-흰색' >나를 클릭하세요< / 기간 >
< / 단추 >
< / 몸 >
위 코드에서:
- '의 위치를 설정합니다. 단추 ” 요소를 “로 상대적인 '.
- “ bg-blue-500 ” 버튼의 배경색을 파란색으로 설정합니다.
- “ 활성: 번역-y-2 '는 버튼을 2px 아래로 이동시키고 '에 의해 버튼 색상을 녹색으로 변경합니다. 활성: bg-green-400 '.
2단계: 출력 확인
위 코드로 생성된 웹페이지를 미리 보고 버튼을 길게 클릭하여 변경 사항을 확인하세요.
위의 gif는 선택한 버튼 요소가 활성화되면 스타일이 변경되는 것을 보여줍니다.
Tailwind에서 위치 속성을 사용하여 호버, 포커스 및 기타 상태를 적용하는 것이 전부입니다.
결론
호버, 포커스 및 기타 상태는 미리 정의된 호버, 포커스 및 기타 상태 클래스를 사용한 다음 '와 같은 위치 클래스 속성을 적용하여 위치 속성과 함께 사용할 수 있습니다. 순수한 ', ' 상대적인 ' 등이 결합되어 있습니다. 이 블로그에서는 Tailwind의 위치 유틸리티와 함께 호버, 포커스 및 기타 상태를 사용하는 방법을 보여주었습니다.