(5) 가상클래스
- 가상클래스 : 가상클래스는 요소의 이벤트에 대응하기 위하여 미리 만들어 놓은 클래스다
1) 가상클래스의 종류
- link : 하이퍼링크가 적용된 요소
- visited : 링크 요소를 한 번 이상 방문한 요소
- hover : 요소에 마우스가 올라간 상태
- active : 링크 요소가 활성화된 상태 / 마우스가 누르고 있을 때
- focus : 폼요소가 선택된 상태, 입력대기모드
2) 사용법
- 선택자로 사용시 요소명 :가상클래스이름과 같이 사용한다.
- 선택자로 사용시 요소명 대신에 아이디 또는 클래스 선택자가 올 수 있다.
3) 사용 예제
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>가상클래스</title> <style type="text/css"> /* 가상 클래스 */ a:link{color: #000;} .visited:visited{color:#f00;} .hover:hover{color: #0f0;} .active:active{color: #fc0;} .focus:focus{background-color: #f00;} </style> </head> <body> <p><a href="#">link1</a></p> <p><a href="#" class="visited">link2</a></p> <p><a href="#" class="hover">link3</a></p> <p><a href="#" class="active">link4</a></p> <p><input type="text" class="focus" /></p><!-- focus는 모바일에서 지원안함 --> </body> </html> |
(6) 가상요소
- 가상요소는 문서의 특정위치, 특정영역, 특정요소를 선택하기 위하여 미리 만들어 놓은 선택자
1)가상요소의 종류
- first-letter : 문장의 첫글자
- first-line : 문장의 첫줄
- first-child : 연속되는 자식 요소 중 첫 번째 자식
- before : 요소 안의 콘텐츠 앞쪽 선택
- after : 요소 안의 콘텐츠 뒷쪽 선택
2) 사용법
- 선택자로 사용시 요소명 : 가상요소 이름과 같이 사용한다.
- 선택자로 사용시 요소명 대신에 아이디 또는 클래스 선택자를 사용할 수 있다.
3) 사용 예제
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>가상요소</title> <style type="text/css"> /* 가상 요소 */ .letter:first-letter{font-size: 50px;} .letter:first-line{color: #f00;} .list li:first-child{color: #f0f;} .list li:last-child{color: #0f0;} .txt01:before{content: '*앞쪽';} .txt02:after{content: '뒤쪽*';} </style> </head> <body> <p class="letter">안녕하세요 대한민국입니다. 안녕하세요 대한민국입니다.</p> <ul class="list"> <li>first-</li> <li>second-</li> <li>third-</li> <li>fourth-</li> </ul> <p class="txt01">before</p> <p class="txt02">after</p> </body> </html> |
(참고1)
- first-child{} : 첫 번째
- last-child{} : 마지막 번째
(참고2)
- before, after는 요소 안의 콘텐츠 앞쪽 또는 뒷쪽을 선택
- before, after 사용시 content 스타일 속성을 이용하여 콘텐츠를 추가할 수 있음
예) content : '추가할 콘텐츠 문자열 작성, 스타일로만 활용가능함'