003. CSS

1. Cascading Style Sheet 2. 메모장이나 크롬에서 바로 작성하는 예제 2.1. 인라인 방식 2.2. 내부 스타일 시트 2.3. 외부 스타일 시트

1. Cascading Style Sheet

Cascading은 계단식, 위아래로 흐른다는 의미입니다. Style Sheet은 글꼴의 크기, 모양, 컬러, 문단 설정 등 미리 정의해 스타일로 만들었다가 웹 문서의 본문에서 그 스타일을 참조하여 사용하는 기능을 말합니다.

따라서, CSS 파일에 따라 완전히 다른 웹 사이트처럼 꾸밀 수 있습니다.

HTML이 웹의 뼈대라고 한다면 CSS는 HTML을 꾸며주는 살에 해당합니다.

2. 메모장이나 크롬에서 바로 작성하는 예제

메모장에서 아래 코드를 입력한 뒤, '다른 이름으로 저장'을 클릭해 확장자를 .txt 대신 .html로 바꿔서 저장하면 됩니다.

Mac OS의 경우에는 "텍스트 편집기"에서 "포맷"란에 들어가 "일반 텍스트 만들기"에서 작성하신 후 확장자를 .css로 변경하시면 됩니다.

2.1. 인라인 방식


<!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.2. 내부 스타일 시트


<!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>

2.3. 외부 스타일 시트

외부 스타일 시트의 경우에는 파일의 경로 (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="1.css">
</head>
<body>
	<h1>Hello world</h1>
</body>
</html>

파일명 : 1.css


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

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