CSS 스타일링: HTML 에 외부 스타일시트 연결하기

소개

첫 번째 CSS 실습에 오신 것을 환영합니다! CSS(Cascading Style Sheets) 는 HTML 문서를 스타일링하는 데 사용하는 언어입니다. 화면, 종이 또는 기타 미디어에서 HTML 요소가 어떻게 표시되어야 하는지를 설명합니다.

CSS 를 HTML 문서에 포함하는 방법에는 인라인 (inline), 내부 (internal), 외부 (external) 세 가지가 있습니다. 가장 일반적이고 권장되는 방법은 외부 스타일시트 (external stylesheet) 를 사용하는 것입니다. 이 접근 방식은 콘텐츠 (HTML) 와 표현 (CSS) 을 분리하여 코드를 더 깔끔하고 유지 관리하기 쉬우며 여러 페이지에서 재사용 가능하게 만듭니다.

이 실습에서는 외부 스타일시트를 사용하여 웹페이지를 스타일링하는 기본적인 과정을 배우게 됩니다. 다음을 수행합니다:

새로운 CSS 파일을 생성합니다.
해당 CSS 파일을 기존 HTML 문서에 연결합니다.
전체 페이지의 글꼴을 변경하는 기본적인 CSS 규칙을 작성합니다.
라이브 웹 브라우저에서 변경 사항을 확인합니다.

시작해 봅시다!

styles.css 라는 외부 CSS 파일 생성하기

이 단계에서는 모든 CSS 규칙을 담을 전용 파일을 생성합니다. 이것을 외부 스타일시트 (external stylesheet) 라고 합니다. 설정 스크립트가 이미 index.html 파일을 생성했습니다. 이제 이 파일을 스타일링할 CSS 파일을 생성해야 합니다.

WebIDE 의 왼쪽 패널에 있는 파일 탐색기를 사용하여 다음을 수행합니다:

project 폴더 영역 내의 빈 공간을 마우스 오른쪽 버튼으로 클릭합니다.
컨텍스트 메뉴에서 "새 파일 (New File)"을 선택합니다.
새 입력 상자가 나타납니다. styles.css를 입력하고 Enter 키를 누릅니다.

이제 파일 탐색기에서 styles.css라는 이름의 비어 있는 새 파일을 볼 수 있습니다. 다음 단계에서 여기에 CSS 코드를 작성하게 됩니다.

new file

link 태그를 사용하여 CSS 파일을 HTML 문서에 연결하기

이 단계에서는 styles.css 파일을 index.html 파일에 연결합니다. CSS 파일을 생성하는 것만으로는 충분하지 않습니다. HTML 문서에 해당 파일을 사용하도록 명시적으로 알려야 합니다. 이는 <link> 태그를 사용하여 수행됩니다.

<link> 태그는 HTML 문서의 <head> 섹션 안에 배치됩니다. 이 태그는 두 가지 중요한 속성이 필요합니다:

rel="stylesheet": 브라우저에게 연결된 파일이 스타일시트임을 알려줍니다.
href="styles.css": CSS 파일의 경로를 지정합니다.

이제 HTML 에 추가해 보겠습니다.

파일 탐색기에서 index.html 파일을 엽니다.
<head> 섹션 안에 다음 줄을 추가합니다:

<link rel="stylesheet" href="styles.css" />

줄을 추가한 후 index.html 파일은 다음과 같이 보여야 합니다:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My First CSS Page</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph. We will style this page with CSS.</p>
  </body>
</html>

파일을 저장했는지 확인하십시오 (Ctrl+S 또는 File > Save).

body 요소에 대한 기본 선택자 추가하기

이 단계에서는 첫 번째 CSS 규칙을 작성합니다. CSS 규칙은 선택자 (selector) 와 선언 블록 (declaration block) 으로 구성됩니다. 선택자는 스타일을 지정하려는 HTML 요소를 가리킵니다. 선언 블록 (중괄호 {} 안) 에는 하나 이상의 선언이 포함되며, 이는 실제로 적용될 스타일입니다.

먼저 <body> 요소를 대상으로 지정하는 것부터 시작하겠습니다. <body>에 스타일을 지정하는 것은 전체 페이지의 배경색 및 글꼴과 같은 기본 스타일을 설정하는 일반적인 방법입니다.

styles.css 파일을 엽니다. 아직 비어 있어야 합니다.
body 요소에 대한 규칙을 만들기 위해 다음 코드를 입력합니다:

body {
}

이 코드는 <body> 요소를 선택하고 다음 단계에서 스타일 속성을 추가할 빈 선언 블록 (중괄호) 을 준비합니다.

body 선택자에 font-family 속성 설정하기

이 단계에서는 body 규칙에 스타일 선언을 추가합니다. 선언은 속성 - 값 쌍 (예: property: value;) 으로, 특정 스타일을 정의합니다.

font-family 속성을 사용하여 페이지의 텍스트 서체를 변경할 것입니다. 이를 body에 적용하면 body 안의 모든 텍스트 요소 (예: <h1> 및 <p>) 가 이 글꼴을 상속받습니다. "글꼴 스택 (font stack)"을 제공하는 것이 좋은 방법입니다. 글꼴 스택은 쉼표로 구분된 글꼴 목록입니다. 브라우저는 첫 번째 글꼴을 시도하고, 사용할 수 없으면 다음 글꼴을 시도하는 식으로 작동합니다.

styles.css 파일이 열려 있는지 확인합니다.
body 선택자의 중괄호 안에 font-family 속성을 추가합니다.

font-family: Arial, sans-serif;

이제 styles.css 파일 전체는 다음과 같이 보여야 합니다:

body {
  font-family: Arial, sans-serif;
}

이 규칙은 브라우저에게 <body> 내의 모든 텍스트를 Arial 글꼴로 렌더링하도록 지시합니다. 사용자의 시스템에 Arial 이 설치되어 있지 않으면, 시스템의 기본 sans-serif 글꼴로 대체됩니다.

파일 저장 및 브라우저 새로고침으로 변경 사항 확인하기

이 마지막 단계에서는 작업 결과를 확인합니다. 코드를 작성한 후에는 파일을 저장하고 브라우저에서 변경 사항을 확인해야 합니다.

index.html과 styles.css 파일이 모두 저장되었는지 확인합니다. Ctrl+S 키보드 단축키를 사용하거나 메뉴에서 File > Save로 이동하여 저장할 수 있습니다.
LabEx 인터페이스 상단에 있는 Web 8080 탭으로 이동합니다. 이 탭은 환경에서 실행 중인 웹 서버의 출력을 표시합니다.
최신 변경 사항을 보려면 브라우저 탭을 새로고침해야 할 수 있습니다.

font change

페이지의 텍스트를 관찰합니다. 이제 Arial 글꼴 (또는 유사한 sans-serif 글꼴) 로 표시되어야 하며, 이는 브라우저가 일반적으로 사용하는 기본 serif 글꼴 (예: Times New Roman) 과 다릅니다. 변경 사항이 미묘할 수 있지만, 외부 스타일시트가 올바르게 연결되고 적용되었음을 확인시켜 줍니다.

자유롭게 실험해 보세요! styles.css 파일에서 Arial을 Verdana 또는 Georgia로 변경하고 저장한 다음, Web 8080 탭을 새로고침하여 글꼴 변경을 즉시 확인해 보세요.