우리가 앞서 배운 Pseudo Selector은 :(콜론)이 1개였다. 이번에는 콜론이 2개인 Pseudo Selector를 알아볼 것이다.
1. ::placeholder
다음의 코드를 보자.
<!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;
}
input::placeholder {
color: yellowgreen;
}
</style>
</head>
<body>
<form>
<input type="text" placeholder="Name" />
</form>
</body>
</html>
placeholder의 색을 yellogreen이 되도록 코드를 짜본 것이다. 결과를 확인해보자.
정말 placeholder의 색이 바뀌었다!
따라서 ::placeholder는 placeholder의 특성만 스타일링 하고 싶을 때 사용함을 알 수 있다.
2. ::selection
코드를 다음과 같이 작성해보자.
<!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;
}
p::selection {
background-color: yellowgreen;
}
</style>
</head>
<body>
<p>Life's not all gloom and despondency.</p>
</body>
</html>::selection은 어떤 효과를 가져다 줄까? 백문이 불여일견이라고 직접 확인해보자.
다음과 같이 글씨를 마우스로 드래그하여 선택하니깐 배경색이 바뀌었음을 확인할 수 있다!
따라서 ::selection은 글씨를 선택했을 때 스타일을 적용하고 싶을 때 사용함을 알 수 있다.
3. ::first-letter
다음 부분의 코드를 살짝 수정해보자.
p::first-letter {
background-color: yellowgreen;
color: white;
font-size: 50px;
}그리고 나서 결과를 확인해보면
다음과 같이 첫번째 문자의 색과 폰트크기가 바뀌었음을 볼 수 있다!
따라서 ::first-letter은 첫번째 문자에만 스타일을 적용하고 싶을 때 사용함을 알 수 있다.
4. ::first-line
다음 부분의 코드를 살짝 수정해보자.
p::first-line {
background-color: yellowgreen;
color: white;
font-size: 50px;
}first-letter대신 first-line으로 바꿔보았다. 그리고 결과를 확인해보자.
첫번째 줄 전체에 스타일이 적용되었음을 확인할 수 있다!
따라서 ::first-line은 첫번째 줄에만 스타일을 적용하고 싶을 때 사용함을 알 수 있다.
'WEB > HTML&CSS' 카테고리의 다른 글
| [HTML/CSS] #19.Transitions (0) | 2022.01.14 |
|---|---|
| [HTML/CSS] #18.Variable (Custom property) (0) | 2022.01.14 |
| [HTML/CSS] #16.States (0) | 2022.01.11 |
| [HTML/CSS] #15.attribute selector (0) | 2022.01.10 |
| [HTML/CSS] #14.Combinators (0) | 2022.01.02 |
