목차
:focus 예제 - 커서 깜빡이는 요소 선택 :focus 정의 :focus 구문 :focus 예제 - :hover, :active, :foucs 선택자 :focus 예제 - 특정 input만 적용 :focus 예제 - input 포커스 시 밑줄 애니 효과 :focus 예제 - input 포커스 시 너비 증가 애니 효과
:focus 예제 - 커서 깜빡이는 요소 선택
<style>
input:focus {background-color: yellow;}
</style>
<form>
<input type="text" name="focus">
<input type="submit" value="확인">
</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;}
<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;}
<input class="homzzang" type="text"/>
※ 특정 input 요소에만 스타일을 주고 싶을 땐, class 선택자 이용.
:focus 예제 - input 포커스 시 밑줄 애니 효과
<style>
:focus { outline: none;}
.container { width: 200px; position: relative;}
input[type="text"] { width: 100%;}
.input { border: 0; padding: 10px 0; border-bottom: 1px solid #ccc;}
.input ~ .border {
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: #27ad8a;
}
.input:focus ~ .border {
width: 100%;
transition: 0.5s;
}
</style>
<div class="container">
<input class="input" id="name" type="text" placeholder="이름 입력">
<span class="border"></span>
</div>
<div class="container">
<input class="input" id="nick" type="text" placeholder="닉네임 입력">
<span class="border"></span>
</div>
결과보기
:focus 예제 - input 포커스 시 너비 증가 애니 효과
<style>
input {
width: 100px;
height: 30px;
border-color:silver;
outline: none;
border-radius:5px;
text-indent:5px;
}
input:focus {
width: 200px;
transition: 0.5s;
}
</style>
<input type="text" placeholder="검색어 입력">
결과보기
