정보실

웹학교

정보실

css CSS 기초 : :hover 및 :active 의사 클래스 사용

본문

CSS는 다양한 요소 상태를 구별하는 데 도움이 되는 스타일 요소에 대한 여러 의사 클래스를 제공합니다. 여기에서는 :hover 및 :active에 중점을 두어 사용자의 시각적 피드백을 개선하고 UI가 기기에서 멋지게 보이도록 하는 방법을 확인합니다! 🔥


https://alligator.io/css/hover-active-pseudo-classes/ 


"Pseudo-Class"이란 무엇입니까? 


의사 클래스는 요소, 클래스 또는 ID에 관계없이 일반 CSS 선택기와 함께 사용해야 합니다. 의사 클래스는 일반적으로 요소와의 사용자 상호 작용을 기반으로 합니다. 상태에 따라 요소의 스타일을 변경할 수 있는 옵션을 제공합니다. ✨


버튼처럼 요소 위로 마우스를 가져 가면 CSS에서 요소 상태를 변경하는 한 예입니다. "호버"상태는 기본 호버링 되지 않은 상태와 다르게 스타일을 지정할 수 있습니다.


마찬가지로 링크를 클릭하면 CSS에서 링크 상태가 업데이트 되고 "활성화"됩니다.


사용자에게 시각적 피드백 제공 


의사 클래스를 사용하면 사용자에게 즉각적인 시각적 피드백을 제공 할 수 있습니다. 직관적 인 UI (사용자 인터페이스)는 텍스트 클릭 여부와 같이 UI와 상호 작용하는 방법을 사용자에게 알려줍니다. 예를 들어, 호버에서 탐색 막대 항목의 스타일을 업데이트하면 사용자가 마우스가 클릭 가능한 영역에 있음을 알 수 있습니다.이 경우 실제 텍스트를 지나 확장 될 수 있습니다.


그러나 페이지의 모든 항목에 호버 스타일이 있으면 시각적으로 매우 압도적입니다. 또한 페이지와 상호 작용하는 방법에 대해 사용자에게 알리지 않습니다. 따라서 의사 클래스 스타일이 사용자에게 무엇을 말해야 하는지 스스로에게 물어 보는 것이 가장 좋습니다.


CSS에서 의사 클래스를 사용하면 시각적 피드백을 제공하여 UI와 상호 작용하는 방법을 이해할 수 있습니다. 


:hover 의사 클래스 


:hover 의사 클래스는 CSS에서 가장 많이 사용되는 클래스 중 하나 입니다. 먼저 사용 방법에 대한 몇 가지 예를 살펴 보겠습니다.


기준으로 모든 <a> 태그의 스타일을 녹색으로 지정합니다.

a { color: green; } 


호버에서 색상을 변경하려면 <a> 태그를 다시 선택하고 : hover pseudo-class를 추가하는 두 번째 스타일을 선언하십시오.

a { color: green; } a:hover { color: yellow; } 


비록 위의 예와 같이 : hover가 링크에 일반적으로 사용 되더라도 선택기에서 사용할 수 있습니다. 다음은 <p> 태그, 클래스, ID 및 이들의 조합을 사용하는 몇 가지 예입니다.


p:hover { background-color: green; } .gator:hover { font-weight: bold; } #cayman:hover { font-size: 2rem; } input.gator[type="text"]:hover { border: 1px solid yellow; } input.gator[type="text"]:hover span { border: 2px solid black; } 


의사 클래스는 선택기의 끝에 옵니다. 마우스로 가리키고 있는 요소에 추가해야 하며, 이는 보다 구체적인 선택기의 부모 일 수 있습니다.


: hover 의사 클래스를 사용하면 CSS가 모든 작업을 수행한다는 이점이 있습니다. 죄송하지만 JavaScript는 여기에 'if'문이나 상태 관리가 필요하지 않습니다! 💪


다른 장치에서 :hover 사용 


반응 형 페이지를 스타일링 할 때 이러한 스타일이 다양한 장치에 적용되는 방식을 고려해야 합니다. 사용자는 예를 들어 컴퓨터 나 전화에서 웹 페이지를 보고 터치 스크린, 마우스 또는 키보드 등을 사용하여 UI 상호 작용을 트리거 할 수 있습니다.


마우스 : 마우스를 사용하고 스타일이 지정된 요소 위로 포인터를 가져 가면 : hover 스타일이 표시됩니다.

키보드 : 페이지를 통해 키보드로 탐색해도 포인터 이벤트가 없기 때문에 : 호버 스타일이 트리거 되지 않습니다.

전화 / 터치 스크린 : : hover 및 : focus 의사 클래스는 종종 혼란스러워 지므로 호버에 대한 포인터가 없어도 "클릭"/ 터치시 호버가 트리거 됩니다.


:active 의사 클래스 


:hover pseudo-class와 마찬가지로 :active는 일반 CSS 선택기와 함께 사용해야 합니다.


:active는“활성화 된”상태에서 요소를 선택하는 데 사용할 수 있습니다. 가장 일반적으로 링크에 사용되며 링크를 선택하거나 클릭 할 때를 나타냅니다. 활성 스타일을 보려면 아래 링크를 클릭하십시오.


유효한 CSS 셀렉터에 :active 의사 클래스를 추가하면 됩니다.


a { color: green; } a:hover { color: yellow; } a:active { color: purple; } 


다른 장치에서 :active 사용 


:active는 요소를 선택하는 과정을 나타내므로 여러 장치에서 상당히 유사하게 작동합니다.


  • 마우스 / 터치 스크린 : 마우스 또는 터치 스크린을 사용하면 요소를 선택할 때 (선택을 해제하기 전에) 활성 스타일이 표시됩니다.
  • 키보드 : 키보드를 사용할 때 Enter 키로 요소를 선택하면 키 다운시 제출되므로 활성 스타일이 표시되지 않습니다. 그러나 스페이스 바를 사용하여 요소 (예 : 단추)를 선택하면 요소를 놓을 때까지 활성 스타일이 표시되어야 합니다.

의사 클래스의 순서가 중요합니까? 


의사 클래스의 경우 순서가 중요합니다. : 호버 스타일은 : active 스타일보다 우선하므로 : active 스타일보다 먼저 선언해야 합니다.


위의 예제에서 의사 클래스 선언 순서를 사용하여 기본, 호버링 및 활성 상태에 대한 스타일 지정을 얻습니다.


그러나 :hover 및 :active 스타일링 선언을 반대로 바꾸면 : hover 스타일링이 불행히도 : active 스타일링을 재정의 합니다.

a { color: green; } a:active { color: purple; } a:hover { color: yellow; } 


잘못된 순서 🙈 


이제 링크를 클릭하면 활성 상태 색상을 선언했지만 더 이상 자주색으로 바뀌지 않습니다.


호버 스타일 뒤에 항상 활성 스타일을 배치하여 올바르게 표시 되도록 하십시오. 🌈


요약 


:hover 및 :active로 요소 상태를 스타일링 할 때 다음을 기억하십시오.


이 유사 클래스를 사용하여 요소에 대한 정보를 전달하십시오 (예 : 클릭 가능)

CSS 선택기의 끝에 의사 클래스를 넣으십시오.

의사 클래스가 다른 장치에 표시되는 방식에 유의하십시오.

CSS 선언에서 :active 다음에 오는 것을 확인하십시오.



페이지 정보

조회 65회 ]  작성일19-08-23 11:56

웹학교