이 블로그에서는 다음 콘텐츠 영역을 다룹니다.
- Tailwind Hover, Focus 및 활성 상태로 텍스트 장식을 적용하는 방법은 무엇입니까?
- 'hover' 상태로 텍스트 장식을 적용합니다.
- '포커스' 상태로 텍스트 장식 적용
- '활성' 상태로 텍스트 장식을 적용합니다.
Tailwind Hover, Focus 및 활성 상태로 텍스트 장식을 적용하는 방법은 무엇입니까?
텍스트는 '를 통해 꾸밀 수 있습니다. 텍스트 장식 ' 재산. 이 속성은 '와 같은 다양한 수정자 상태와 함께 적용될 수 있습니다. 호버링 ', ' 집중하다 ' 그리고 ' 활동적인 ”를 사용하여 사용자 작업에 따라 텍스트를 장식합니다.
예시 1: 'hover' 상태로 텍스트 장식 적용
이 예에서는 “ 텍스트 장식 ” 속성을 사용하여 기본적으로 밑줄이 표시되지 않지만 마우스를 올리면 밑줄이 표시됩니다.
< HTML >
< 머리 >
< 메타 문자셋 = 'utf-8' >
< 메타 이름 = '뷰포트' 콘텐츠 = '너비=장치 너비, 초기 크기=1' >
< 스크립트 소스 = 'https://cdn.tailwindcss.com' >< / 스크립트 >< / 머리 >
< 몸 >
< 텍스트 영역 수업 = '밑줄 없음 마우스오버:밑줄' > 테일윈드 CSS 입니다 < / 텍스트 영역 >
< / 몸 >
< / HTML >
이 코드 줄에 따라 '' 안에 CDN 경로를 지정합니다. <머리> ' 태그를 사용하여 Tailwind 기능을 활용하세요. 이제 결합된 “ 텍스트 장식 ” 속성과 “ 호버링 ” 요소에 마우스를 올리면 밑줄이 그어지도록 명시합니다.
산출
본 바와 같이, “ <텍스트 영역> ” 요소에는 마우스를 성공적으로 올리면 밑줄이 그어집니다.
예 2: '포커스' 상태로 텍스트 장식 적용
다음 코드 블록은 '를 포함하여 텍스트를 장식합니다. 집중하다 ' 상태. 이는 ' 탭 ' 열쇠:
< HTML >
< 머리 >
< 메타 문자셋 = 'utf-8' >
< 메타 이름 = '뷰포트' 콘텐츠 = '너비=장치 너비, 초기 크기=1' >
< 스크립트 소스 = 'https://cdn.tailwindcss.com' >< / 스크립트 >< / 머리 >
< 몸 >
< 텍스트 영역 수업 = '밑줄 없음 포커스:밑줄' >테일윈드 CSS입니다< / 텍스트 영역 >
< / 몸 >
< / HTML >
이 코드에 따르면:
- 마찬가지로 CDN 경로를 포함하고 ' <텍스트 영역> ' 요소.
- 그 후 “ 텍스트 장식 ” 기본적으로 텍스트에 밑줄이 표시되지 않도록 하는 속성입니다.
- 관련된 ' 집중하다 ” 상태는 요소에 초점이 맞춰지면 텍스트에 밑줄을 긋습니다.
산출
이 결과는 '를 누르면 요소에 포함된 텍스트에 밑줄이 그어짐을 의미합니다. 탭 ” 핵심, 즉 요소에 초점을 맞추는 것입니다.
예시 3: '활성' 상태로 텍스트 장식 적용
이 예에서 텍스트는 ' 라인스루 ” 속성은 요소가 활성화될 때 적용됩니다.
< HTML >
< 머리 >
< 메타 문자셋 = 'utf-8' >
< 메타 이름 = '뷰포트' 콘텐츠 = '너비=장치 너비, 초기 크기=1' >
< 스크립트 소스 = 'https://cdn.tailwindcss.com' >< / 스크립트 >< / 머리 >
< 몸 >
< 텍스트 영역 수업 = '밑줄 없음 활성:줄 통과' >테일윈드 CSS입니다< / 텍스트 영역 >
< / 몸 >
< / HTML >
이 코드 조각에서 아래 제공된 단계를 적용하세요.
- CDN 경로와 ' <텍스트 영역> ' 요소.
- 이제 텍스트 장식을 적용해 보세요. 밑줄 없음 ” 속성을 기본적으로 할당하고 “ 활동적인 ” 상태는 “ 라인스루 '.
- 결과적으로 요소가 활성화될 때 포함된 텍스트를 따라 정렬됩니다.
산출
이 출력을 통해 적용된 상태에 맞게 텍스트가 적절하게 장식되어 있음을 확인할 수 있다.
결론
텍스트는 '를 통해 꾸밀 수 있습니다. 텍스트 장식 ' 재산. 이 속성은 ' 호버링 ', ' 집중하다 ' 그리고 ' 활동적인 ” 수정자 상태는 마우스 오버 시 텍스트, 초점이 맞춰진 요소, 활성화된 요소를 각각 장식합니다.