[css] 선택자의 종류 자세히 알아보자!!
HTML 문서의 특정 영역이나 요소 등을 선택해줄 수 있는 장치가 필요하다
요것을 CSS에서는 선택자라고 부른다
뭘 가리키는 지 알아야 가져오지
용어 | 내용 |
태그 선택자 tag selecter | HTML 태그에 속성 적용 |
클래스 선택자 class | .로 시작하는 선택자 |
아이디 선택자 id | #으로 시작 |
종속 선택자 dependant | 선택자에 종속된 선택자 |
하위 선택자 descendant | 선택자 내부의 모든 후손 선택자 |
전체 선택자 universal | 전체 문서에 영향을 줌 |
그룹 선택자 group | 여러 선택지를 복합적으로 적용할 때 |
자식 선택자 child | 선택자 바로 밑의 자식 선택자 |
인접 선택자 adjacent | 붙어있는 선택자와 선택자에 특정 효과 줄 때 사용 |
가상(수도)선택자 psudo-classes |
단독으로 사용하지 않고 특정 태그 선택자와 같이 사용 |
속성 선택자 attribute | HTML, 태그의 특정 속성에 대해서 효과 줄 때 사용 |
형제자매 선택자 sibling | 형제자매 관계에 있는 선택자에 속성 적용 |
뭐 많은데 실무에선 태그 선택자, 클래스 선택자, 하위 선택자, 그룹 선택자 정도라고 한다
그래도 힘들게 만들었는데 알아봐 주자
패밀리 트리라고 하는데 부모 태그 안에 자식 태그 들이 들어있다고 이해하면 된다
이런 구조의 태그 들이 있다고 하자
그림판 치곤 잘그렸다
하위선택자
article section ul {color:red;}
로 쳤을 경우 article 밑의 section 밑의 ul 전체에 color: red 가 적용 된다
자식 선택자
article > section ul{color: red}
> 로 적용해 주면 article의 바로 아래 '자식'에게 적용 된다
인접 선택자
h1+section+section h2 {
color: blue;
font-size: 40px;
}
아래의 분홍색 친구들은 형제 자매 관계다 부모가같고 붙어있기 때문이다
h1 옆에 section 옆에 section 의 h2를 선택해서 css를 부여 해줬다
+ 를 사용한다
형제자매 선택자
<article> ... </article>
<article> ... </article>
<div class="main"> </div>
<article> ... </article>
요런 태그들이 있다고 하자 이 친구들은 부모가 같다
첫번째 article 말고 두번째 세번째에만 css를 적용 하고 싶다
다음과 같이 써주자
article ~ article h2 {
color: white;
}
E ~ F {
속성: 속성값;
}
의 형태에서 E를 제외하고 그뒤에오는 article들에 적용이 된다
태그 선택자
말그대로 태그만 선택자로 사용한다, 사이트의 큰 구조를 잡을 때는 문제가 없다
하지만 정교한 디자인 할 수는 없다
클래스 선택자
태그 선택자가 HTML 태그에 속성을 부여한다면 클래스 선택자는 직접 이름을 지정하여 속성을 지정한다
반드시 . 으로 시작한다
.abcde {
속성: 속성값;
}
html 에서는 다음과 같이 정의한다
<div class="abcde"> .. </div>
아이디 선택자
자바스크립트와 연동되어 웹 프로그램에서 사용되는 선택자
클래스 선택자와 달리 단 한번만 사용할수 있다 //차이점
#을 사용한다
#idname {
속성: 속성값;
}
<div id="idname"> .. </div>
종속 선택자
말 그대로 하나의 선택자에 종속 되었따
종속이란 "태그 선택자 내부에 또 다시 클래스 선택자 or 아이디 선택자가 포함 되어 있는경우"
<h1 class="logo"> ... </h1>
걍 이런거다
전체 선택자
* {
속성: 속성값
}
선택자 전체에 영향을 미친다
p * {
속성: 속성값
}
p 태그 밑에 모든 하위 선택자 영향 미침
그룹 선택자
속성이 같은 선택자 그룹으로 묶어서 사용한다
.classname, #idname, tagname {
속성: 속성값
}
수도 선택자-가상 선택자
단독으로 사용할 수 없는 선택자, 주로 태그 선택자와 더불어 사용된다
형식 | 역할 |
:hover | 마우스 커서가 링크에 올라가 있는 상태 |
:active | 마우스 커서를 클릭한 순간부터 놓기 직전까지 |
:link | 링크 클릭하지 않는 그냥 링크되어 있는 상태 |
:visited | 링크를 눌러서 방문한 후 |
:focus | 입력 폼에서 키보드의 입력 기다리는 상태 |
:first-line | 첫 번째 문장에만 적용 |
:first-letter | 문장의 첫 글자에만 적용 |
:before | 문장이 시작되기 전 |
:after | 문장이 끝난 다음 |
:lang | 언어별로 속성을 적용해 줄 수 있음 |
요개 뭐냐면 첫번째에 있는 :hover을 사용해보자
다음과 같은 html 태그가 있다
<div> 글자글자글자 </div>
div :hover{
color: red;
}
라고 css를 주면 마우스를 올렸을때 코드가 동작하며 글자가 빨간색으로 바뀐다
신기하다
위의 표는 css1, css2에서 가능한 내용이고 더 많은 것은 알아서 알아보자 !
맨날천날 react할때 className 만 박아 넣었는데
다양한 선택자 들이 있음을 알았다
이제 코드를 간결하게 만들기위해 선택자들을 사용해야겟다!!!!
참조: '백견불여일타 HTML5&CSS'