TIL28-02 GlobalStyles, Sass 소개, css reset

GlobalStyles, Sass 소개, css reset

1. 전역스타일링 : 프로젝트 전체를 아우르는 스타일

2. Sass (Syntactically Awesome Style Sheets)

• css를 전통적인 방법보다 효율적으로 사용하기 위해 만들어진 언어. 프로젝트 규모가 커질수록 생기는 불편함과 Huma Error를 줄이기 위해 쓰는 방법. 코드의 재사용성을 높이고, 가독성 또한 향상시켜줄 수 있는 방법
• 변수사용 가능, 중첩 가능, 다른 style 파일을 import 가능

3. css reset

• 브라우저는 기본적으로 default style을 제공한다.
• 초기화 하는 방법은 여러가지가 있지만, 아래 코드를 사용한다.
• reset.css

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; 
}

• index.html에 reset.css를 import해온다.