08.25 CSS 추가 강의

• 같은 선택자에 대하여 css 적용할시
  • h1 { color : blue; }
    h1 { color : gray; } > 나중에 작성된 css 적용됨
  • css link주소간에도 우선순위 적용됨.

---

• Reset CSS : 웹 브라우저마다 각기 다른 default 스타일이 지정되어 있어, 이를 초기화함으로써 다양한 웹브라우저에서도 동일한 스타일이 적용되도록 하는 설정

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

---

• Nomalize CSS : reset css와는 다르게 디자인이 적용되어 있으며, 여러 브라우저에 가능한 오차를 줄이면서 디자인 적용되도록 함. (완전 초기화는 아님) 실제 실무에서 많이 쓰임.

  Nomalize CSS

  ---

• CSS 변수

:root {
   --black: #18181a;
   --purple: #9147ff;
   --font-size-40 : 40px;
} 
h1 {
   background-color: var(--black);
   font-size: var(--font-size-40)
   color: var(--purple);
}
  --black,--purple,--font-size-40 : 변수
  #18181a, #9147ff, 40px : 데이터 

   * 일괄적인 디자인 수정작업을 할 때 변수를 사용하여 쉽게 수정할 수 있다. 
   * root안에 있는 데이터는 모든곳에서 사용가능하나, 선택자로 정할경우 그 선택자에만 적용됨.

---

Root

:root 선택자는 문서의 최상위 요소를 가리킵니다.
HTML 문서에서 최상위 요소라 함은 당연히 을 말하겠죠!
아니 그럼, :root{}랑 html{}이랑 같은 거 아닌가 싶은데요.
:root는 가상 선택자이기 때문에, html 셀렉터보다도 우선순위가 높습니다.
그래서 :root와 html에 대한 스타일을 동시에 선언하면, :root에 대한 스타일이 우선됩니다.


흠... 그럼, 이 :root는 어디에다 써먹을 수 있을까요?
바로 전역 스코프의 CSS 변수를 선언할 때 사용합니다.


:root를 사용하여 선언한 사용자 정의 속성은 var( )를 통해 접근할 수 있습니다.
출처

---

학습소감

CSS 변수라는 것을 배웠다. 함수처럼 CSS값을 먼저 정의해놓은 뒤 변수를 입력하면 되는것이다. 나중에 한 컨셉의 컬러라던지 디자인을 수정할 때, 일일이 css를 변경하는것이 아니라 이 변수값만 수정하면 아주 편리하게 바꿀 수 있을 것 같다.