[Html5][style] 선택자, 속성 선택자

선택자

- 속성이 어디에 적용되는지 표시한다고 하여 선택자라 함

선택자	내용	형식(예제)
전체 선택자	- 모든 요소를 대상으로 스타일을 적용할때 사용	*{   margin:0;   padding:0; }  => 모든 요소에 스타일 적용
태그 선택자	- 문서 안의 특정태그에 스타일이 모두 적용  - 태그 { 속성:속성값; 속성:속성값; .... }	p{   font-size:12px;   font-family:"돋움"; }  => <p>태그를 사용하는 부분, 즉 텍스트 단락의 스타일을 지정 글자 크기(font-size)를 12픽셀 글꼴(font-face)를 '돋움'
클래스 선택자	- 특정 부분에만 스타일 적용 - 같은 태그라도 어떤 곳에서는 다른 스타일을 적용해야할 경우  - 클래스 이름 앞에 반드시 마침표(.)를 붙여야함 - .클래스 이름 { 속성:속성값; 속성:속성값; .... }	.readaccent{   color:red; }  <p class="readaccent">P 태그</p <h2 class="readaccent">h2 태그</h2> => p 태그 중 'readaccent' 클래스 적용 h2 태그 중 'readaccent' 클래서 적용
id 선택자	- 웹 문서 안의 특정 부분에 스타일을 지정할 때 사용 - 마침표(.) 대신 # 기호를 사용 - 클래스 선택자는 여러 번 반복해서 적용할 수 있는 반면,  id 선택자는 클래스 선택자와 달리 문서 안에서 한 번만 적용  - #id이름 {속성:속성값; 속성:속성값; .... }	#mynav{   color:blue; }  => mynav 라는 id를 가진 요소에  글자를 파란색으로 지정
하위 선택자	- 적용 대상을 한정시키려고 할 때 사용하는 선택자  - 하위 선택자는 부모 요소에 포함된 모든 하위 요소에 스타일이 적용  - 상위요소 하위요소{ 속성:속성 값; .... }	section p {   color:blue; } => <section> 태그 안에 있는 모든 <p> 태그의 글자색을 파란색으로 지정
자식 선택자	- 하위 선택자에서는 자식 요소 뿐만 아니라 자식의 자식 요소, 손자 요소까지 적용 - 자식 선택자는 바로 밑의 하위 요소, 자식 요소에만 스타일이 적용 - 부모 요소와 자식 요소를 나란히 써주는데, 두 요소 사이에   >(부등호)를 표시 - 부모요소 > 자식요소 {속성;속성값; ....}	section > p{   color:blue; } => <section> 태그 안에 있는  <p> 요소 중 자식 요소인 <p> 의 글자색만 파란색으로 지정  * 밑의 하위 요소가 있어도   적용되지 않음
인접 형제  선택자	- 문서 구조상 같은 부로를 가진 형제 요소 중 첫 번재 요소에만 스타일이 적용 - 같은 부모 요소를 가지를 요소들을 형제 관계 - 먼저 나오는 요소를 '형 요소', 나중에 나오는 '동생 요소' - 인접 형제 선택자를 정의시 요소1과 요소2 사이에   +(더하기) 를 표시  - 요소1과 요소2는 같은 레벨이면서 요소1 다음에   가장 먼저 나타나는 요소2에 스타일을 적용 - 요소1 + 요소2 {속성:속성값; ....}	h1 + p{   text-decoration: underline; }  => <h1> 태그 다음에 오는  <p> 태그 중 첫 번재 <p> 태그에만  밑줄을 그으라는 것
형제 선택자	- 형제 요소들에 스타일을 정의 - 모든 형제 요소에 다 적용 - 형제 선택자를 정의시 첫 번째 요소와 두 번째 요소 사이에  ~(틸드) 를 표시 - 요소1 ~ 요소2 {속성:속성값; ....}	h1~p{   text-decoration: underline; }  => <h1> 태그 다음에 오는  모든 형제 <p>태그에  밑줄을 그으라는 것
그룹 선택자	- 여러 선택자에 같은 속성을 적용해야 할 경우   똑같은 스타일을 정의하지 않고 한번에 묶어서 정의 - 쉼표로 선택자를 구분 - 예를 들어, h1요소와 h3요소의 글꼴과 글자색이 같을 경우  두 태그의 선택자를 따로 지정할 필요 없이 한번에 선언 - 요소1, 요소2, ... {속성:속성값; .... }	a, p{   color:#ffffff; }  => <a>태그를 사용하는 텍스트와 <p>태그를 사용하는 텍스트 양쪽의 글자색을 흰색으로 지정한 것

속성 선택자

- 태그 안에서 사용하는 속성들의 값에 따라 스타일을 지정

- 속성 값의 조건에 따라 다양한 스타일을 지정할 수 있기 때문에 활용도가 높은 스타일 지정 방식

선택자	내용	형식(예제)
[속성]형식	- 지정한 속성을 가지고 있는 요소를 찾아 스타일을 적용 - '['와 ']' 사이에 찾고자 하는 속성을 지정 - [속성] {속성: 속성값; ....}	a[target]{   background-color:skyblue; }  => <a> 태그로 링크를 건 부분 중  target속성이 있는 링크에  적용할 스타일을 지정
[속성=값]형식	- 주어진 속성과 값이 일치하는 요소를 찾아 스타일을 적용 - [속성 = 값] {속성:속성값; .... }	a[target="_blank"]{   background-color:skyblue; }  => target="_blank" 인 링크, 즉 새창(새탭)으로 열리는 링크에 적용
[속성~=값]형식	- 틸드(~)를 사용하여 [속성 ~= 값] 선택자를 사용시,  비교할 값이 여러 개일 경우 그중 하나만 일치해도   스타일을 적용 - [속성 ~= 값] {속성:속성값; .... }	[class ~= "button"]{   border-radius:10px; }  => class="button" 처럼  값이 정확하게 일치하거나 class="flat button"처럼  여러 속성 값을 공백으로  구분해서 나열해 놓았을  경우에도 적용 그러나 class="flat-button"이나  class="buttons" 처럼 요소의 값이 정확하게 일치하지 않을 때는  적용되지 않음
[속성^=값]형식	- 캐럿(^)이 붙으면 지정한 문자로 시작하는 속성값에   대해서만 스타일을 적용 - [속성 ^= 값] {속성:속성값; .... }	a[href ^= "http://"}{   font-style:italic; }  => <a> 태그로 링크를 건 부분 중에서 href 속성값이 http:// 로 시작하는 링크에 스타일을 적용
[속성$=값]형식	- $기호가 붙으면 지정한 문자로 끝나는 속성에  대해서만 스타일을 적용 - [속성 $= 값] {속성:속성값; .... }	a[href $= ".zip"]{   background:url(zip_icon.gif); } => <a> 태그로 링크를 건 부분 중에서 href 값이 .zip으로 끝나는 링크에  스타일을 적용
[속성|=값]	- 속성이 지정한 값으로 시작하면 스타일을 적용 - 속성 값의 앞부분에 따라 서로 다른 스타일이   적용되도록 할 수 있음 - [속성 |= 값] {속성:속성값; .... }	a[class |= "red] {   background:url(red.jpg); }  => class="red" 처럼 정확하게  속성 값이 일치하거나, class="reg-bg"처럼 지정한 값으로 시작하면서 뒤에 하이픈(-)이  있는 경우에 사용 가능
[속성*=값]	- 사용자가 지정한 속성 값의 앞이나 뒤, 또는 중간 등  어느 위치에 있든지 해당 값이 포함되어 있으면  스타일이 적용 - [속성 *= 값] {속성:속성값; .... }	p[class *= "accent"]{   font-style: italic; }  => <p> 태그의 class 이름 중 accent가 들어가 있는 곳에 스타일을 정의한 것