목차
:focus 예제 - 커서 깜빡이는 요소 선택
:focus 정의
:focus 구문
:focus 예제 - :hover, :active, :foucs 선택자
:focus 예제 - 특정 input만 적용
:focus 예제 - 커서 깜빡이는 요소 선택
<style>
input:focus {background-color: yellow;}
</style>
<form>
<input type="text" name="focus">
<input type="submit" value="Submit">
</form>
※ 선택 전엔 흰색 창이다가, 커서로 선택하는 순간 input:focus 선택자에 의해 노란색 배경으로 변함.
:focus 정의
<input> 같은 요소가 선택되어 커서 깜박이는 동안의 스타일 지정.
:focus 구문
input:hover { CSS Style }
input 요소 위에 마우스 커서 올려놓을 때 스타일 지정.
input:active { CSS Style }
input 요소를 마우스로 클릭하는 순간의 스타일 지정.※ 실제론 input:focus 스타일에 묻혀 효과 안 나타남.
input:focus { CSS Style }
input 요소에 커서 위치해 선택된 동안의 스타일 지정.
※ input 태그도 a 태그처럼 input:hover 와 input:active 등 선택자 사용 가능.
※ 선택자 순서는 위 순서대로 배열.
:focus 예제 - :hover, :active, :foucs 선택자
<style>input {color:gray;} input:hover {background-color:red;}
input:active {color:white;background-color:blue;}
input:focus {color:green;background-color:yellow;} </style>
<input type="text"/>
:focus 예제 - 특정 input만 적용
<style>input.homzzang {color:gray;} input.homzzang:hover {background-color:red;}
input.homzzang:active {color:white;background-color:blue;} input.homzzang:focus {color:green;background-color:yellow;} </style>
<input class="homzzang" type="text"/> <input type="text"/>
※ 특정 input 요소에만 스타일을 주고 싶을 땐, class 선택자 이용.
주소 복사
랜덤 이동