728x90
CSS 선택자
CSS에서는 스타일을 적용할 대상을 선택하기 위해서 선택자(selector)를 사용합니다.
실습
실습 1 - id / class 선택자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>다양한 선택자_id,class 선택자</title>
<style type="text/css">
#title {
color: red;
}
.txt {
color: blue;
}
</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>
<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>
실습 2 - 하위 선택자
<!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>
실습 3 - 그룹 선택자
<!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>
실습 4 - 가상 클래스
<!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>GitHub
https://github.com/Qkrwnsgus0522/Web
GitHub - Qkrwnsgus0522/Web
Contribute to Qkrwnsgus0522/Web development by creating an account on GitHub.
github.com
728x90
