08월 25일

1. 학습 내용

reset / normalize

1) reset css

html이 가지고 있는 모든 css코드를 초기화 시키는 작업

• 모든 브라우저에서 동일하게 적용 후 style.css에서 다양하게 진행
• reset css가 style보다 위에 있어야한다. (캐스캐이딩의 원리)

2) normalize css

기존의 디자인을 약간의 가공한 CSS

• 여러 브라우저간 디자인의 오차를 줄이는 방향으로 적용되어있다.

3) reset vs normalize

실무에서 normalize가 많이 사용되나 각각은 개발자의 취향에 따라 사용

CSS 변수

어떤 데이터 값을 변수에 담아 변수를 활용하여 css를 제작한다.
이때 변수의 이름은 자유롭게 설정 가능

root로 설정하면 어디에서든 사용가능
id나 class에서 설정하여 제약을 줄 수도 있다.

• 왜 사용하는 가?

  	01. 브랜드의 컬러가 바뀌었을 때 변수의 값만 바꾸면 변수를 설정한 값을 일괄적으로 수정가능
  	2. 직관적인 코드로 표기 가능

• 단점

  1. 익스플로러에서 사용에 제약

예시

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

Root를 사용하여 모든 CSS에 적용이 가능하다
--(변수명): (설정 값)의 형태로 입력하며 이때 변수명을 자유롭게 설정가능

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

만들어진 변수 값을 입력할 때 입력한 명령에다 var()를 통해 입력한다.

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

root가 아닌 #intro처럼 변수에 제약을 걸어놓으면 #intro 내에서만 변수가 적용된다.

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

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

2. 학습 중 어려웠던 점

내용이 많지 않아 어려운 점은 없었으나 추후 심화과정을 위해 완벽히 습득한다.

3. 해결 방안

유투브를 통해 다른 설명도 함께 들어보기

4. 학습 소감

새로운 것이 나와 배움의 열정이 불타올랐다.