css 선택자
선택자:어떤 요소에 스타일을 적용할건지에 대한 정보
전체 선택자 = 모든 요소를 선택한다.
*는 '문서 내의 모든 요소'를 의미하는 기호이다.
ex)
*{
color:blue;
}
=>문서 내 모든 요소의 글자 색을 파란 색으로 지정
태그 선택자 = 주어진 이름을 가진 요소가 다수일 경우, 해당 요소들을 모두 선택한다.
ex)
p{
color:blue;
}
=>문서 내 모든 p 태그 요소의 글자 색을 파란 색으로 지정한다!
클래스 선택자 = 주어진 class 속성값을 가진 요소가 다수일 경우, 해당 요소들을 모두 선택한다.
ex)
.text{
color:blue;
}
=>문서 내 class가 "text"인 모든 요소의 글자 색을 파란 색으로 지정한다!
아이디 선택자 = 주어진 id 속성 값을 가진 요소를 선택한다.
ex)
#topic{
color:blue;
}
=>문서 내 id가 "topic"인 요소의 글자 색을 파란 색으로 지정한다!(단 하나!)
그룹 선택자 = 다양한 유형의 요소를 한꺼번에 선택하고자 할 때 사용한다.
ex)
h1, p, div{
color:blue;
}
=>문서내 모든 h1,p,div 태그 요소의 글자 색을 파란색으로 지정한다.
선택자 우선순위?
아이디 선택자 > 클래스 선택자 > 태그 선택자
실습
<style>
*{color:red;}
p{color:red;}
.text{color:green;}
#key{color:red;}
</style>
</head>
<body>
<h1 class="text">제목</h1>
<p id="key">내용 1</p>
<p class="text">내용 2</p>
<p>내용 3</p>
<p>내용 4</p>
</body>
잃어버린 한쪽 에어팟