[Html,Css] - 의사 요소, 의사 클래스, 선택자 -- 추후 수정

의사(가상) 요소  - ( pseudo element)

• 선택자에 추가하는 키워드
• 선택한 요소의 일부분에만 스타일을 입힐수 있다
• 예시 ) ::first-line ,

 :: placeholder ….

• :: placeholder - Placeholer 를 스타일하고싶을때

• :: selection - 드래그
• :: first-letter 

 

• 의사(가상) 클래스 ( pseudo selectors)  - States

• 선택자에 추가하는 키워드
• 의사 요소와 달리 요소의 특정 상태에 스타일 적용할 때
• 예시 ): hover , : focus , : active , :visited 등등 ….
• 필수 입력 대상이 아닌(required) input 요소를 선택자로 사용한다.

 

• 셀렉터  (combinator)

• P span : p안의 자식들
• P > span : p 바로 아래 자식
• P + span : p 바로 다음에 오는 형제 span
• P ~ span : 형제와 형제 관계 , 꼭 바로 뒤에 올 필요없다.

 

 

• 속성 선택자 ( Attribute Selector)

: 속성 선택자는 특정 속성을 갖고 있거나 특정 속성이 특정 값 등을 갖고 있는 요소

 

 

• 컬러!!!
• 16진수
• Rgb 방식

 

• :root
• Css 변수 선언 (custon property ) 변수 (variable)

<style>
:root {
	--main-color : red;
}
p{
	background-color : var(—-main-color );
}
</style>

• Css custom properties