css 추가설명
리셋css 사용이유
초기화 작업 매번 - 미리 다 작성한 코드가 리셋css
css를 완전 초기화 한 코드
구글링- https://meyerweb.com/eric/tools/css/reset/
기존의 css태그를 초기화 하는 코드
브라우저마다 고의의 css가 사전에 정의되에 있는 경우가 많다.
리셋css은 모든 브라우저에 동일하게 초기화 해버리겠다.에 사용
미리 사전에 연결하기
이와 관련해서 커스텀 작업 -스타일css에서 가능
캐스케이팅 동일한 속성의 선택자 사용시 나중에 작성한것이 우선시 된다 이건 html에 작성된 링크의 css에 동일하게 적용
그래서 리셋css 다음에 스타일 css를 작성해 줘야 한다.
동일한 링크안에도 캐스케이딩으 나타나는 것을 볼 수 있다.
Normalize.css
https://necolas.github.io/normalize.css/
링크주소로 다운 받아 링크태그ㄹ를 사용해서 연결
1. 초기ㅗ화
2, 노멀라이즈
3. 스타일
기존의 디자인을 조금 가공한 상태 완전 디자인이 없는 상태는 아님
각각의 브라우저가의 css의 오차를 줄이고
버그를 줄이는 방향으로 스타일을 재정의 하는데 사용하는 css
여러 브라우저의 오차를 줄이는 쪽으로 디자인된 css
즉 완전 초기화는 아니다.1.2는 완전 다름
2중 하나 개발자의 취향 실무에는 2가 조금 더 높음
개발자 취향과 환경에 띠라 선호하는 바가 다를 수 있음
즉 개취와 환경의 차이.
css 변수
변수?
자바스크립트에도 자주 나옴
예습
박스 - 변수 내용물-값/데이터
박스안에 실질적으로 들어가는 내용물을 값.데이터
데이터를 담아내는 박스가 변수. 박스자체가 변수 원한느 이름으로 넣을 수가 있음.
박스-> 사과박스 변수의 이름= 변수명 원하는 이름으로 작성할 수 있음.
변수 생성 - 변수의 이름을 부여- 값을 넣을 수 가 있음.
css에서 변수의 개념이 생김 css의 발전
익스플로우에서는 거의 작동이 안함 11도 안됨
css 변수를 단독으로 사용하는것도 힘듬
카피켓할떄 구체적인 값을 확인 할 수 가 없다.ㅇ(예 트위치)
이런 내용물 자체를 변수라고 보면되니다. 이렇게 지어진 변수명
css에서 변수를 만들기
https://developer.mozilla.org/ko/docs/Web/CSS/Using_CSS_custom_properties
변수를 활용을 할 때 var(--'변수명')를 속성값 대신 넣으면 됨.
검사- 마우스를 오버해야 정확한 값을 알 수 있따.
브랜드의 컬러가 변동한 경우 > 변경이 쉽다 . 변수 값만 바꾸면 모든 해댱영역이 수정됨
직관적인 코드작업을 할때 유용한게 사용
단점은 익스플로우에 그닥...
변수에 대해 자세히
영역안에서만 작동이 되도록 선택별 변수를 차별젹으로 둘 수 가 있음.
변수의 영향력을 css선택자르 활용해서 지정을 할 수가 있음.
모든 영역에서 사용이 되고 싶으면 루트를 사용을 하면됨.
