CSS 선택자 활용정보 요약.

 

 

	CSS 의 Selector (선택자) 활용 정보 요약.
	선택자 대표 적인것.    타입 선택자 (Type Selector) 아이디 선택자 (ID Selector) 클래스  선택자 (Class Selector) 전체 선택자 (Univeral Selector)   위 선택자외 모든 선택자 보기 -> http://igotit.tistory.com/167   3종의 선택자 각각을 살펴본다.    타입 선택자     html 요소를 CCS 구문의 선택자로 기록한다.  예: html 에 <p></p> 가 있고, 이를 CSS에서 이 부분을 설정하고 싶다면,  P{color : red;}    아이디 선택자 html에서 <p id="id1">타이틀: 잘먹고 잘사는법 </p> 처럼 id="" 으로 지정된 것을 CSS 구문의 선택자로 기록한다. 아이디 선택자기록시 #을 앞에 부착한다. 즉,   #id1{color : red;}   일반 html 의 태그를 이용하여 css적용시키면 모든 <p></p> 태그에 적용되나, id 선택자는 세분화 하여 제어할 수 있음.  1개의 html 파일내에 아이디 중복사용 불가.   클래스선택자  html 측에  <p class ="cls1"> </div> 로 작성하고,  css 구문에서는 앞에 .을 찍어준다. 즉,  .cls1{속성: 값;}  1개의 html 파일 내에 클래스이름 중복지정 가능. 동일 클래스는 동일하게 css적용됨.    전체선택자. * html 의 특정 대상을 지정하는 것이 아니며, *{color: red;} 로 하면 모든 글자가 빨간색적용됨.   선택자 형식별 적용되는 우선순위  1. 아이디 선택자. 2. 클래스선택자. 3. 타입선택자.   동일 형식인 경우에는 나중에 지정된 것이 웹상에서 보이게 됨.    CSS 선택자 조합. html에서 아래같이 cls1이라는 것이 있다하자.   <h1 class="cls1"> .. </h1> <p class="cls1"> .. </p>   위와 같은 상태에서 .cls1{속성: 값;}  에 의하면 h1, p 모두에 적용되는데, p에만 적용시키고 싶다면, p.cls1{속성: 값;} 선택자에 콤마로 선택자들을 모두 나열하게 되면 해당 선택자 모두에 적용됨. 예 : .cls1, id1, h1{속성: 값;}   자손 선택. 구문 : E F{속성: 값;} 의미 : E의 자손 F(E에 포함된 F) 의 속성을 값으로 설정한다.   자식 선택. 구문 : E > F{속성:값;} 의미 : E의 자식 F(E에 1차 포함된 F)의 속성을 값으로 설정한다.   자식제외 자손선택. 구문 : E * F{속성:값;} 의미 : E의 자식은 제외한 자손F 의 속성을 값으로 설정한다.   링크, 마우스 관련 선택자.   방문전 링크. 구문 : a:link{속성: 값;} 의미 : a요소 를 사용자가 클릭하지 않은 경우 a요소의 속성을 값으로 설정한다.   방문한 링크. 구문 : a:visited{속성: 값;} 의미 : a요소를 사용자가 이미 클릭한 경우 a요소의 속성을 값으로 설정한다.   마우스를 요소위에 올린것. 구문 : E:hover{속성:값;} 의미 : E에 마우스가 있는 경우 E요소의 속성을 값으로 설정한다.   마우스를 클릭 할때. 구문 : E:active{속성:값;} 의미 : E를 마우스로 클릭한 경우 E요소의 속성을 값으로 설정한다.   적용순서. link -> visited -> hover -> active     그외 세부적인 선택자 활용정보는  실전 구현작업 진행하다보면 자연스레 익힐 수밖에 없으므로 처음부터 다 섭렵할 필요 없음.

 

 

166.