states
1) active : 대상을 클릭하고 있는 상태
2) hover : 마우스가 대상 위에 있을때의 상태
3) focus : active와 비슷하다고 생각될 수 있는데, 키보드로 선택되었을때를 말한다 !
4) visited : 링크에만 적요이된다 그 링크에 방문했다면 그 안에 스타일이 적용이된다
5) focus-within : focuse된 자식을 가진 부모 엘리먼트의 상태를 말한다
즉, 위의 예시에서 form은 그 자식들인 input이 focuse가 되면 form의 모습을 바꾼다는 것이다
state들을 다른 엘리먼트와 연계해서 사용할 수도 있다
1) 부모의 state에 따라 조정
form:hover input {
background-color: slateblue;
}
즉, form이 hover일경우 input의 백그라운드 컬러가 바뀌게된다
부모의 state에 따라 자식의 state를 조정할 수 있다
2) 부모와 자식의 state에 따라 조정
form:hover input:focus {
background-color: teal;
}
이렇게도 supercool하게 사용가능도 하다!
실습코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
height: 1000vh;
margin: 50px;
display: flex;
}
div {
margin-bottom: 10px;
}
/* 버튼을 누를 때 효과 */
button:active {
background-color: tomato;
}
/* 버튼을 올려놓을 때 효과 */
button:hover {
background-color: teal;
}
/* 키보드로 선택되었을 때 효과 */
input:focus {
background-color: aqua;
}
/* 링크를 클릭하였을 때 효과 */
a:visited {
color: tomato;
}
form {
border: 1px solid salmon;
display: flex;
flex-direction: column;
padding: 20px;
}
/* focus-within은 fucused인 자식이 부모 엘리먼트의 상태 변경 */
form:focus-within {
background-color: seagreen;
}
/* form이 hover되면 input 상태 변경 */
form:hover input {
background-color: wheat;
}
</style>
</head>
<body>
<div>
<div>
<button>hello</button>
<input />
<a href="https://www.daum.net">daum</a>
</div>
<form>
<label>form</label>
<input />
<input />
<input />
</form>
</div>
</body>
</html>
* 많은 색상들이 있는데, 이 역시 암기할 필요는 없다고 하십니다.
* 니코쌤이 쓰시는 스포이드 extension 이름: color picker(3:37)
(예전 영상 보면 colorzilla도 사용하시더라고요!)
# 색상 체계 (color system)
1) hex code
: #2ecc71와 같은 색상 코드입니다.
2) rgb
: 각각 red, green, blue를 의미합니다.
가령, rgb(0,140,200)의 경우엔 red 값이 0, green 값이 140, blue 값이 200이라고 이해할 수 있습니다.
3) rgba
: 2와 동일하지만 a가 포함된 형태입니다. 'a(alpha)'는 투명도를 담당합니다.
0(투명)~1(불투명) 사이의 값으로 조절할 수 있습니다.
# variable
(custom property라고도 합니다. 니코쌤은 variable이라고 부르는 걸 선호하신다고 합니다.)
: 작업량을 줄여줄 수 있는 기능으로 이해했습니다. 예를 들면,
div {color: #2ecc71}
p {color: #2ecc71}
상태에서, 둘 모두의 색을 바꾸고 싶다면 우리는 div와 p의 색상 코드를 지우고, 또 다시 입력해야 합니다. 그러나 variable을 이용하면 더 간단해집니다. (해당 설명은 4:35부터 보시면 됩니다.)
mozilla 문서에 따르면, variable은 IE를 제외하고 다 이용 가능합니다
