4. CSS | Notion

HTML를 예쁘게, 보기 좋게 꾸며주는 CSS를 적용하는 방법은 크게 4가지가 있습니다.

외부 CSS 파일 로드하기

<head>
	<link rel="stylesheet" href="css/foo.css">
</head>

HTML안에 CSS 작성하기

<head>
	<style>
		body {font-size: 14px;}
	</style>
</head>

인라인 스타일

<body style="font-size: 14px;">

CSS 파일 안에 CSS 포함하기

@import "foo.css";

에릭 마이어의 reset CSS https://meyerweb.com/eric/tools/css/reset/

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

각 브라우저들에 자체적으로 적용되어 있는 기본 스타일(여백 등)을 초기화 시켜서 원하는 디자인을 적용하기 쉽게 만들어 줍니다. 위의 두가지 방법을 일반적으로 많이 사용하며, 프로젝트에 맞게 직접 만들어 쓰기도 합니다.

/* 선택자 */
body {
	background-color: red;
			/* 속성 */  /* 값 */
}

▲ body의 background-color를 red로 설정