HTML - 스타일 시트: 초보자 가이드

안녕하세요, 미래의 웹 개발자 여러분! 오늘 우리는 HTML 스타일 시트의 다채로운 세상으로 뛰어들어보겠습니다. HTML 스타일 시트는 CSS(Cascading Style Sheets)라고도 불립니다. HTML을 웹페이지의 뼈대라고 생각하고, CSS는 그 뼈대를 아름답게 만드는 멋진 옷이라고 상상해보세요. 이 흥미로운 여정을 함께 시작해보겠습니다!

HTML - Style Sheet

스타일 시트는 무엇인가요?

deep end로 뛰어들기 전에 스타일 시트가 무엇인지 이해해보겠습니다. 스타일 시트는 웹 브라우저가 HTML로 작성된 문서를 어떻게 표시해야 하는지를 알려주는 스타일 규칙의 집합입니다. 마치 웹페이지에 대한 패션 디자이너의 가이드북 같은 것입니다!

HTML 문서에 CSS 예제

CSS를 실제로 작동하는 모습을 보기 위해 간단한 예제를 시작해보겠습니다:

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: navy;
text-align: center;
}
</style>
</head>
<body>
<h1>내 멋진 페이지에 오신 것을 환영합니다!</h1>
<p>이 문단은 기본 스타일을 가지고 있습니다.</p>
</body>
</html>

이 예제에서 우리는 HTML 문서의 <head> 섹션에 <style> 태그를 추가했습니다. 이 태그 안에 CSS 규칙을 정의했습니다:

body의 배경색을 연회색(#f0f0f0)으로 설정하고 글꼴을 Arial로 변경했습니다.
h1 태그를 나비색으로 칠하고 페이지 중앙에 정렬했습니다.

CSS의 종류

이제 CSS를 작동하는 모습을 보았으니, CSS의 세 가지 종류를 탐구해보겠습니다. 이 세 가지는 HTML 옷장에 스타일을 추가하는 다른 방법으로 생각할 수 있습니다:

1. 인라인 CSS

인라인 CSS는 패션帽을 옷에 직접 추가하는 것과 같습니다. HTML 요소에 style 속성을 사용하여 직접 적용됩니다.

<h1 style="color: red; font-size: 24px;">이 제목은 빨간색입니다</h1>

이 예제에서 우리는 제목을 빨간색으로 만들고 크기를 24픽셀로 늘렸습니다.

2. 내부 CSS

내부 CSS는 단일 웹페이지에 대한 개인 스타일리스트와 같습니다. HTML 파일의 <head> 섹션内的 <style> 태그 안에서 정의됩니다. 첫 번째 예제에서 보았던 것처럼.

3. 외부 CSS

외부 CSS는 모든 웹페이지에 적용되는 대규모 패션 가이드와 같습니다. 별도의 .css 파일에 저장되고 HTML 문서에 연결됩니다.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>내 멋진 페이지에 오신 것을 환영합니다!</h1>
<p>이 페이지는 외부 CSS 파일을 사용하여 스타일링되었습니다.</p>
</body>
</html>

이 예제에서 우리는 styles.css라는 이름의 외부 CSS 파일을 HTML 문서에 연결했습니다.

스타일 시트 사용 예제

스타일 시트의 강력한 기능을 더 많이 보기 위해 몇 가지 예제를 탐구해보겠습니다:

텍스트 스타일링

p {
font-family: 'Georgia', serif;
font-size: 16px;
line-height: 1.6;
color: #333;
}

이 CSS 규칙은 모든 문단에 Georgia 글꼴, 16px 크기, 1.6 줄 간격, 그리고 어두운 회색 색상을 적용합니다.

버튼 생성

.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}

이 CSS는 멋진 녹색 버튼을 생성합니다. 이를 어떤 요소에도 적용할 수 있도록 "button" 클래스를 주면 됩니다.

응답형 디자인

@media screen and (max-width: 600px) {
body {
font-size: 14px;
}
h1 {
font-size: 24px;
}
}

이 CSS는 화면 너비가 600px 이하일 때 글자 크기를 조정하여 웹사이트를 응답형으로 만듭니다.

CSS 방법 표

이제 논의한 CSS 방법을 요약한 유용한 표를 제공합니다:

방법	설명	장점	단점
인라인 CSS	HTML 요소에 직접 적용	작은 변화에 빠르게 적용	재사용성이 없음, HTML을 지저분하게 만듦
내부 CSS	HTML 파일의 `<style>` 태그 내 정의	단일 페이지에 적용	페이지 간 재사용성이 없음
외부 CSS	별도의 .css 파일에 저장	재사용성 있음, HTML을 깨끗하게 유지	추가 HTTP 요청 필요

젊은 padawans, CSS 마스터링은 그림 그리는 것과 같습니다 - 연습, 인내심, 그리고 창의적인 감각이 필요합니다. 다양한 스타일을 실험해보고 웹페이지에 가장 잘 맞는 것을 찾아보세요.

이 수업을 마무리하면서, 한 학생이 나에게 말한 것을 떠올립니다. "CSS 덕분에 나의 지루한 웹페이지가 디지털 마스터피스로 변했습니다!" 그리고 그것이 CSS의 아름다움입니다 - 웹을 당신의 캔버스로 변환할 수 있는 힘을 줍니다.

그러므로 용감하게 스타일링해보세요, 그리고 여러분의 웹페이지가 항상 멋지기를 바랍니다!

Credits: Image by storyset