인터넷활용 7 - 2 CSS3의 선택자

용어체크

1. 클래스 선택자

• 여러 태그에 특정 스타일을 공통으로 적용하고자 할 때 사용
• 클래스 스타일은 “.”으로 정의하며, 아이디 스타일은 “#”으로 정의

2. 선택자 조합

• 선택자를 2개 이상 나열해서 사용
• 주로 서식을 구체적으로 접근하고자 할 때 사용

3. 가상 선택자

• 요소를 선택할 수 있는 특별한 상태를 표현

 

학습내용 1. 클래스 선택자, 아이디 선택자 2. 여러 선택자 조합 3. 가상 선택자 클래스 선택자와 아이디 선택자 정의 및 사용법 자식, 후손 선택자 사용법 하이퍼링크의 가상 선택자 학습목표 1. 클래스 선택자, 아이디 선택자에 대해서 설명할 수 있다. 2. 자식, 후선 선택자의 사용법 및 차이점을 설명할 수 있다. 3. 가상 클래스 선택자에 대해서 설명 할 수 있다.

 

 

1. 클래스 선택자, 아이디 선택자

 

1) 클래스 선택자

 

여러 태그에 특정 스타일을 공통으로 적용하고자 할 때

클래스 선택자는 클래스 이름 앞에 점(.)

 

1> 정의 : .클래스명 {속성:값;]

2> 적용 : <태그 class=클래스명>

 

".클래스이름" : 해당 클래스에 모두 적용 (예_ .red1 {color:red; font-style:italic;}  )

"선택자.클래스이름" : 특정 태그에서 해당 클래스만 지정 (예_ strong.red1 {font-size:20pt}

 

 

 

2) 아이디 선택자

 

특정 id속성이 있는 태그를 선택

아이디는 html문서 내에서 한 군데에만 지정 가능하다. 해당 아이디로 설정된 태그에만 특정 스타일을 적용한다. 정의는 style영역에, 적용은 body태그에 작성한다.

 

1> 정의 : #아이디명 {속성:값;}

2> 적용 : <태그 id=아이디명>

 

 

 

 

2. 여러 선택자 조합

 

1) 2개 이상의 선택 조합

 

조합에 적합한 html태그에만 적용, 보다 구체적인 요소의 선택이 가능하다. 예_ 특정 요서에 포함되어있는 하위 요소 선택, 뒤에 이어서 나오는 형제 요소 선택

 

 

 

 

---

Quiz 01a라는 아이디를 정의하고 적용하고자 할 때 <p id=“a”>를 사용한다.

• 1 O
• 2 X

정답 :1

해설 :아이디를 정의하고자 할 때 <p id=“a”>과 같이 적용한다.

 

 

 

Quiz 02가상 선택자 중에서 마우스가 올라오면 서식이 변경되는 것은?

• 1 :link
• 2 :hover
• 3 :active
• 4 :visitied

정답 :2

해설 ::hover는 마우스가 올라갈 때 스타일 적용을 위한 셀렉터이다.

 

 

 

Quiz 03자식 선택자를 표현하고자 할 때 사용하는 것은?

• 1 body h1
• 2 body, h1
• 3 body + h1
• 4 body > h1

정답 :4

해설 :자식 선택자를 표현하고자 할 때는 body > h1로 표현한다.

 

 

---

학습정리

1. 클래스 선택자

• 같은 태그에 다른 스타일을 적용, 혹은 여러 태그에 특정 스타일을 공통으로 적용하고자 할 때 사용하며 정의할 때에는 “.”을 이용하며 적용할 때 “class=클래스이름”으로 작성

2. 아이디 선택자

• 같은 태그에 다른 스타일을 적용, 혹은 여러 태그에 특정 스타일을 공통으로 적용하고자 할 때 사용하며 정의할때에는 “#”을 이용하며 적용할 때 “id=아이디”로 작성

3. 가상선택자

• 요소 이름 다음 콜론(:) 뒤에 사용하는 것으로 하이퍼링크할 때 :hover,:active 등이 주로 사용