학습 한 내용

reset.css 와 normalize.css 그리고 css 변수에 대해 알아 보았다.

https://meyerweb.com/eric/tools/css/reset/사이트에 이미 정리되어있는 reset 코드를 전부 복사해서 reset.css에 붙혀넣기를 했더니 html에 사용되는 모든 코드가 정리되어있고 초기화 작업이 되어있다 그래서 html에 link태그에 reset.css까지 적용 시킨 후 사용 하고 있다 여기서 중요한 부분이 있다

여기서 보면 link 태그의 순서가 reset이 먼저 작성 되고 그 이후에 style이 있는것을 볼 수 있다. 매우 중요한 포인트이다
예를 들어 css 코드에 h1태그 백그라운드 컬러를 블루를 주고 그 밑에 h1태그를 하나더 만들어서 백그라운드 컬러를 레드를 주면 나중에 작성되는 h1태그의 우선순위가 높다보니 백그라운드 컬러가 블루가 아닌 레드를 가지게 된다 이 처럼 우선순위를 이용한 것인데 reset이 포함된 link태그를 먼저 작성해 줌으로써 초기화는 되있지만 style 태그에 초기화된 코드에 속성값을 주면 style에 적힌 속성만큼 변하게 되는 것이다.

https://necolas.github.io/normalize.css/ 노멀라이즈 css이다
노멀라이즈 css는 reset과 달리 디자인을 입혀준다 reset은 완전 초기화 작업이라면 노멀라이즈는 디자인이 들어가 있다 즉 사용 하는 이유는 브라우저 마다 기본적으로 들어가는 css 디자인이 다른데 각각의 css디자인에 오차를 줄이고 버그를 줄이는 방향으로 style을 재 정의 할때 사용된다 즉 reset과는 달리 완전 초기화는 아니고 브라우저간의 오차를 줄일 때 사용하는 것이다

박스가 변수라고 할 때 애플이 값이 되면서 벨류가 된다. 박스에 박스라는 이름을 지어줬는데 그 이름 자체를 박스명이라고 부른다. 이과생은 어느정도 이해할 거라 생각한다
변수가 css에 예전엔 없었지만 최근에 생긴것인데 익스플로어에서는 거의 지원을 하지 않는다고 한다 이전에 트위치 카피켓을 할 때 font에 size가 아닌 font-base같은 정확한 수치를 알 수 없는 코드들이 상당히 많았다

이와 같이 --black 등을 변수라고 하고 그 뒤에 나온 값을 데이터 라고 한다.

활용할 땐 기존에 사용했던 #000000 등을 사용 하는 것이 아니라 var() 를 만들고 소괄호 안에 변수를 적어주는 것이다.

변수를 사용하는 이유는 트위치 같은 경우 자주색이 거의 랜드마크 인 수준인데 거기서 변화를 주고자 자주색에서 노란색으로 바꾼다고 한다면 변수에 지정된 데이터값만 노란색으로 바꿔주기만 하면 이때 까지 작성된 컬러의 변수값이 전부 노란색으로 바뀌기 때문에 사용 한다고 한다.

변수를 지정할 때 :root를 사용해서 모든 영역에서 사용하게 할 수 도 있지만
예를들어
intro 안에서 변수를 지정해 주면은 모든 영역이 아닌 intro에서만 적용이 된다 이 처럼 intro 에서 지정된 변수를 footer에서도 적용을 시켜봤지만 footer에서는 변수자체가 빈 껍데기 였고 intro에서는 적용이 되는 것을 볼 수 있다. 즉 변수를 지정하는 방법은 두가지가 있다
1) :root를 이용하여 모든 영역에서 변수를 사용하게 하는방법
2) id,class 등 변수를 만들고 만들어진 공간에서만 사용하게 하는 방법