active 상태란
active 상태는 버튼을 예시로 들자면 버튼을 누른 상태에서 마우스를 때기 전까지의 상태를 active라고 부른다. 이러한 상태를 응용해서 어떤 요소가 active 상태이면 어떻게 하라고 명령을 내릴 수 있다.
밑에 코드 같은 경우는 버튼의 상태가 active면 버튼의 background-color을 blue로 바꾸라고 명령하는 코드다.
코드 예시
<style>
button:active{
background-color: blue;
}
</style>hover 상태란
hover 상태는 버튼을 예시로 들자면 마우스를 버튼 위에 올려놓은 상태를 hover 상태라고 부른다. 이러한 상태를 응용해서 어떤 요소가 hover 상태이면 어떻게 하라고 명령을 내릴 수 있다.
밑에 코드 같은 경우는 버튼 위에 마우스가 올라가면 버튼의 background-color을 tomato 색으로 바꾸라고 명령하는 코드이다.
코드 예시
<style>
button:hover{
background-color: tomato;
}
</style>focus 상태란
focus 상태는 input text 박스를 에시로 들자면 input text 박스를 클릭하고 다른 요소를 클릭하기 전까지 웹사이트는 input text 박스에 focus한 상태라고 말할 수 있다. 이러한 상태를 응용해서 어던 요소가 focus된 상태이면 어떻게 하라고 명령을 내릴 수 있다.
밑에 코드 같은 경우는 input text 박스에 focus되면 input text 박스의 background-color을 green 색으로 바꾸라고 명령하는 코드다
코드 예시
<style>
input:focus{
background-color: green;
}
</style>visited 상태란
visited 상태는 anchor(a) 한정으로 사용할 수 있는 상태이다. visited 상태를 이용해서 링크에 방문해서 visited 상태가 되었을 때 anchor(a) 색깔을 빨강색으로 바꾸라고 명령할 수 있다.
코드 예시
<style>
a:focus{
color: red;
}
</style>focus-within 상태란
focus-within은 부모 요소한테 적용되는 상태이다. focus 상태인 자식 요소를 가지고 있는 부모 요소의 상태를 focus-within이라고 말한다. 밑에 있는 코드를 폴이하면 form안에 있는 3개의 input 중 하나라도 focus 상태가 되면 input의 부모인 form은 focus-within 상태가 된다. css 코드에서는 form이 focus-within 상태가되면 글자 색깔을 teal 색으로 바꾸라고 명령하고 있다
<style>
body{
margin: 20px;
}
form{
border: 1px solid salmon;
display: flex;
flex-direction: column;
padding:20px;
}
form:focus-within{
color: teal;
}
</style>
</head>
<body>
<form>
<input type="text" />
<input type="text" />
<input type="text" />
</form>
</body>요소 상태 응용하기
요소의 상태를 응용해서 더 고도화된 코드를 작성 할 수 있다. 예시 코드를 보면 form 위에 마우스가 hover 할때 input의 background-color을 pink색으로 바꾸라고 명령하고 잇다
예시 코드
<style>
body{
margin: 20px;
}
form{
border: 1px solid salmon;
display: flex;
flex-direction: column;
padding:20px;
}
form:hover input{
background-color: pink;
}
</style>