생성일: 2019년 12월 15일
수정일: 2019년 12월 15일

CSS - 선택자

부모 자식

  • h2 dev 형태로 한칸 띄어서 표시 한다.
  • 모든 조합에서 가능하다.

  • 도 있는데 두 태그 사이에 다른 태그가 없는 부모 자식 간에서 사용 가능하다.

OR 선택자

h1, h2, h3, h4, h5, h6 {
	font-family: 'Alegreya';
}
h1, #id {
	font-family: 'Alegreya';
}
h1, .id {
	font-family: 'Alegreya';
}
.id, #id {
	font-family: 'Alegreya';
}

형태로 ,로 구분한다.

AND 선택자

h1#id {
	font-family: 'Alegreya';
}
h1.id {
	font-family: 'Alegreya';
}  
#id.id {
	font-family: 'Alegreya';
}

가상 이벤트 선택자

  • 아이, 클래스, 태그 뒤에 :선택자로 구분
  • 태그상에는 따로 :선택자를 지정하지 않는다.
  • CSS에서만 지정하고 이벤트를 작성하면 됨
  • 여러가지 가상 이벤트가 있으므로 찾아보면서 익히는 것이 필요하다.
<html>
<head>
<style>
	.box{
		background-color:#09c;
		padding:10px;
		margin-bottom:20px;
	}
	.hover-box:hover{
		background-color:orange;
	}
	</style>
</head>
<body>
	<div class="box hover-box">
		마우스를올려보세요.
	</div>
</body>
</html>
Tags: css Today I Learn