43(0825)

36강 CSS 추가 설명

학습 내용

reset 코드

구글에 reset css 검색
https://meyerweb.com/eric/tools/css/reset/ 접속

연결된 css를 초기화할 때 사용

Normalize css

기존에 적용된 것을 조금은 남겨둠

변수

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

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

직관적인 코드 작성 가능

explorer에서 사용제한

html

<header id="intro">
		<p>Header P</p>
	</header>

	<footer id="footer">
		<p>Footer P</p>
	</footer>

css

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

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

:root 처럼 전체에 적용되는지 지정된 부분에 적용되는지의 차이

어려웠던 점 & 해결 방법
마지막 부분이 이해가 잘 안되서 인터넷을 통해 찾아보았다.

학습 소감
변수를 사용하면 직관적으로 보기가 편한 장점이 있는 것 같다. 이전에 카피캣을 하면서 배웠던 내용 중에 모든 코드를 작성하기 전에 여러 부분에서 쓰이는 코드를 미리 적어놓았던 것처럼 유용하게 쓸 수 있을거란 생각이 들었다.