인라인 방식
코드 내부에 작성
<body>
<h1 style='color:red; background-color:yellow;'>Hello world</h1>
</body>내부 스타일 시트
스타일 태그 안에 작성
html
<!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>
h1 {
color:red;
background-color:yellow;
}
</style>
</head>
<body>
<h1>Hello world</h1>
</body>
</html>외부 스타일 시트
외부 스타일 시트의 경우 파일의 경로 (href)를 맞춰주기 위해 html 파일과 css파일이 같은 프로젝트에 위치해야 합니다. css 파일의 경우에도 메모장에서 작성할 수 있으며, html 파일 저장할 때와 마찬가지로 확장자를 .css로 바꿔주면 됩니다.
<!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>다중 스타일 시트
CSS 파일 안에 CSS 포함하기
@import "foo.css";위 코드처럼 @가 붙는 문법을 at-rule이라고 부릅니다. import만 있는 것이 아니고 아래처럼 다양한 엣룰이 있습니다.
- @charset : 스타일시트에서 사용하는 문자 인코딩을 지정합니다. 문서에서 가장 먼저 선언합니다.
- @import : 다른 스타일 시트에서 스타일 규칙을 가져옵니다. @charset 바로 다음에 선언 되어야 합니다.
- @font-face : 디바이스에 없는 폰트를 다운받아 적용할 때 사용합니다.
- @keyframes : 애니메이션을 만들 때 사용합니다.
- @media : 사용자 디바이스에 따른 스타일을 분기 처리하고자 할 때 사용합니다.
- @supports : 특정 CSS 속성을 브라우저가 지원하는지 확인하고 스타일을 선언하고자 할 때 사용합니다.
