2020.09.08

father children {}
특정 요소 지정해서 스타일 바꿀 수 있다

div>span(1)
     >p>span(2)
인 경우
div    span - span(1), span(2) 둘 다 바뀜
div > span - div 바로 밑의 span(1)만 바뀜
p    span - p 밑의 span(2)만 바뀜

div>p>span(a)
     >span(b)
p + span - p 다음에 오는 span(b)만 바뀜
span먼저있고 p 오는 경우엔 바뀌지 않음
바로 다음에 와야 적용됨(중간에 다른것 있어도 안됨)
p ~ span - 바로 뒤에 오지 않는 span


attribute selector
input:required {}
와 같이 required attribute를 가진 태그의 속성을 바꿀 수 있다
input[type="password"] - type="password"인 태그
input[placeholder~="name"] - placeholder에 name이 들어간 태그

*class를 지정할 필요 없이 지정할 수 있다
a[href*="logo"] - 'logo' 을 포함한 경우(logo-sample도 가능)
a[class~="logo"] - 여러 class중 'logo'를 가지고 있는 경우(exactly)
a[class="logo"] - 'logo' class만 가지고 있는 경우

 

*form의 placeholder와 같이 공백을 가진 값을 만들 수 있는 경우
first name, last name, name
이 있는 경우
placeholder*="name"
placeholder~="name" 은 셋 다 적용됨
palceholder="name" 은 마지막 name에만 적용됨

 

 

states

pseudo-classes :

:active 
클릭하는 순간
:hover 
마우스 올리면
:focus
tab으로 선택하거나 자판으로 입력할 경우
:focus-whitin
하위항목 focus경우 변함, 부모: 해야함
:visited 
링크 방문 후 바뀜

*state를 바꾸면 default조건에서 바뀜 -> 다시 설정해줘야함
*여러 조건을 동시에 만족하는 경우로 조합할 수 있다
form:hover input:focus - 마우스가 form위에, input focus된경우 모두 충족해야함, input의 속성 바꿈(form안에 input 이 있어야함)

Pseudo-elements ::

:: placeholder
 placeholder의 특성만 바꾸고 싶을 때
:: selection 
 클릭해서 긁을 때
:: first-letter
 첫 글자에만 적용됩니다.
::first-line
 첫 줄에만 작용합니다.


Colrors

1. hex code
2. rgb(red, green, blue)
3. rgba(--- alpha/transparent/1~0)


Variable(custom properties)

:root { --main-color: blue;}
(공백허용X)
사용할 때 var(--main-color);
여러곳에서 한 가지 값을 사용할 때 편리하다
변경시 하나만 고치면됨