[8일차 - 1] state, pseudo element, color system, custom property

8일차 - 1

 

이전까지 스타일을 할 대상을 가리키는 여러 종류의 selector를 공부했고 마지막으로 state 에 관한 것을 배웠다.

 

state

 

state를 직역한 '상태'란 뜻 그대로 state를 이용하여 태그의 상태를 감지하여 스타일을 할 수 있다. 

바로 이전 차수에서 공부했던 pseudo selector (pseudo-class) 가 바로 이 HTML element의 state를 감지하여 스타일을 바꾸는 것이다.

 

예를 들자면

:hover라는 것이 있다.

이건 해당 element에 커서를 갖다대게 되면 해당 스타일이 적용된다.

 

:focus라는 것도 있는데, input과 같은 form 태그에 사용할 수 있으며 input 태그의 경우로 예를 들면 input field를 클릭했을 때 해당 스타일이 적용된다.

 

부모의 state로 자식의 스타일을 바꿀수 도 있는 데, 이전에 combinations의 사용방법과 동일하다.

form:hover input {
	background-color : red;
}

자식 element 인 form 에 커서를 갖다댔을 때 자식 element인 input의 스타일을 바꾸겠다는 것이다.

위와 같이 작성한다면

<form>
    <input/>
    <input/>
    <input/>
</form>

위에서 세개의 input 모두 배경색이 빨간색으로 바뀔 것이다.

 

반대로 자식의 state로 부모의 스타일을 바꿀수도 있다.

예를 들어 focus-within 이라는 것이 있는데, 

<form>
    <input/>
    <input/>
    <input/>
</form>

위와 같이 HTML이 위와 같고, 

form:focus-within {
	background-color : red;
}

CSS가 위와 같다면, form element의 자식 element인 input의 field를 클릭하면, 부모 element인 form의 배경색이 바뀌게 된다.

 

이처럼 state를 활용해 여러 element를 연계하여 사용할 수 있다.

 

 

 

pseduo element

 

pseudo element는 역시 pseudo selector의 기능을 하지만 정확한 행동이나 state에 대응하게 스타일을 적용하지 않는다. 그러니까 특정하게 선택된 element를 가리키지 않는다. 사용법은 기존 pseudo selector와 다르게 ::을 붙인다.

 (:하나 더붙인다). 예를들어 ::placeholder라는 것이 있다. 이 pseudo element를 사용하면 input 태그의 placeholder의 스타일을 바꿀 수 있다. 또다른 예로들어 ::first-letter 라는 것이 있다.

p::first-letter {
	font-size : 100px;
}

위와 같이 CSS를 작성하면 <p> 태그 내의 text중 첫번째 문자의 폰트 크기는 100px이 된다.

 

 

color system

 

CSS를 작성할때 color가 매우 중요하다고 한다. 이 color를 지정할 때 사용하는 방법은 세가지가 있다.

 

1. hexadecimal color (16진수)

#FFFFFF 와 같이 쓴다.

 

2. RGB 방식

rgb(0, 0, 0) 와 같이 쓴다.

 

3. RGBa 방식

여기서 a는 투명도(opacity)를 나타낸다. 0으로 가까워질수록 투명하며 1로가까워질수록 본래의 색과 가까워 진다.

 

 

 

custom property

 

같은 색을 여러번 사용하고 싶을 때나, 웹사이트의 메인 컬러를 지정하고 싶을 때 등 재사용성을 높여주는 CSS라고 한다. 본래 이름은 custom property 이나 니꼴라스는 변수라고 부르는 게 더 좋다고 한다. 아무래도 사용할 때 var을 써서 그런것 같다. 사용법은

 

1. document의 뿌리가 되는 :root를 지정해주고 

2. --변수 (사이에 공간이 있다면 -를 넣어줘야함) 와 같은 형식으로 property를 만든다.

3. 사용할 때는 var(변수)와 같은 형태로 사용한다.

 

예를 들어 내 웹사이트의 메인 색상을 노란색으로 하고 여러 태그에 사용하고 싶다면

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

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

div {
	color : var(--main-color);
}

위와 같이 재사용이 가능하다. 만일 나중에 마음이 바뀌어 파란색으로 바꾸고 싶다면, :root의 property인 --main-color를 blue로 바꾸기만 해주면 끝이다.