CSS는 프로그래머가 동적 웹 페이지를 디자인할 수 있는 다양한 프레임워크를 제공합니다. 모든 중요한 기능과 도구를 한 곳에서 제공하기 때문에 더 선호됩니다. 따라서 다른 프레임워크를 사용할 필요가 없습니다. CSS의 Tailwind 프레임워크는 사용자가 과도한 CSS를 작성하는 데 드는 시간을 절약해주기 때문에 가장 널리 사용됩니다.
이 가이드에서는 Tailwind의 마우스 오버, 포커스 및 기타 상태 사용법을 제공합니다.
Tailwind에서 호버, 포커스 및 기타 상태를 사용하는 방법은 무엇입니까?
웹페이지를 디자인할 때 사용자와의 상호작용을 유지하기 위해서는 역동적이고 매력적인 요소를 추가하는 것이 필요합니다. Tailwind의 기능을 활용하면 추가 맞춤 CSS를 작성하지 않고도 대화형의 동적 페이지를 만들 수 있습니다. 일부 기능에는 디자인에 매력을 더하는 데 도움이 되는 '호버', '초점' 및 '활성'이 있습니다.
HTML에서 Hover 변형 사용
hover 속성은 사용자가 특정 요소 위로 마우스 커서를 이동할 때 HTML 요소의 스타일을 지정하는 데 사용됩니다. 원활한 경험을 제공하는 데 도움이 됩니다.
1단계: HTML에 'hover' 속성 적용
HTML 파일을 만들고 코드의 일부 요소에 hover 속성을 적용합니다. 아이디어를 얻으려면 아래 코드를 살펴보십시오.
< 몸 >
< div 수업 = '센터' >
< 단추 수업 = 'bg-green-500 hover:bg-blue-500 텍스트-흰색 글꼴-굵게 반올림' >
나를 호버!
< / 단추 >
< / div >
< / 몸 >
이 코드에서는:
- '라는 이름의 버튼 나를 호버! '는 버튼 태그에 의해 생성됩니다.
- “ bg-녹색-500 ” 버튼의 배경색을 녹색으로 설정합니다.
- “ hover: bg-blue-500 ” 마우스를 버튼 위로 가져가면 버튼 색상이 녹색에서 파란색으로 변경됩니다.
- 버튼의 텍스트는 흰색입니다. 텍스트 흰색 ' 그리고 ' 굵은 글꼴 ” 글꼴을 굵게 만듭니다.
- 버튼의 모양은 “ 둥근 '.
2단계: 출력 미리보기
위 코드를 실행한 후의 최종 뷰는 다음과 같습니다.
마우스 커서를 버튼 위로 가져가면 버튼의 색상이 변하는 것을 볼 수 있습니다.
HTML에서 포커스 변형 사용
focus 속성은 사용자가 요소를 클릭하면 사용자의 주의를 끌기 위해 강조 표시되도록 HTML 요소의 스타일을 지정하는 데 사용됩니다.
1단계: HTML 코드에 Focus 속성 적용
HTML 파일을 만들고 원하는 요소에 focus 속성을 적용합니다. 인상을 얻으려면 아래 코드를 고려하십시오.
< div >
< / div >
< / 몸 >
이 코드에서는:
- “ 몸을 풀다 ” 클래스는 플렉스를 생성합니다.
- “ 정당화 센터 ”는 콘텐츠 정렬을 중앙에 맞춰줍니다.
- “ 품목 중심 ” 클래스는 객체를 화면 중앙으로 조정합니다.
- “ h-스크린 ”는 뷰포트에 따라 화면 크기를 설정합니다.
- “ bg-blue-200 ” 배경색을 파란색으로 설정합니다.
- 텍스트 유형의 입력 상자가 생성됩니다.
- “ 초점: bg-green-300 ”는 사용자가 클릭하면 입력 상자 색상이 녹색으로 변경됩니다.
- “ w-64 ” 너비를 64px로 설정합니다.
- “ h-10 ” 높이를 10px로 설정합니다.
- “ px-4 ” 위쪽과 왼쪽에 4px의 패딩을 추가합니다.
- “ py-2 ” 상단과 하단에 2px의 패딩을 추가합니다.
2단계: Focus 속성 미리보기
HTML 코드를 저장하고 해당 코드로 생성된 웹페이지를 엽니다. 그런 다음 입력 상자에 커서를 놓고 클릭하면 아래와 같이 변경됩니다.
HTML에서 활성 변형 사용
이 속성은 사용자가 요소를 동적으로 탭할 때 조건에 대한 요소의 스타일을 지정하는 데 사용됩니다. 활성 상태는 커서의 활성화 단계부터 해제된 상태까지의 기간입니다.
통사론
활동적인: { 재산 }특정 CSS 속성이 선택한 요소에 적용됩니다.
1단계: HTML 코드에 활성 변형 적용
HTML 파일을 생성하고 아래의 경우 버튼인 일부 요소에 활성 속성을 적용합니다.
< div 수업 = 'flex justify-center items-center h-screen' >
< 단추 수업 = 'bg-green-600 p-4 반올림-md 전환-변환 기간-400 변환 활성:scale-110' >
클릭 해주세요!
< / 단추 >
< / div >
< / 몸 >
이 코드에서는:
- “ bg-녹색-600 ” 배경색을 녹색으로 설정합니다.
- “ p-4 ” 4px의 패딩을 추가합니다.
- “ 반올림-MD ” 버튼 모양을 둥글게 만듭니다.
- “ 전환-변환 '는 '에 의해 설정된 짧은 시간 동안 버튼을 변환하는 데 사용됩니다. 기간-400 변환 '.
- “ 활성:스케일-110 ” 버튼을 더 큰 크기로 변환합니다.
2단계: 출력 미리보기
위 코드를 HTML 파일로 저장하고 해당 코드로 생성된 웹페이지를 미리 봅니다. 웹페이지는 다음과 같습니다:
버튼을 마우스로 잡고 있으면 버튼 크기가 커지고, 버튼을 놓으면 바로 초기 상태로 돌아가는 것을 볼 수 있습니다.
결론
Tailwind에서 마우스 오버, 포커스 및 기타 상태를 사용하려면 'hover'와 같은 사전 정의된 상태 클래스를 사용하고 색상 변경, 포커스 링 생성 등과 같은 일부 스타일 속성을 적용하세요. 디스플레이 유틸리티는 확장 가능한 출력을 제공하는 데 사용됩니다. 이 글에서는 Tailwind에서 마우스 오버, 포커스 및 기타 상태를 사용하는 방법을 보여주었습니다.