CSS 의사 클래스 및 요소와 해당 사용 사례에 대한 모든 것

CSS에서 Pseduo 클래스 및 요소는 요소의 상태나 특정 부분에 따라 스타일과 요소를 지정할 수 있는 선택기에 추가된 키워드입니다.

예: 앵커 요소 위로 마우스를 가져가거나 다른 스타일을 추가하여 링크 방문 여부를 확인하거나 기사에서 단어의 첫 글자를 타겟팅하는 데 사용할 수 있습니다. 그리고 이 키워드를 사용하면 더 많은 것을 얻을 수 있습니다.

주요 브라우저에서 널리 지원되며 초기 버전부터 CSS의 일부였습니다.

의사 클래스란 무엇입니까?

의사 클래스는 특정 조건이나 상태에 따라 요소에 적용되는 규칙을 만드는 것과 같습니다.

유사 클래스는 사용자가 요소와 상호작용하는 방식으로 인해 요소의 상태가 변경될 때 사용됩니다. 예:

• 누군가 버튼 위로 마우스를 가져갈 때(:hover)
• 입력을 위해 양식 필드를 선택한 경우(:focus)
• 요소가 목록의 첫 번째 또는 마지막 하위인 경우

예를 들어 이해해 보겠습니다.

a:hover {
  color: blue; 
}

a:visited {
  color: navyblue;
}

이 예는 앵커 요소의 두 가지 다른 상태를 보여줍니다. 사용자가 앵커 요소 위로 마우스를 가져가면 텍스트 색상이 파란색으로 변경되지만 사용자가 이미 해당 앵커 요소를 클릭하여 방문한 경우에는 다른 기본 색상이 표시됩니다.

의사 클래스는 키워드 이름 시작 부분에 단일 콜론으로 표시할 수 있습니다. 다음은 몇 가지 일반적인 의사 클래스 목록입니다.

• hover – 사용자가 마우스를 오버할 때(요소 위에 마우스를 놓는 경우)
• :focus – 사용자가 필드를 선택할 때(예: 양식의 텍스트 상자)
• :nth-child(n) – 목록이나 그리드에서 특정 항목의 스타일을 지정하려는 경우
• :disabled – 버튼과 같은 요소가 비활성화되어 클릭할 수 없는 경우.

의사 요소란 무엇입니까?

의사 요소는 전체가 아닌 요소의 특정 부분을 대상으로 한다는 점에서 의사 클래스와 다릅니다. 일반적으로 직접 액세스할 수 없는 요소의 특정 부분에 스타일을 지정하거나 항목을 삽입할 수 있습니다.

의사 요소의 예:

p::first-letter {      /* Accessing the first-letter of paragraph and adding style. */
  font-size: 2em; 
  font-weight: bold; 
  color: red;
}

이 예에서는 CSS를 사용하여 단락의 첫 글자에 액세스하고 스타일을 적용하는 방법을 보여줍니다.

의사 요소에는 이중 :: 콜론 기호를 사용하는 반면, 의사 클래스에는 : 콜론 기호를 사용한다는 점을 눈치채셨을 것입니다. 이는 두 가지 구문의 실제 표현입니다.

왜 의사 클래스와 의사 요소를 사용해야 할까요?

이러한 도구를 사용하면 추가 HTML이나 JavaScript를 작성할 필요 없이 CSS에서 몇 가지 멋진 작업을 수행할 수 있습니다. 단 몇 줄의 CSS만으로 디자인을 더 효과적으로 제어하고 웹사이트를 더욱 상호 작용적이고 역동적으로 만들 수 있습니다.

둘을 구별하고 올바른 도구를 선택하는 데 도움이 되는 방법은 다음과 같습니다.

• 의사 클래스는 호버 효과, 집중된 입력 필드 또는 목록 위치에 따른 스타일 지정과 같은 상호 작용을 생성하는 데 도움이 됩니다.
• 의사 요소를 사용하면 요소의 특정 부분에 스타일을 지정하거나 요소 앞이나 뒤에 아이콘, 기호와 같은 장식 콘텐츠를 추가할 수 있습니다.

브라우저 지원

의사 요소 및 의사 클래스는 모든 주요 브라우저에서 지원되지만 웹이 성장함에 따라 기본 지원을 제공하지 않는 새로운 키워드가 추가되었습니다. 따라서 이러한 문제를 해결하려면 브라우저 접두사를 사용해야 합니다.

예를 들어 :not()과 같은 최신 의사 클래스는 이전 브라우저에서 지원되지 않으므로 다르게 동작합니다. 온라인 도구 Caniuse.com을 사용하여 어떤 브라우저 버전에서 어떤 속성이 지원되는지 항상 확인해야 합니다

결론

CSS 의사 클래스 및 의사 요소는 추가 코드를 추가하지 않고도 생생하고 아름답게 느껴지는 웹사이트를 디자인하기 위한 비밀 무기 역할을 합니다. 상호 작용이나 상태(의사 클래스)를 기반으로 요소의 스타일을 지정하거나 요소의 특정 부분(의사 요소)을 대상으로 지정하는 데 도움이 됩니다.

이 블로그는 원래 Programly.dev 웹사이트에 게시되었습니다. 이 링크를 클릭하여 전체 기사를 읽어보세요

위 내용은 CSS 의사 클래스 및 요소와 해당 사용 사례에 대한 모든 것의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!