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.
'지속가능티끌 > 웹,워드프레스' 카테고리의 다른 글
워드프레스 테마 만들기 8편. 검색창 템플릿 searchform.php 추가하기. (0) | 2014.10.30 |
---|---|
CSS 파일 만들기. (0) | 2014.10.29 |
CSS Property(속성) 전체 리스트. (0) | 2014.10.29 |
CSS Selector(선택자) 전체 리스트. (0) | 2014.10.29 |
css (cascading style sheets) 요점 정리 및 활용시 필요한 상세정보 있는 곳. (0) | 2014.10.29 |
댓글