CSS 언어 작업의 기초

우리는 이미 HTML 언어의 주요 태그를 다루었고 이제 아름다움을 더할 때입니다. 텍스트의 색상, 크기, 배경 등을 변경할 수 있는 기능을 원할 것입니다. 이는 CSS 언어를 사용하여 수행됩니다.

일반적으로 CSS 명령(스타일)은 별도의 파일에 저장되며, 이 파일은 특별한 태그를 사용하여 사이트의 모든 HTML 페이지에 연결됩니다.

이러한 접근 방식의 장점은 CSS 파일은 하나인 반면 HTML 파일은 아무리 많아도, 천 개라도 가능하다는 점입니다. 만약 우리가 CSS 파일의 한 곳에서 변경을 하면, 예를 들어 모든 단락을 빨간색으로 칠한다면, 이러한 변경 사항은 우리 CSS 파일이 연결된 천 개의 HTML 페이지 모두에 적용됩니다. 매우 편리하고 빠릅니다.

스타일 파일은 .css 확장자를 가져야 합니다. 이러한 파일을 HTML 페이지에 연결하려면, head 태그 안에 다음과 같은 구조를 작성해야 합니다:

<link rel="stylesheet" href="fileName.css">

다음 예제에서는 HTML 파일에 CSS 파일 styles.css가 연결됩니다:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>This is the title</title>
		<link rel="stylesheet" href="styles.css">
	</head>
	<body>
		<p>
			This is a paragraph with text.
		</p>
	</body>
</html>

모든 페이지에 연결할 styles.css 파일을 생성하세요.