[학습일지]JAVA교육일지 7일차

5장 CSS 선택자 사용하기

 

5.1) 기본 선택자

 

5.1.1 전체 선택자 : *{/* css 코드 */}

​

5.1.2 태그 선택자 : 태그명{/* css 코드 */}

​

5.1.3 아이디 선택자 : #id속성값{/* css 코드 */}

​

5.1.4 클래스 선택자 : .class속성값{/* css 코드 */}

​

5.1.5 기본 속성 선택자 : 태그 or ＃id값 or .class값 or 생략[속성]{/* css 코드 */}

태그 or ＃id값 or .class값 or 생략[속성]{/* css 코드 */}

ex) a 태그에 href 속성이 사용 된 요소만 선택하여 적용 <style> a[href] { color: red; display: block; } </style> (중략) <a href="#">기본 a 태그</a> <a href="#" target="_blank">새 창으로 열리는 a 태그</a>

 

※ 속성 선택자는 다른 선택자와 함꼐 사용 가능

​

5.1.6 문자열 속성 선택자 : 태그가 가진 속성값이 특정한 문자열과 일치하는 요소를 선택자로 지정, 많이 사용X

​

​

5.2) 조합 선택자

​

5.2.1 그룹 선택자 : 여러 선택자를 하나로 그룹지을 때 사용, 선택자와 선택자는 콤마( , )로 구분

​

선택자1, 선택자2, ... 선택자n {/* css 코드 */}

​

5.2.2 자식 선택자 : 부모요소의 하위에 있는 자식요소 선택

​

부모 선택자 > 자식 선택자 {/* css 코드 */}

ex) .box > p { } ← class 속성값이 box인 요소의 자식관계에 있는 p태그

​

5.2.3 하위 선택자 : 특정 부모 요소의 하위 요소로 한정해서 선택, 2개이상의 선택자 사용, 선택자와 선택자는 공백으로 구분

​

선택자1 선택자2 ... {/* css 코드 */}

​

5.2.4 인접 형제 선택자 : 앞에서 지정한 선택자 요소 바로 다음에 있는 형제 관계 요소를 선택, 2개이상의 선택자 사용, 선택자와 선택자는 +로 구분, 이전 선택자 요소 보다 먼저 등장한 요소는 선택 대상이 아님

​

이전 선택자 + 대상 선택자 {/* css 코드 */}

<style> h1 + h2 {color: rebeccapurple;} </style> (중략) <h1>내용1</h1> <h2>내용2</h2> ← h1태그와 형제관계이며 인접한 h2태그에만 적용 <h2>내용2</h2>

​

5.2.5 일반 형제 선택자 : 이전 선택자 뒤에 오는 형제 관계 요소를 모두 선택자로 지정, 선택자와 선택자는 ~로 구분

​

이전 선택자 ~ 대상 선택자 {/* css 코드 */}

<style> h1 ~ h2 {color: rebeccapurple;} </style> (중략) <h1>내용1</h1> <h2>내용2</h2> ← 이전 요소 다음에 오는 대상 요소가 형제관계면 적용 <h2>내용2</h2> ←

​

5.3) 가상 요소 선택자​​

마치 존재하는 것처럼 취급해 선택하는 선택자 지정 방법

::(콜론2개)를 붙여서 사용

기준선택자와 함께 사용, 생략시 전체 선택자가 들어간 것으로 적용

​

기준선택자::가상 요소 선택자 {/* css 코드 */}

​

※자주 사용하는 가상요소 선택자

::before	콘텐츠 앞의 공간을 선택
::after	콘텐츠 뒤의 공간을 선택

​

※content 속성 - ::before 와 ::after 선택자에서만 사용하는 속성, 새로운 콘텐츠를 만들거나 추가

 

<style> p::before{ content:"<before>"; } p::after{ content:"<after>"; } </style> (중략) <p>Lorem, ipsum dolor.</p>

p태그의 콘텐츠 앞과 뒤에 마치 어떤 요소가 있는 것처럼 선택

여기에 content 속성으로 새로운 텍스트 추가

​

​

5.4) 가상 클래스 선택자

요소의 상태를 이용해 선택자 지정

​

기준 요소:가상 클래스 선택자 ​{/* css 코드 */}

​

5.4.1 링크 가상 클래스 선택자

:link	한 번도 방문하지 않은 링크일 때 선택
:visit	한 번이라도 방문한 적이 있는 링크일 때 선택

​

5.4.2 동적 가상 클래스 선택자

:hover	요소에 마우스를 올리면 해당 태그가 선택자로 지정됨
:active	요소를 마우스로 클릭하고 있는 동안 해당 태그가 선택자로 지정됨

​

5.4.3 입력 요소 가상 클래스 선택자

:focus	입력 요소에 커서가 활성화되면 선택자로 지정
:checked	체크박스가 표시되어 있으면 선택자로 지정
:disabled	상호작용 요소가 비활성되면(disabled 속성이 사용되면) 선택자로 지정
:enabled	상호작용 요소가 활성화되면(:disabled 속성이 사용되지 않았으면)선택자로 지정

​

5.4.4 구조적 가상 클래스 선택자

E:first-child	E 요소의 첫번째 자식 요소를 선택자로 지정
E:last-child	E 요소의 마지막 자식 요소를 선택자로 지정
E:nth-child(n)	E 요소가 부모 요소의 자식 요소 중 n번째 순서가 맞으면 선택
E:nth-last-child(n)	E 요소가 부모 요소의 자식 요소 중 마지막에서 n번째 순서가 맞으면 선택
E:nth-of-type(n)	부모 요소의 자식 요소 중 n번째로 등장하는 E 요소 선택
E:nth-last-of-type(n)	부모 요소의 자식 요소 중 마지막에서 n번째로 등장하는 E 요소 선택
E:first-of-type	부모 요소의 자식 요소 중 첫 번째로 등장하는 E 요소 선택
E:last-of-type	부모 요소의 자식 요소 중 마지막으로 등장하는 E 요소 선택

​

5.5) 다양한 선택자 조합하기

선택자의 목적은 스타일을 지정할 대상 요소를 선택하는 것

선택자는 서로 조합해서 사용 할 수 있음