[html/css] 셀렉터 selector 1편(.class, #Id, *,>, +, ~, tag[attribute] etc)

셀렉터 형식	예시	설명
.class	.customer_name	class="customer_name"을 속성으로 갖는 요소들을 선택할 때 사용합니다
	class는 공통된 속성을 적용하고 싶을 때 주로 사용합니다. 단순하게 예를 들면, 빨갛고 둥근 스타일을 적용하고 싶다 그러면 .red_style의 클래스에 빨간 컬러를 적용하고 둥근 모서리를 적용해서 이러한 스타일을 주고 싶은 요소들에게 이 클래스를 부여하는 형식으로 쓰이기도 해요.
#id	#search	id="search" 속성을 갖는 요소를 선택할 때 사용해요
	id는 말그대로 그 요소만 갖는 ID! 내가 그 요소만 특별이 이름을 주는거예요. 특정 요소를 부를 때 사용하는 선택자입니다. 즉 한페이지 내에서 여러번 반복될 수 있을 때(공통적으로 적용할 스타일이 많을 때)는 클래스 선택자를, 단 한 번 유일하게 적용될 스타일에 대해서는 ID를 적용하는 것이 보통입니다. 따라서 id선택자가 class보다 우선순위가 높아요
*	*	모든 요소들을 선택할 때 씁니다. *{~} 스타일을 적용하면 모든 개체에 공통적으로 css가 적용돼요
element	h1 {color: yellow; }	단순한 html 요소를 선택할 때 써요.h1태그의 글자색을 모두 노란색으로 바꿔줘~ 즉 h1{~} 하면 제목태그를 가지고 있는 요소들에게 공통적으로 적용됩니다.
element, element	h1, p { background-color: blue; }	"," 의미 그대로 and 뜻을 가지고 있어요. 두 요소에게 모두 적용하겠다는 겁니다. h1과 p태그 모두의 배경색을 파란색으로 바꿔줘~~
element element	div p	두 요소 사이에 띄어쓰기가 있는 경우예요. 하위 객체를 선택하는 것을 의미합니다.
	즉 div라는 태그 안에 p 태그들을 모두 선택해주는 거예요. 바로 직계 자손이든 먼 자손이든 상관없이 모두 div안에만 있는 하위 요소면 모두 선택해줍니다.
element>element	div>p	얘는 반면에 바로 div밑에 있는 직계 자손의 요소만 선택해 줍니다.
element+element	div+p	div바로 뒤에 p가 나올 때 그 p들을 선택해줍니다. (사이에 낑기는거 허용 ㄴㄴ)
	+ 는 평등한데 더해지는 즉 이어지는 느낌이죠? 이 아이는 부모자식 즉 포함관계가 아닙니다. 형제관계를 나타내요. 사이에 뭐가 껴있으면 안돼요 바로 이어져서 나타나야합니다.
element ~ element	div~p	이 친구는 물결~ 뭔가 사이에 뭐가 와도 될거같죠? +와 같은 형제 선택자인데 +와는 다르게 그 사이에 뭐가 와도 괜찮아요 즉 div h1 p 이렇게 있어도 p를 선택해줍니다.
	반면에 +는 [div p h1]이렇게 태그들이 있으면 p를 선택해주지만 [div h1 p]이렇게 있으면 h1이 사이에 껴있어서 p가 div바로 뒤에 이어지지 않기 때문에 p를 선택해주지 않아요 div~p의 경우에는 선택해줍니다. 서로 대비되는 선택자입니다
tag[attribute]	a[target] { text-decoration: none; }	attribute에 해당하는 속성을 가지고 있는 태그라면 선택해주는 셀렉터예요.
	<a href="http://blog.naver.com/jhnyang" target="_blank">하늘이블로그</a> 이런 링크 관련 코드를 예시로 봅시다. target속성 중 _blank는 이 링크를 클릭하면 기존의 페이지가 변하는게 아닌 새창으로 띄어주는 속성입니다. 즉 a[target]하면 target속성이 포함된 a를 선택하므로 저 링크는 text-decoration:none의 영향을 받아 밑줄이 없는 상태로 보여지게 되는 겁니다.
tag[attribute=value]	a[target=_blank] { text-decoration: none; }	똑같은데 이번에는 target이 _blank속성을 가지고 있는 요소들을 보여주는 것~ 즉 attribute가 value값인 tag들을 선택해서 주는 것~
tag[attribute~= value]	또는 tag[attribute *= value]	아까 ~가 뭐라고 했죠~~?안에 뭐가 있어도 괜찮은거랬잖아요 속성이 value값을 포함하고 있기만 하면 선택해주는 거예요. *도 마찬가지이긴 한데 ~의 경우에는 공백까지 일치해야 합니다.
tag[attribute |= value]	attribute가 value로 시작할 경우 해당되는 tag들을 선택해줍니다.
tag[attribute$=value]	value로 끝나는 tag들을 선택해줘요 속성 태그들은 상징 기호만 다를 뿐 다 똑같은 개념이라 하나를 이해하면 어렵지 않아요!