[css] :focus 가상 클래스

 

 

[css] :focus 가상 클래스

 

예전에 링크 관련 가상 클래스에서 :link :visited :active :hover를 배웠습니다.

 

[css] 링크 가상 클래스(:link, :visited,:hover, :active)

 

오늘은 사용자 행동에 기반한 가상 클래스 :focus 선택자를 배워보겠습니다.

 

참고로 :active :hover :focus 는 '사용자 행동 가상 클래스'(the user action psuedo-class)로 분류됩니다.

 

 

:focus 가상 클래스

 

포커스를 가진 요소에 적용하는 선택자입니다.

 

포커스란? 

 

요소가 선택되거나 마우스 이벤트 상태, 또는

<input> <textarea>태그에서 기본값 상태(입력할 준비가 될 때 커서가 깜빡거리는 것)
일 때 포커스 되었다고 합니다.

 

이외에도,  <a> <button> 역시 기본값으로 :focus 상태가 되며

 

html5에서는 contenteditable , tabindex 속성을 사용하여 모든 요소에 focus 상태로

 

만들 수 있습니다.

 

 

▶ 문법

:focus{속성: 속성값;}

 

▶사용 예

:focus{color: red;}

 

a:focus{color: red;}

 

html/css 작성 예를 보겠습니다~ 

 

html

<form action="url"  method="post">
이름: <input type="text" name="id"> <br><br>
비밀번호: <input type="password" name="pssd">
<p>
<h3>영화<행복한 사전> 감상평</h3>
<textarea name="review" cols="40" rows="10">솔직한 감상평을 남겨주세요 </textarea>
</p>
 <input type="submit">
</form>
 
<p><a href="http://movie.naver.com/movie/bi/mi/point.nhn?code=102216">다른 사람 리뷰 보기</a></p>
 
<div contenteditable>이 글은 편집할 수 있습니다</div>

 

 

css

 :focus{background-color:#ffe08c;}

 

▶실행 화면

 

위 이미지는 캡쳐한 것인데 소스 다운 받아 실행해 보세요focus.htm

 

<input> <textarea> 요소는 커서를 이동할 때마다 배경이 노란색으로 표시가 되고

 

링크는 탭으로 이동 시키면 노란색으로 표시가 됩니다.

 

원래 div는 편집할 수 없지만 html5에서는 contenteditable 사용하여 편집상태로 만들 수 있습니다

 

이 속성을 사용하면 포커스 상태가 되므로 마찬가지로 노란색 배경이 적용 됩니다.
 

 

 

css 선택자, 선택자 종류와 사용법

 

[css2/3] 속성 선택자

 

인접 형제 선택자, 일반 형제 선택자 차이

 

[css3] :empty 가상 클래스

 

[css1] ::first-line 가상 요소