CSS 복습 2

Active,hover,focus,focus-within,visited

 

Active - 해당 요소를 마우스로 클릭했을 때 효과를 적용시킨다.

 

hover-   마우스가 해당 요소 위를 지나갈 때 효과를 적용한다 .

 

focus- 키보드로 선택되었을 떄 효과를 적용한다.

focus-within 부모 요소에게 적용한다. 자신의 자식 요소 중 하나가 focused 되었을 때 효과를 적용한다.

 

visted 방문한 사이트일 경우에 효과를 적용한다.

 

placeholder= placeholder를 직접 꾸밀 수 있게 해준다, (조건을 적용하는 : 과 차이)

selection= 드래그해서 블럭했을 때 꾸밀 수 있다!

firstletter = 첫 문자만 꾸민다.

firstline= 첫 번째 줄만 꾸민다.

 

Color

color는 css에서 너무 중요하다 .

 

css에서 알아야할 color system

1) hexadecimal color (16진수 컬러)

#000000< 

크롬 - 칼라 픽커로 따올 수 있음!

2)RGB 방식 

-이건 디자이너들이 많이 쓰는 방식으로 

ex) rgb (252,202,0); 이런식으로 쓰인다

rgba(205,23,0,0.5);   4번째는 투명도를 뜻한다.

 

 

Variable (cusom properties)

 

variable도 css에 있어서 정말 중요하다 css를 프로그래밍언어처럼 보여준다

 

:root 라는 요소에 추가한다.

:root는 기본적으로 모든 document의 출발점이 된다. 변수 이름을 쓰고

--main-color 라고 변수 이름을 주고 이것을 document의 root에 저장하는 것이다.

--를 써주고 변수이름을 써줘야 한다! 빈곤강은 - 로 채워야하고 이것을 컬러만 저장할 수 있는게 아니다

ex)

변수이름을 주고 css 색깔을 지정해줌