프로그래밍

[Web] day33 : CSS 선택자 본문

Web/Web

[Web] day33 : CSS 선택자

시케 2023. 7. 4. 09:19
728x90
반응형

2023.06.21.수

CSS 선택자

스타일을 적용할때 하나씩 요소들을 선택하는 것이 아니라 id, class 등으로 선택할 수 있다

 

id 선택자와 class 선택자

다양한 선택자_id/class

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.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<!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.</p>
<p class ="txt">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<p class ="txt">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p class ="txt">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</body>
</html>

 

하위,자식선택자

다양한 선택자_하위,자식선택자

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.

  • Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>다양한 선택자_하위,자식선택자</title>

<style type="text/css">
/* 하위 선택자 */
.box p {
	color: red;
}

/* -- 자식 선택자 */
.box > p {
	color: red;
}
</style>

</head>
<body>

	<div class="box">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
			eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
		<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco
			laboris nisi ut aliquip ex ea commodo consequat.</p>

		<ul>
			<li><p>Duis aute irure dolor in reprehenderit in voluptate
					velit esse cillum dolore eu fugiat nulla pariatur.</p></li>
			<li><p class="txt">Excepteur sint occaecat cupidatat non
					proident, sunt in culpa qui officia deserunt mollit anim id est
					laborum.</p></li>
		</ul>
	</div>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
		eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

</body>
</html>

 

그룹선택자

다양한 선택자_그룹선택자

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>다양한 선택자_그룹선택자</title>

<style type="text/css">
/* 안에 있는 모든 요소를 보기 때문에 성능저하 > "*"은 잘 쓰지 않는다 */
	*{
		color: blue;
	}

/* 그룹 선택자 */
	h1, p {
		color: blue;
	}

</style>


</head>
<body>

	<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
		do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h1>
	<p>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. Excepteur sint occaecat cupidatat non proident, sunt in
		culpa qui officia deserunt mollit anim id est laborum.</p>

</body>
</html>

가상클래스

가상클래스 
<!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: "이용해주셔서 감사합니다";
	}

</style>

</head>
<body>

	<ul>
		<li><a href="https://www.naver.com/">전체상품 목록 보기</a></li>
		<li><a href="https://mail.naver.com/">신상품 목록 보기</a></li>
		<li><a href="https://section.cafe.naver.com/">BEST 목록 보기</a></li>
		<li><a href="https://github.com/jihyean?tab=repositories">고객센터 문의하기</a></li>
	</ul>

</body>
</html>

 

728x90
반응형

'Web > Web' 카테고리의 다른 글

[Web] day33 : CSS 애니메이션  (0) 2023.07.04
[Web] day33 : CSS 활용  (0) 2023.07.04
[Web] day33 : CSS 기초  (0) 2023.07.04
[Web] day32 : radio 버튼  (0) 2023.07.03
[Web] day32 : form 태그  (0) 2023.07.03
'Web/Web' Related Articles more
Comments