생활코딩

Coding Everybody

코스 전체목록

닫기

가상 클래스 선택자

소개

가상(pseudo) 클래스 선택자는 클래스 선택자는 아니지만 엘리먼트들의 상태에 따라서 마치 클래스 선택자처럼 여러 엘리먼트를 선택할 수 있다는 점에서 붙은 이름입니다. 여기서는 주요 클래스 선택자를 알아봅니다. 

링크와 관련된 가상 클래스 선택자

  • :link - 방문한 적이 없는 링크
  • :visited - 방문한 적이 있는 링크
  • :hover - 마우스를 롤오버 했을 때 
  • :active - 마우스를 클릭했을 때 

위의 선택자는 순서대로 지정하는 것이 좋습니다. 특히 visited의 경우는 보안상의 이유로 아래와 같은 속성만 변경이 가능합니다. 

  • color
  • background-color
  • border-color
  • outline-color
  • The color parts of the fill and stroke properties

 

댓글

댓글 본문
작성자
비밀번호
  1. nosg86
    강좌 올려주셔서 감사합니다.
    영상의 내용과 설명이 다른 부분이 있네요.
  2. 완료
  3. 191001 수강완료
  4. 태태
    수업완료
  5. 치디우기
    수업완료
  6. 류석현
    수강완료
  7. 20190727 완료!
  8. 다나가
    190718 - 완료
  9. 김주엽
    보류
  10. 잘될자
    190502 목요일 수강완료!
  11. 노혜주
    완료
  12. 2019-02-22 완료
  13. 감사합니다
  14. 하루
    감사합니다.
  15. 김민영
    완료
  16. 리젤린
    좋은 강의 감사합니다
  17. 김수
    꾸르잼
  18. 로버트한
    재미 있습니다.^^
  19. 스페이스몽키
    이번 강의도 감사합니다~!
  20. 푸른하늘
    9일차 공부 감사합니다
  21. 이경일
    link
    visited
    hover
    focus
    가상선택자는 지시대상의 행위에 대한
    반응을 설정할 수 있게 한다.
  22. Noel J Park
    가상 클라스 선택자가 있다는 것을 기억만 하고 넘어기가 왠지 불안하지만 완료요 ㅋ
  23. 밤토리맘
    ㅜㅜ 왜 저는 링크에서 포커스가 안먹히는지 탭을 눌러도 박스로 보여지지가 않고 탭을 누르면 자꾸 웹페이지 url이 선택되어지네요.. ㅠㅠ흑
  24. 오빠는다르다
    감사합니다~!!!!
  25. 프로그래밍초보
    ㅋㅋㅋㅋ hover랑 active설명하실때 우왕자왕하시는 모습 웃기네요 ㅋㅋㅋ
  26. 풋사과
    ???
  27. 강지후
    강의 완료 20170713
  28. focus
    hover
    vistied
    가상선택자 개념 존재
  29. 쿠쿠다스
    감사합니다
  30. 하드레인
    감사합니다 ^^ 열심히 공부할겠습니다
  31. 14번째
    5.6.
  32. php가 첫취업?
    css부터...어려움이 느껴집니다 ㅜㅜ
  33. <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <style>
    a:link{
    color:black;
    }
    a:visited{
    color:red;
    }
    a:hover{
    color:yellow;
    }
    a: active{
    color:green;
    }
    a:focus{
    color:white;
    }
    input:focus{
    background-color:black;
    color:white;
    }
    </style>
    </head>
    <body>
    <a href="https://opentutorials.org">방문함</a>
    <a href="a.com">방문안함</a>
    </body>
    </html>
  34. 배워시
    감사
  35. jgatsby
    수도 클래스.
    가상 클래스 선택자
    특정한 요소가 아닌 어떠한 상태를 꾸며주고자 할때 쓰는 선택자.

    TagName : Status { property }
  36. matheios
    강의 감사합니다~
  37. 임지호
    가상 클래스 선택자 : 클래스 선택자처럼 행동하지만 클래스 선택자는 아닌 선택자(엘리먼트의 특성에 따라 클래스 선택자처럼 몇몇 태그를 그룹핑한다.)
    - hover, active, link, visited등(visited는 보안상의 문제 때문에 일부 속성만 사용 가능)
    * <style>태그에서 위에 있는 것이 우선순위가 높다.
  38. 폭스킴
    focus는 우선순위를 높이기 위해 맨 마지막에 쓴다~
  39. 망고씨
    감사합니다 ㅎㅎ
  40. CSS 클릭맨
    감사합니다. 잘 봤습니다.
  41. GunLoc
    가상클래스 선택자에 클릭관련속성이 있군요.. 유용하네요
  42. Jong O Kim
    감사합니다
  43. wlsl
    감사합니다!
  44. 감성팔이
    감사합니다!
버전 관리
egoing
현재 버전
선택 버전
graphittie 자세히 보기