후손 선택자와 자손 선택자

이 번 시간에는 후손 선택자와 자손 선택자에 대해 알아보도록 할게요

자 일단! 후손과 자손이 무엇이냐? 우리 인간 관계랑 똑같아요

후손 : 어떠한 태그 아래에 위치한 모든 태그

자손 : 어떠한 태그 바로 아래에 위치한 태그

1. 후손 선택자

특정한 태그 아래에 있는 후손을 선택할때 사용

예제를 보면서 좀 더 자~~~세하게 자손과 후손에 대해 알아볼게요

자! 일단 이렇게 입력을 해줍니다.

그러면 출력 결과는

요렇게 나올거에요

이제 해석을 들어가도록 할게요

이 문장을 보시면 <div> 태그로 묶어져 있습니다.

※div 태그는 간단하게 벽돌쌓기 라고 생각하기!!!

일단 첫번째 div의 id(이름) 은 header 이라고 정하였습니다.

그리고 div 태그 내부에 포함되어 있는 h1 태그와 또 다른 div 태그들이 있는데요

여기서의 <h1 class=title> 이 태그는 <div id="header"> 태그의 자손 입니다.

그리고 <h1>을 포함한 모든 태그들을 후손이라고 합니다.

여기서 id와 class가 나왔는데요 이 것들은 전부터 계속 나왔습니다.

그치만 이번 포스팅에서 정리를 한번 해볼게요

id

쉽게 설명하자면 사람의 이름 이라고 생각하시면 됩니다.

이세상에 사람의 이름은 같을 수 없다고 가정했을때 사람의 이름은 세상에 하나뿐이게 됩니다.

여기서도 마찬가지에요 id는 단 하나만 존재합니다.

class

class는 id와는 반대로 여러 종류를 포함하고 있는 묶음?? 이라고 생각하시면 되요

뭐.. 요놈들도 마찬가지겠쬬?? ㅎㅎ

이제 이 식상한 HTML 태그에다가 style을 입혀 볼게요

해석을 해보자면!

#header h1{color:red;}

요놈은 #header 이것이 id로 정해집 이름들 이에요

그리고 이 선택된 id의 후손 h1 태그에다가 red색을 입혀주겠다 라는 뜻 입니다.

만약 #header h1, h2 {color:red;}

이런식으로 하고싶다면?? 이 방법을 틀립니다.

옳바른 방법은 

#header h1, #header h2 {color:red;}

이렇게 해야됩니다.

2. 자손 선택자

어떤 특정한 태그 아래에 있는 자손을 선택할때 사용하는 선택자

자손 선택자는 후손 선택자와는 다르게 > 가 추가됩니다.

그래서 #header > h1 {color:red;}

요것은 header 라는 id에 있는 자손중 h1태그를 선택한다. 그 h1 태그는 red 색으로 입힌다. 라는 뜻 입니다.

단! <div id="nav"> 안에 있는 <h1> 태그는 <div id=header> 태그의 후손이고

<div id="header">태그의 자손은 <h1 class=title>입니다.

참고로 해보시면 아시겠지만 #header > h1 --> 요기 뒤에 h1은 태그만 되고 id는 안됩니다.

※table 태그를 사용할때는 자손 선택자를 사용하지 말것!!!!!!