1. State
- 어떤 웹사이트를 개발자 도구를 통해 살펴보면 확인할 수 있는 가장 중요한 selector(선택자)는 state이다.
- 위의 사진에서 보이는 것처럼 state에는 active, hover, focus, visited, focus-within이 있다. 이를 버튼을 통해 살펴보자.
1) active - 버튼을 클릭했을 때 작동
<style>
body {
height: 1000vh;
margin: 50px;
}
button:active {
background-color: coral;
}
</style>
</head>
<body>
<button>Hello</button>
</body>
</html>
2) hover - 마우스 커서를 버튼 위에 올렸을 때 작동
- hover가 작동되면 default border가 적용되기 때문에 설정해 놓았던 둥근 테두리가 없어진다. 그러므로 hover가 작동할 때의 테두리 모양을 따로 적용해야 한다.
<style>
body {
height: 1000vh;
margin: 50px;
}
button:hover {
background-color: cornflowerblue;
}
</style>
3) focus - 입력란에 커서가 놓여있게 하는 기능으로, 사용자를 입력란으로 유도한다.
- Tab키를 눌렀을 때, 커서가 자동으로 입력란에 놓여지게 된다.
<style>
body {
height: 1000vh;
margin: 50px;
}
input:focus {
background-color: hotpink;
}
</style>
</head>
<body>
<input type="email" placeholder="abc@email.com" />
<input type="email" placeholder="abc@email.com" />
</body>
</html>
4) visited - 링크에만 적용이 되는 상태 값으로, 방문한(클릭한) 링크에 적용된다.
<style>
body {
height: 1000vh;
margin: 50px;
}
a:visited {
background-color: tomato;
}
</style>
</head>
<body>
<a href="https://google.com">Go to Google.com</a>
</body>
</html>
5) focus within - focus 상태인 자식 엘리멘트를 가진 부모 엘리먼트에게 적용되는 상태를 의미한다.
<style>
body {
height: 1000vh;
margin: 50px;
}
form {
border: 3px solid salmon;
display: flex;
flex-direction: column;
width: 300px;
padding: 20px;
}
form:focus-within {
border-color: seagreen;
}
</style>
</head>
<body>
<form action="">
<input type="text" />
<input type="text" />
<input type="text" />
</form>
</body>
</html>
2. 응용
- 기본적인 state에 대한 것을 배웠으니 여러 state를 함께 사용하는 방법을 살펴보자.
예시 1) form이 hover상태일 때, input의 배경색을 바꾸는 state
<style>
body {
height: 1000vh;
margin: 50px;
}
form {
border: 3px solid salmon;
display: flex;
flex-direction: column;
width: 300px;
padding: 20px;
}
form:hover input {
background-color: royalblue;
}
</style>
</head>
<body>
<form action="">
<input type="text" />
<input type="text" />
<input type="text" />
</form>
</body>
</html>
예시 2) form이 hover상태이면서 동시에 input이 focus상태일 때, 배경색을 바꾸는 state
- 이번 예시는 form 위에 마우스가 올라가 있으며 동시에 input이 focus상태가 될 때에만 작동한다.
<style>
body {
height: 1000vh;
margin: 50px;
}
form {
border: 3px solid salmon;
display: flex;
flex-direction: column;
width: 300px;
padding: 20px;
}
form:hover input:focus {
background-color: silver;
}
</style>
</head>
<body>
<form action="">
<input type="text" />
<input type="text" />
<input type="text" />
</form>
</body>
</html>
3. 기타 CSS 속성 선택자
- 이전 포스팅에서는 엘리먼트의 구조나 관계를 이용하여 엘리먼트를 선택하는 방법을 배웠다. 이번 포스팅에서는 이 선택자를 이용하여 선택된 엘리먼트의 속성값을 변경하는 방법을 배워보자.
예시 1) 만약 아래와 같이 input이 있고 안에 placeholder가 존재할 때, 기본적으로 placeholder의 색상은 회색으로 잘 보이지 않는다. 만약 이것을 바꾸고 싶다면 어떻게 해야할까?
- 위의 예시처럼, 속성값을 변경하고 싶을 때에도 선택자를 이용하여 바꿀 수 있다. placeholder의 색상을 파란색으로 바꿔보자.
<style>
body {
height: 1000vh;
margin: 50px;
}
input::placeholder {
color: royalblue;
}
</style>
</head>
<body>
<input type="text" placeholder="First-Name" />
<input type="text" placeholder="Last-Name" />
<input type="text" placeholder="email" />
</body>
</html>
- 여기서 중요하게 봐야 하는 것은 속성값을 선택자로 명시하는 방법이다. (아래 사진참고)
Selection)
- selection은 글을 드래그했을 때, 파란색으로 텍스트의 배경색이 바뀌는것을 지칭한다. (아래 사진참고)
- selection 이외에 여러가지가 속성이 존재하는데, 선택자를 이용해 이러한 스타일 속성값을 바꿔보자.
예시 1) ::selection
<style>
body {
height: 1000vh;
margin: 50px;
}
p::selection {
color: white;
background-color: silver;
}
</style>
</head>
<body>
<p>
abcabcabcabcabcacbcacbabcabcabcabc abcacbcacbabcabcabcabcabcacbcacbabc
abcabcabcabcacbcacb
</p>
</body>
</html>
예시 2) ::first-letter
<style>
body {
height: 1000vh;
margin: 50px;
}
p::first-letter {
font-size: 40px;
}
</style>
</head>
<body>
<p>
Abcabcabcabcabcacbcacbabcabcabcabc abcacbcacbabcabcabcabcabcacbcacbabc
abcabcabcabcacbcacb
</p>
</body>
</html>
'Front-end > HTML + CSS' 카테고리의 다른 글
| HTML/CSS - Transition & Transformation (0) | 2020.08.30 |
|---|---|
| HTML/CSS - CSS Variable (0) | 2020.08.27 |
| HTML/CSS - Pseudo selectors(선택자) (0) | 2020.08.25 |
| HTML/CSS - Position (relative&absolute) (0) | 2020.08.24 |
| HTML/CSS - Inline_block & Flex_box (0) | 2020.08.24 |
댓글