CSS 언어 작업의 기초

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

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

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

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

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

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

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