8월 25일 Velog

CSS 추가 설명

Reset CSS, Normalize CSS가 필요한 가장 큰 이유는 크로스브라우징을 위해서이다.
브라우저마다 HTML 시맨틱 태그에 대한 기본값이 다르므로 그 차이를 없애는 데 필요하다.

1. reset.css

https://meyerweb.com/eric/tools/css/reset/

• 기본적으로 가지고 있는 css 속성을 초기화시키는 코드
• html 내에서 style.css 보다 위에 링크하여 사용한다. -> 캐스캐이딩 성질 이용

2. normalize.css

https://necolas.github.io/normalize.css/

• 브라우저 사이의 디자인 오차, 버그를 줄이기 위한 코드, 부분 초기화
• 기본적인 디자인을 조금씩 수정한 것

3. CSS 변수

• 익스플로어에선 거의 사용되지 않는다.

(1) root : 변수 설정

:root {
--변수명: 속성값;
}

:root {
	--black: #18181a;  
	--brand-color: #9147ff;
	--font-size-40: 40px;
}

(2) var() : 변수 사용

var(--변수명)

h1 {
	background-color: var(--black);
	font-size: var(--font-size-40);
	color: var(--brand-color);
}

(3) 특정 영역에서의 변수 지정

선택자 {
--변수명: 속성값;
}

#intro {
	--font-color: blue;
	--font-size: 50px;
}

#intro p {
	font-size: var(--font-size);
	color: var(--font-color);
}

• 선택자(#intro) 안에서만 변수가 사용된다.