개발일지 36일차

팀별 프로젝트 진행 상황 및 업무

개별 레퍼런스 조사 후 메인페이지 제작 및 선정

오늘 강의를 통해 프로젝트에 적용한 부분

학습내용

• reset.css 와 normalize.css
• CSS 변수
  직관적인 코드를 사용할 때 유용함
  일괄적으로 어떤 변수를 수정할 때 유용함
  단 단점은 익스플로러에서 사용하는데 제약이 있다.

style.css

:root {
	--black: #18181a;
	--purple: #9147ff;
	--font-size-40: 40px;
}
h1 {
	background-color: var(--black);
	font-size: var(--font-size-40);
	color: var(--purple);
}

결과

해당하는 선택자에만 변수 적용이 가능하다.

style.css

/* 해당되는 CSS선택자에만 변수가 적용된다. */
#intro {
	--font-color: blue;
	--font-size: 50px;
}
#intro p {
	font-size: var(--font-size);
	color: var(--font-color);
}
#footer p {
	font-size: var(--font-size);
	color: var(--font-color);
}

결과

어려웠던 점과 해결방법

아쉬웠던 점