우리가 코딩을 하다보면 좀 더 세부적으로 엘리먼트를 선택해야 할 일이 있다. 이 때 사용하는 것이 Pseudo Selector이다. 다음의 코드를 보자.
<!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;
}
div {
width: 300px;
height: 300px;
background-color: wheat;
position: relative;
}
div:first-child {
background-color: red;
}
div:last-child {
background-color: teal;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>5개의 div블록을 만들고 맨 위에 있는 블록은 red색, 맨 아래에 있는 블록은 teal색이 되도록 Pseudo Selector를 이용해 만들어 보았다. 결과를 확인해보자.
원하는 대로 색깔이 바뀌었다! 물론 class나 id를 만들어서 색을 바꿔줄 수도 있겠지만 html코드를 변경해줄 필요가 없어 이 방법이 훨씬 낫다. Pseudo Selector는 종류가 엄청나게 많다. 하나 더 사용을 해보자.
<!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;
}
div {
width: 300px;
height: 300px;
background-color: wheat;
position: relative;
}
span {
background-color: red;
}
span:nth-child(2) {
background-color: teal;
}
</style>
</head>
<body>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
</body>
</html>이번에는 nth-child를 이용해 2번째 자식 엘리먼트를 선택에 세부조작을 해주었다. 참고로 괄호에 even을 쓰면 짝수번째 자식, odd를 쓰면 홀수번째 자식 모두를 선택할 수 있다. (2n이나 2n+1이라고 써도 적용된다!) 이와 같이 Pseudo Selector는 엘리먼트를 좀 더 세부적으로 선택할 수 있도록 도와주는 역할을 한다.
'WEB > HTML&CSS' 카테고리의 다른 글
| [HTML/CSS] #15.attribute selector (0) | 2022.01.10 |
|---|---|
| [HTML/CSS] #14.Combinators (0) | 2022.01.02 |
| [HTML/CSS] #12. position: fixed, relative, absolute (0) | 2021.12.10 |
| [HTML/CSS] #11.Media Query (반응형 웹디자인) (0) | 2021.12.10 |
| [HTML/CSS] #10.flexbox (0) | 2021.12.10 |
