728x90
CSS 선택자
html 문서의 요소를 선택하여 해당 요소에 스타일 규칙을 적용하는 데 사용되는 패턴 또는 규칙
1. 아이디 선택자
html 요소의 id 속성 값을 사용하여 선택
페이지 내에서 유일한 아이디에만 적용됨
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>id 선택자</title>
<style type="text/css">
#title {
color: red;
}
</style>
</head>
<body>
<p id="title">Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</body>
</html>
2. 클래스 선택자
html 요소의 class 속성 값을 사용하여 선택
여러 요소에 동시에 적용할 수 있음
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>class 선택자</title>
<style type="text/css">
.txt {
color: blue;
}
</style>
</head>
<body>
<p class="txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p class="txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</body>
</html>
3. 자식 선택자
특정 요소의 하위 요소를 선택
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자식 선택자</title>
<style type="text/css">
.box > p {
color: red;
}
/* .box p // box class 내부의 모든 p 태그 */
/* .box > p // box class의 자식 선택자 p 태그 */
</style>
</head>
<body>
<div class="box">
<p>Lorem ipsum dolor sit amet,</p>
<p>Lorem ipsum dolor sit amet,</p>
<ul>
<li><p>Lorem ipsum dolor sit amet,</p></li>
<li><p>Lorem ipsum dolor sit amet,</p></li>
<li><p>Lorem ipsum dolor sit amet,</p></li>
</ul>
</div>
<p>Lorem ipsum dolor sit amet,</p>
</body>
</html>
4. 그룹 선택자
여러 선택자를 쉼표로 구분하여 그룹화 할 수 있음
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>그룹 선택자</title>
<style type="text/css">
h1, p {
color: blue;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet,</h1>
<p>Lorem ipsum dolor sit amet,</p>
</body>
</html>
5. 가상 클래스 선택자
html 요소의 특정 상태나 위치를 선택하여 해당 상태나 위치에 따라 스타일을 적용하는데 사용
콜론( : )으로 시작하며, 요소 이름 뒤에 사용됨
가상 클래스 선택자의 종류
:hover >> 요소에 마우스 커서가 올라갔을 때 적용
:active >> 요소가 활성 상태일 때 마우스 클릭 등으로 적용
:focus >> 요소가 포커스를 받았을 때 적용 (주로 입력요소 스타일링에서 사용)
:first-child >> 요소의 첫 번째 자식 요소에 적용
:last-child >> 요소의 마지막 자식 요소에 적용
:nth-child(n) >> 요소의 n번째 자식 요소에 적용
:not(selector) >> 지정된 선택자와 일치하지 않는 요소를 선택
:nth-of-type(n) >>지정된 유형의 요소 중에서 n번째 요소에 적용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>가상클래스</title>
<style type="text/css">
a {
color: lightblue;
}
a:hover {
color: red;
}
a::before {
content: "▶";
}
ul::after {
content: "이용해주셔서 감사합니다! :D";
}
</style>
</head>
<body>
<ul>
<li><a href="https://www.naver.com/">전체 상품 목록보기</a></li>
<li><a href="https://www.naver.com/">신상품 목록보기</a></li>
<li><a href="https://www.naver.com/">BEST 목록보기</a></li>
<li><a href="https://www.naver.com/">고객센터 문의하기</a></li>
</ul>
</body>
</html>
728x90
'Web > CSS' 카테고리의 다른 글
| [CSS] 애니메이션 (0) | 2023.06.23 |
|---|---|
| [CSS] 스타일 우선 순위 (0) | 2023.06.22 |
