본문 바로가기
지속가능티끌/웹,워드프레스

CSS 선택자 활용정보 요약.

by 리치굿맨 2014. 10. 29.

 

 

 

 

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.

 

태그

,

댓글0


   
현물 |선물 인버스 |선물 USDT     현물 | 선물 USDT |봇제작툴/카피트레이딩     현물 |선물 인버스 |선물 USDT     선물 인버스 |선물 USDT