Share
Sign In
3️⃣

의사 크래스 :hover, :link, :before, : visited, :active etc..

표준 의사 클래스
출처 : MDN 의사 클래스
기억해두어야할 의사 클래스
:hover
CSS 의사 클래스는 사용자가 포인팅 장치를 사용해 상호작용 중인 요소를 선택합니다. 보통 사용자의 커서(마우스 포인터)가 요소 위에 올라가 있으면 선택됩니다.
:hover 의사 클래스로 정의한 스타일은 자신보다 뒤에 위치하고 동등한 명시성을 가진 다른 링크 의사 클래스(:link, :visited, :active)가 덮어씁니다. 링크를 적절히 디자인하려면 LVHA-순서(:link — :visited — :hover — :active)를 따라, :hover 규칙을 :link와 :visited 뒤, :active 앞에 배치하세요.
💡
참고: :hover 의사 클래스는 터치스크린에서 문제가 많습니다. 브라우저에 따라서 :hover를 절대 활성화하지 않을 수도 있지만, 요소를 터치한 직후에만, 아니면 터치한 이후 다른 요소를 다시 터치하기 전까지 계속 활성화할 수도 있습니다. 웹 개발자는 호버링이 제한적이거나 아예 불가능한 장치에서도 콘텐츠에 접근할 수 있도록 개발해야 합니다.
코드 예제
HTML 코드
CSS 코드
:active
:active CSS 의사 클래스는 사용자가 활성화한 요소(버튼 등)를 나타냅니다. 마우스를 사용하는 경우, "활성"이란 보통 마우스 버튼을 누르는 순간부터 떼는 시점까지를 의미합니다.
:active 의사 클래스는 대개 <a>, <button>과 함께 사용합니다. 다른 흔한 대상으로는 활성화된 요소를 포함한 다른 요소와, 연결된 <label>로 선택한 입력 폼 요소 등이 있습니다.
:active 의사 클래스로 정의한 스타일은 자신보다 뒤에 위치하고 동등한 명시성을 가진 다른 링크 의사 클래스(:link, :hover, :visited)가 덮어씁니다. 링크를 적절히 디자인하려면 LVHA-순서(:link — :visited — :hover — :active)를 따라, :active 규칙을 다른 모든 링크 규칙들보다 뒤에 배치하세요.
:focus
CSS :focus 의사 클래스는 양식의 입력 칸 등 포커스를 받은 요소를 나타냅니다. 보통 사용자가 요소를 클릭 또는 탭하거나, 키보드 Tab 키로 선택했을 때 발동합니다.
참고: :focus는 포커스를 받은 요소 자체에만 해당합니다. 자손이 포커스를 받았을 때의 요소를 선택해야 하면 :focus-within을 사용하세요.
:visited
:visited CSS 의사 클래스는 사용자가 방문한 적이 있는 링크를 나타냅니다. :visited가 바꿀 수 있는 스타일은 개인정보 보호를 위해 매우 제한적입니다.
:visited 의사 클래스로 정의한 스타일은 자신보다 뒤에 위치하고 동등한 명시성을 가진 다른 링크 의사 클래스(:link, :hover, :active)가 덮어씁니다. 링크를 적절히 디자인하려면 LVHA-순서(:link — :visited — :hover — :active)를 따라, :visited 규칙을 :link 뒤, :hover와 :active 앞에 배치하세요.
스타일 제한
브라우저는 개인정보 보호를 위해 :visited에서 사용할 수 있는 스타일을 엄격히 제한하고 있습니다.
사용 가능한 SVG 속성은 fill과stroke입니다.
허용 가능한 속성의 알파 채널 값은 무시하고, 대신 :visited가 아닐 때의 알파 채널을 사용합니다. 단, 그 값이 0일 땐 :visited의 스타일을 모두 무시합니다.
사용자 입장에서는 방문한 링크의 색이 바뀐 것처럼 보일 때도, window.getComputedStyle() 메서드는 거짓으로라도 항상 :visited가 아닐 때의 스타일을 반환합니다.
참고: 스타일 제한에 관한 더 많은 정보와 이유에 대해서는 개인정보와 :visited 선택자 문서를 참고하세요.
:link
:link CSS 의사 클래스는 아직 방문하지 않은 요소를 나타냅니다. href 속성을 가진 <a>, <area>, <link> 중 방문하지 않은 모든 요소를 선택합니다.
:link 의사 클래스로 정의한 스타일은 자신보다 뒤에 위치하고 동등한 명시성을 가진 다른 링크 의사 클래스(:active, :hover, :visited)가 덮어씁니다. 링크를 적절히 디자인하려면 LVHA-순서(:link — :visited — :hover — :active)를 따라, :active 규칙을 다른 모든 링크 규칙들보다 앞에 배치하세요.
참고: 방문 여부에 상관하지 않고 요소를 선택하려면 :any-link를 사용하세요.
::before
CSS에서, ::before는 선택한 요소의 첫 자식으로 의사 요소를 하나 생성합니다. 보통 content 속성과 함께 짝지어, 요소에 장식용 콘텐츠를 추가할 때 사용합니다. 기본값은 인라인입니다.
참고: ::before와 ::after로 생성한 의사 요소는 원본 요소의 서식 박스에 포함되므로, <img>나 <br> 등 대체 요소에 적용할 수 없습니다.
참고: 의사 클래스와 의사 요소를 구분하기 위해 CSS3부터::before 구문을 도입했습니다. 그러나 브라우저는 CSS2 구문인 :before도 허용합니다.
::after
CSS에서, ::after는 선택한 요소의 맨 마지막 자식으로 의사 요소를 하나 생성합니다. 보통 content 속성과 함께 짝지어, 요소에 장식용 콘텐츠를 추가할 때 사용합니다. 기본값은 인라인입니다.
참고: ::before와 ::after로 생성한 의사 요소는 원본 요소의 서식 박스에 포함되므로, <img>나 <br> 등 대체 요소에 적용할 수 없습니다.
참고: 의사 클래스와 의사 요소를 구분하기 위해 CSS3부터::afte 구문을 도입했습니다. 그러나 브라우저는 CSS2 구문인 :after도 허용합니다.
브라우저 호환성
출처 : MDN - 브라우저 호환성
CSS3 홈으로 돌아가기
CSS3
메인으로 돌아가기
표준 의사 클래스
출처 : MDN 의사 클래스
기억해두어야할 의사 클래스
:hover
CSS 의사 클래스는 사용자가 포인팅 장치를 사용해 상호작용 중인 요소를 선택합니다. 보통 사용자의 커서(마우스 포인터)가 요소 위에 올라가 있으면 선택됩니다.
:hover 의사 클래스로 정의한 스타일은 자신보다 뒤에 위치하고 동등한 명시성을 가진 다른 링크 의사 클래스(:link, :visited, :active)가 덮어씁니다. 링크를 적절히 디자인하려면 LVHA-순서(:link — :visited — :hover — :active)를 따라, :hover 규칙을 :link와 :visited 뒤, :active 앞에 배치하세요.
💡
참고: :hover 의사 클래스는 터치스크린에서 문제가 많습니다. 브라우저에 따라서 :hover를 절대 활성화하지 않을 수도 있지만, 요소를 터치한 직후에만, 아니면 터치한 이후 다른 요소를 다시 터치하기 전까지 계속 활성화할 수도 있습니다. 웹 개발자는 호버링이 제한적이거나 아예 불가능한 장치에서도 콘텐츠에 접근할 수 있도록 개발해야 합니다.
코드 예제
HTML 코드
CSS 코드
:active
:active CSS 의사 클래스는 사용자가 활성화한 요소(버튼 등)를 나타냅니다. 마우스를 사용하는 경우, "활성"이란 보통 마우스 버튼을 누르는 순간부터 떼는 시점까지를 의미합니다.
:active 의사 클래스는 대개 <a>, <button>과 함께 사용합니다. 다른 흔한 대상으로는 활성화된 요소를 포함한 다른 요소와, 연결된 <label>로 선택한 입력 폼 요소 등이 있습니다.
:active 의사 클래스로 정의한 스타일은 자신보다 뒤에 위치하고 동등한 명시성을 가진 다른 링크 의사 클래스(:link, :hover, :visited)가 덮어씁니다. 링크를 적절히 디자인하려면 LVHA-순서(:link — :visited — :hover — :active)를 따라, :active 규칙을 다른 모든 링크 규칙들보다 뒤에 배치하세요.
:focus
CSS :focus 의사 클래스는 양식의 입력 칸 등 포커스를 받은 요소를 나타냅니다. 보통 사용자가 요소를 클릭 또는 탭하거나, 키보드 Tab 키로 선택했을 때 발동합니다.
참고: :focus는 포커스를 받은 요소 자체에만 해당합니다. 자손이 포커스를 받았을 때의 요소를 선택해야 하면 :focus-within을 사용하세요.
:visited
:visited CSS 의사 클래스는 사용자가 방문한 적이 있는 링크를 나타냅니다. :visited가 바꿀 수 있는 스타일은 개인정보 보호를 위해 매우 제한적입니다.
:visited 의사 클래스로 정의한 스타일은 자신보다 뒤에 위치하고 동등한 명시성을 가진 다른 링크 의사 클래스(:link, :hover, :active)가 덮어씁니다. 링크를 적절히 디자인하려면 LVHA-순서(:link — :visited — :hover — :active)를 따라, :visited 규칙을 :link 뒤, :hover와 :active 앞에 배치하세요.
스타일 제한
브라우저는 개인정보 보호를 위해 :visited에서 사용할 수 있는 스타일을 엄격히 제한하고 있습니다.
사용 가능한 SVG 속성은 fill과stroke입니다.
허용 가능한 속성의 알파 채널 값은 무시하고, 대신 :visited가 아닐 때의 알파 채널을 사용합니다. 단, 그 값이 0일 땐 :visited의 스타일을 모두 무시합니다.
사용자 입장에서는 방문한 링크의 색이 바뀐 것처럼 보일 때도, window.getComputedStyle() 메서드는 거짓으로라도 항상 :visited가 아닐 때의 스타일을 반환합니다.
참고: 스타일 제한에 관한 더 많은 정보와 이유에 대해서는 개인정보와 :visited 선택자 문서를 참고하세요.
:link
:link CSS 의사 클래스는 아직 방문하지 않은 요소를 나타냅니다. href 속성을 가진 <a>, <area>, <link> 중 방문하지 않은 모든 요소를 선택합니다.
:link 의사 클래스로 정의한 스타일은 자신보다 뒤에 위치하고 동등한 명시성을 가진 다른 링크 의사 클래스(:active, :hover, :visited)가 덮어씁니다. 링크를 적절히 디자인하려면 LVHA-순서(:link — :visited — :hover — :active)를 따라, :active 규칙을 다른 모든 링크 규칙들보다 앞에 배치하세요.
참고: 방문 여부에 상관하지 않고 요소를 선택하려면 :any-link를 사용하세요.
::before
CSS에서, ::before는 선택한 요소의 첫 자식으로 의사 요소를 하나 생성합니다. 보통 content 속성과 함께 짝지어, 요소에 장식용 콘텐츠를 추가할 때 사용합니다. 기본값은 인라인입니다.
참고: ::before와 ::after로 생성한 의사 요소는 원본 요소의 서식 박스에 포함되므로, <img>나 <br> 등 대체 요소에 적용할 수 없습니다.
참고: 의사 클래스와 의사 요소를 구분하기 위해 CSS3부터::before 구문을 도입했습니다. 그러나 브라우저는 CSS2 구문인 :before도 허용합니다.
::after
CSS에서, ::after는 선택한 요소의 맨 마지막 자식으로 의사 요소를 하나 생성합니다. 보통 content 속성과 함께 짝지어, 요소에 장식용 콘텐츠를 추가할 때 사용합니다. 기본값은 인라인입니다.
참고: ::before와 ::after로 생성한 의사 요소는 원본 요소의 서식 박스에 포함되므로, <img>나 <br> 등 대체 요소에 적용할 수 없습니다.
참고: 의사 클래스와 의사 요소를 구분하기 위해 CSS3부터::afte 구문을 도입했습니다. 그러나 브라우저는 CSS2 구문인 :after도 허용합니다.
브라우저 호환성
출처 : MDN - 브라우저 호환성
CSS3 홈으로 돌아가기
CSS3
메인으로 돌아가기
표준 의사 클래스
출처 : MDN 의사 클래스
Made with SlashPage