- 태그 선택자 (2가지 이상 태그에 동일 스타일 적용)
태그 선택자는 태그를 지정하고 지정 태그 전체에 속성값을 적용하는 선택자입니다
2가지 이상의 태그에 속성값을 모두 주고 싶다면 ?
기본 문법
A , B { 속성 : 속성값 }
- 자손 선택자 (descendant selector)
기본 문법은
A공백B { 속성 : 속성값 }자손 선택자는 A태그 안에 소속된 모든 B태그에 속성값을 줄때 사용한다
아래 사잔을 참고하자
- 자식 선택자(child selector)
기본 문법
A > B { 속성 : 속성값 }자식 선택자는 A > B로 A태그 안에 있는 B태그에 속성값을 적용한다
아래 사진을 참고하자
자손 선택자와 자식 선택자는 설명만보면 비슷하기 때문에 헷갈릴수 있다
위 사진을 비교해서 보자면
자손 선택자는 div태그에 들어있는 모든 p태그를 지정하고
자식 선택자는 div태그에 들어있지만 안에서 다른 태그로 묶인 태그들은 지정하지 않는다
- 인접형제 선택자 (adjacent sibling selector)
기본 문법
A + B {속성 : 속성값 }인접형제 선택자는 A태그 바로 뒤에오는 B태그에 속성값을 주는 선택자이다
아래 사진을 참고하자
사진을보면 div+p로 인접형제 선택자를 지정했고
body안에 있는 div태그 바로 뒤에오는 p 태그에 속성값이 들어갔다
- 형제 선택자 (sibling selector)
기본 문법
A ~ B { 속성 : 속성값 }형제 선택자는 A태그 뒤에 오는 모든 B태그에 속성값을 지정하는 선택자이다
아래 사진을 참고하자
사진을보면 body 안에 있는 div태그 뒤에 오는 p태그에 속성값이 들어간걸 알 수 있다
하지만 main 태그 안에있는 p태그는 선택되지 않는데
이부분에 주의하며 사용을 해야한다
- 태그 class 선택자
기본 문법
A.class { 속성 : 속성값 }
A 태그에 해당 class가 붙어 있다면 속성값을 적용한다
아래 사진을 참고하자
사진에서는 p태그이고class1인것에 속성값을 넣어준다
전날에는 .class만 사용하였기 때문에 이렇게도 한번 사용해 보았다
- 가상 선택자 (pseudo selector)
기본 문법
A : B { 속성:속성값 }hover이라는 가상 선택자를 B자리에 넣어 사용했다고 가정했을때
A태그에 마우스가 올라가면 hover을 적용한다
아래 사진을 참고하자
가상 선택자 hover는 마우스가 올라갔을 경우 속성값을 넣어준다
a태그의 글자색은 레드고 배경은 블랙이지만
아래 가상 선택자를 사용해 링크부분에 마우스가 올라가면 색이 변하는것을 확인 할 수 있다
- 자투리 - 마우스 올리면 보여주기
가상 선택자와 자손 선택자를 사용해 텍스트를 감추고 보여주는 스타일을 추가해보자
먼저 가상 선택자를 사용해 마우스가 div태그 위쪽으로 올라가면 속성값이 들어가게 하였다
이후 자손 선택자를 사용해 p태그가 속성 display에 속성값 none을 사용해 보이지 않게 만들고
다시 hover을 이용하여 div에 마우스를 올리면 해당 자손에 대해
속성 display의 값 block으로 변경하게 만들었다 이렇게하면 none으로 보이지 않던 p태그가
block 요소로 보여지게 된다
