그 외의 의사 선택자 - link, visited, target, enabled, disabled, not, active, hover, focus [Jquery, CSS]

공부/Jquery,CSS  2016.03.14 22:22

안녕하세요 명월입니다.
이번 포스트에서는 지금까지 공부한 선택자 이외의 선택자에 관해 공부를 하겠습니다.


오늘 공부하는 선택자 중에서 focus, target, hover, enabled, disabled의 경우는 많이 쓰이는 선택자이고 link, visited, not의 경우는 자주 사용되지 않는 선택자입니다.
지극히 저의 개인적인 견해이지만 고수분들은 어떻게 사용할지 모르겠네요.. 그럼 예제를 통해서 자세히 공부하겠습니다.



다음은 CSS에 대한 의사 요소 선택자의 예제입니다.



예제를 보면 3개의 a 태그와 그에 대응하는 3개의 div 그리고 input 5개가 있습니다.
먼저 a태그의 link, visited는 link는 한 번도 클릭하지 않은 태그 visited은 한 번이라도 클릭한 태그입니다. 즉 제가 웹을 열어서 명월일지 1을 클릭하면 명월일지1은 핑크가 되고 2, 3은 빨간색이 됩니다.
target은 그렇게 지정이 된 ID가 지정되는 것입니다. 즉 div1이 빨간 배경과 파란 글씨가 되겠네요.
그다음은 input의 태그의 enabled와 disabled 선택자입니다. enabled은 활성화된 요소를 선택 두 번쨰를 제외한 1,3,4번쨰 바탕이 파란색이 되고 그와 반대로 2번째가 빨간색이 됩니다.
마지막으로 5번째 textbox를 선택 후 마우스를 4번째 textbox위에 올리면 5번째는 노란색 글씨로 4번째는 흰색 글씨가 되겠습니다.


그 외 선택자 결과


선택자를 전부 다 공부한 건 아니지만 그래도 자주 사용하는 선택자를 공부했습니다. 지금까지 선택자를 공부하면서 아는 것도 있었지만 모르는 것도 있었고 알았는데 잘 못 알고 있었던 것도 있었네요.
티스토리 스킨 작성 중인데 분명 도움은 되는 듯합니다.
원래 공부 순서로는 다음은 텍스트, 색 처리, 박스, 테이블 스타일 순서인데.. 이 부분은 일단 지나가고(후에 스킨 작성 중 모르는 게 많아지면 공부하는 거로.) 진짜 CSS 처리 같은 스타일을 공부하겠습니다.


댓글 0개가 달렸습니다.
댓글쓰기