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

소개

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

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

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

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

시작해 봅시다!

이것은 가이드 실험입니다. 학습과 실습을 돕기 위한 단계별 지침을 제공합니다.각 단계를 완료하고 실무 경험을 쌓기 위해 지침을 주의 깊게 따르세요. 과거 데이터에 따르면, 이것은 중급 레벨의 실험이며 완료율은 79%입니다.학습자들로부터 99%의 긍정적인 리뷰율을 받았습니다.

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

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

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

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

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

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 탭으로 이동합니다. 이 탭은 환경에서 실행 중인 웹 서버의 출력을 표시합니다.
최신 변경 사항을 보려면 브라우저 탭을 새로고침해야 할 수 있습니다.

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

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