💬 전역 선택자 ◾ 전체에 적용하기 위한 선택자 ◾ * 를 이용한다 ex) 문서 내의 모든 곳에 굴림체 글꼴 적용 : *{font-face:"굴림체";}
💬 태그 선택자 ◾ html 태그 이름 사용 ◾ 태그가 가지고 있는 기본 스타일 지정, 스타일시트에 의한 스타일 적용
💬 그룹 선택자 ◾ 선택자를 , 로 분리하여 선언하면 여러 개 선택자에 하나의 스타일 적용 ex) 헤더 태그에 색상을 blue로 변경 : h1, h2, h3, h4, h5, h6 {color:blue;}
💬 내포 선택자 ◾ 요소가 내포 관계에 있을 때 적용 ◾ 선택자와 선택자 사이를 공백으로 띄우고 나열 ex) <p> 태그 안에 <strong>태그가 올 경우 파란색으로 지정 : p strong{color:red;}
💬 인접 선택자 ◾ 선택자와 선택자 사이에 +를 표시 ◾ 앞의 선택자와 가장 가까이 있는 뒤의 선택자에 스타일 적용 ex) <div> 태그와 가장 가까이 있는 인접 태그에 적용 : div + p {color:blue;}
💬 형제 선택자 ◾ 선택자와 선택자 사이에 ~를 표시 ◾ prev 요소 뒤에 나오는 부모가 같은 형제 요소를 모두 찾음
💬 자식 선택자 ◾ 선택자와 선택자 사이에 > 표시 ◾ 부모자식간의 관계에서 스타일 적용 ◾ DOM을 두 단계 이상 건너뛴 관계에서는 자식 선택자가 작동하지 않음 ex) <div>안의 <p>태그에 blue색상 적용 : div > p {color:blue;}
💬 클래스 선택자 ◾ 같은 HTML 요소에 서로 다른 스타일 정의할 때 사용 ◾ 선택자 이름 앞에 . 를 이용하여 선언 ◾ HTML 문서에서 class 속성의 값과 일치하는 요소 선택 ex) class 이름이 "right"인 클래스를 오른쪽 정렬 : <p class=right"> p.right {text-align; right}
💬 아이디 선택자 ◾ #으로 정의한다. ◾ HTML 문서에서 id 속성의 값과 일치하는 요소를 선택 ex) id값이 "blue"인 모든 HTML 요소의 색을 파란색으로 한다. #blue {color:blue} <p> 태그들 중 id값이 "para1"인 경우 스타일 정의 p#para1 {text-align:center; color:red}
⭐ HTML5에서 id 속성과 class 속성은 모든 태그에서 사용할 수 있다.
💬 속성 선택자 ◾ [와 ] 사이에 속성의 이름과 값을 지정 ◾ 특정한 속성을 갖는 요소에만 스타일 적용 ex) <input> 태그에서 type 속성의 값이 "text"일 때만 스타일 지정 input[type="text"] {background-color:blue} ◾ 태그[속성~="값"] - 속성값 중 공백으로 분리된 단어가 포함되어 있는지 체크 ◾ 태그[속성^="값"] - 속성값 중 시작 부분 문자 체크 ◾ 태그[속성$="값"] - 속성값 중 끝 부분 문자 체크 ◾ 태그[속성*="값"] - 속성값 전체에서 어느 하나라도 매치되는 부분이 있는지 체크
💬 의사 선택자 ◾ :으로 시작하며 요소의 상태에 따라 다르게 적용되는 선택자 ex) selector:pseudo-class {property:value}
댓글