CSS / relative, absolute, Pseudo Selectors

CSS Styles 속성

 

position: relative 

position: absolute 

 

부모를 position: relative 설정하지 않으면

자식 position은 body를 기준으로 설정되며, 부모가 relative 속성일경우 

부모 contents안에서 활성화 된다.

 

:first-child : 배열의 첫번째 식별자

:last-child : 배열의 마지막 식별자

 

:nth-child(odd) or :nth-child(2n+1)

-> html table의 홀수열을 지정

:nth-child(even) or :nth-child(2n)

-> html table의 홀수열을 지정

:nth-child(7n)

Represents the seventh and all following elements: 7 [=0+7], 8 [=1+7], 9 [=2+7], etc.

7 [=0+7], 8[=1+7], 9[=2+7]

 

n은 index 0부터 시작하며 적용되는 배열의 순번은 length와 같이 실제 길이처럼 적용된다.

 

p > span: p의 바로 자식속성 적용

p + span: p 다음 속성의 span에 적용

p ~ span: +가 바로 다음 속성이라면 ~는 p 다음에 찾아지는 span 속성이다.

 

아래는 form 속성안에 input 의 placeholder 를 이용하여 CSS 적용하는 코드이며,

여기서 placeholder 뒤에 "~"를 붙여 input[placeholder~="name"] 을 작성하여 "name"이 들어가는 모든 placeholder을 pink색으로 변경되도록 코드를 쓸 수 있다. 즉 attr(~)= "abc"는  abc를 포함하는 attr의 속성을 모두 적용시켜준다.

input[placeholder~="name"] {
        background-color: pink;
      }

states

p:hover {} 마우스 커서가 위에 있을때

p:focus 엘리먼트가 focus되어 있을때 (키보드 tap으로 이동할때)

p:visited 링크에 적용되는 것으로 방문된 링크에 적용

p:focus-within 해당 state는 focus상태인 자식을 가진 부모 엘리먼트에 적용, 다른 것고 합쳐서 응용이 가능하다.

(form이 hover상태이고 input 이 fucous이면 바뀌도록, ex) from:hover input:focus {} )

 

이런 것들은 모두 다 기억하는 것보다 이해하는 것이 훨씬 더 중요하다.

 

---

:root 는 document에 기본 속성을 적용하는 방법이다.

:root {
  --main-color: red;
}

위와 같이 main 기본 컬러를 red로 설정하면

나머지 적용하고자 하는 변수에 아래와 같이 "var"를 이용해서 적용해주면 된다.

p {
	background-color: var(--main-color)
}