2. CSS 적용하기

1. 인라인 방식


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


<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
</head>
<body>
	<h1 style='red'; background-color:yellow;>Hello world</h1>
</body>
</html>

2. 내부 스타일 시트


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


<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<style media="screen">
		h1 {
				style='red';
				background-color:yellow;
		}
	</style>
</head>
<body>
	<h1>Hello world</h1>
</body>
</html>

3. 외부 스타일 시트

외부 스타일 시트의 경우에는 파일의 경로 (href)를 맞춰주기 위해 html 파일과 css 파일이 같은 폴더에 위치해야 합니다. css 파일의 경우에도 메모장에서 작성할 수 있으며, html 파일 저장할 때와 마찬가지로 확장자를 .css 로 바꿔주면 됩니다.


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


<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<link rel="stylesheet" href="test.css">
</head>
<body>
	<h1>Hello world</h1>
</body>
</html>

파일명 : test.css


h1{
	color: red;
	background-color: yellow;
}

어떤 방식이든 결과 화면은 이와 같이 나옵니다.

※ CSS 파일 안에 CSS 포함하기


@import "foo.css";

이처럼 @가 붙는 문법을 at-rule이라고 부릅니다. import만 있는 것이 아니고 아래처럼 다양한 엣룰이 있습니다. 뒤에서 배울 예정이지만 주의해야 할 사항이 있어 주석을 달아두었습니다.

charset : 가장 먼저

import : charset 바로 직후 나와야 함

namespace

counter-style

font-face

keyframes

media

supports


<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>hello</title>
    <style type="text/css">
      /* 
      아래와 같이 여러가지로 사용할 수 있습니다. 
      @import url("hello.css");
      @import url(hello.css);
      @import url("./hello.css");
      @import "hello.css"; // @import hello.css;는 안됩니다.
    */
      @import "hello.css";
    </style>
  </head>
  <body>
    <h1>hello world</h1>
  </body>
</html>

💡

css가 .css파일로 저장되어있지 않아도 실행은 됩니다.