문제
정답
내 풀이
<div class="a">1</div>
<div id="a">2</div>
<div class="a">3</div>
<div class="a b">4</div>
<section class="a b">4</section>body {
font-size:4rem;
}
/* tag 가 a 인 엘리먼트 선택 */
a {
}
/* class 가 a 인 엘리먼트 선택 */
.a {
color:red;
}
/* id가 a 인 엘리먼트 선택 */
#a {
color:blue;
}
/* class a와 b를 동시에 가지고 있는 엘리먼트 선택 */
.a.b {
color:gold;
}
/* 태그가 section이고 class a와 b를 동시에 가지고 있는 엘리먼트 선택 */
section.a.b {
color:green;
}선생님 풀이
<div class="a">1</div>
<div id="a">2</div>
<div class="a">3</div>
<div class="a b">4</div>
<section class="a b">4</section>body {
font-size:4rem;
}
/* tag 가 a 인 엘리먼트 선택 */
a {
}
/* class 가 a 인 엘리먼트 선택 */
.a {
color:red;
}
/* id가 a 인 엘리먼트 선택 */
#a {
color:blue;
}
/* class a와 b를 동시에 가지고 있는 엘리먼트 선택 */
.a.b {
color:gold;
}
/* 태그가 section이고 class a와 b를 동시에 가지고 있는 엘리먼트 선택 */
section.a.b {
color:green;
}핵심사항
태그 이름 셀렉터
- p태그의 p만 사용한다거나 div의 div태그 이름만 활용해서 css 적용할 수 있게 하는 것
class 셀렉터
- 형식 : .class 이름
- class 속성이 같은 모든 태그에 적용된다.
- class="a b" 처럼 띄워져 있을 때는
.a.b로 점을 찍어 이어준다. - 여러 태그를 하나의 그룹으로 묶어 단체로 동일한 css 스타일을 적용할 때 적합하다.
id 셀렉터
- 형식 : #id 이름
- id 속성이 같은 모든 클래스에 적용된다.
- 문제점 : 자바스크립트 코드에서 id값을 가진 태그 객체를 찾아 이어줄때 문제가 될 수 있다.
- 여러 태그 중 특정태그에만 css스타일을 적용하고 싶을 때 사용하기 적합하다.
- 같은 class 셀렉터를 선택하고 싶을 때 : .클래스 이름
- 같은 id 셀렉터를 선택하고 싶을 때 : #아이디 이름
- 특정태그 안에 있는 class 셀렉터를 선택하고 싶을 때 : 태그명.클래스이름
(id 셀렉터도 동일)
