HTML - 클래스: 스타일 있는 웹 디자인의 관문

안녕하세요, 미래의 웹 개발자 여러분! 오늘 우리는 HTML 도구 상자에서 가장 강력한 도구 중 하나인 클래스에 대해 배우겠습니다. 이 튜토리얼의 끝까지 따라오시면, 프로처럼 웹 페이지를 스타일링할 수 있을 것입니다. 그럼, 좋아하는 음료를 한 잔 챙기시고, 시작해 보겠습니다!

HTML - Classes

HTML 클래스란 무엇인가요?

본격적인 내용으로 들어가기 전에, 클래스가 무엇인지 이해해 보겠습니다. 클래스는 HTML 요소들에게 이름표를 달아주는 것을 생각해 보세요. 옷장의 다른 섹션(셔츠, 바지, 양말 등)을 레이블링하는 것처럼, 클래스는 HTML 요소들을 조직하고 스타일링하는 데 도움을 줍니다.

클래스의 문법

클래스를 사용하는 문법은 매우 간단합니다. 다음과 같습니다:

<element class="class-name">내용을 여기에 작성합니다</element>

이를 구분해 보겠습니다:

element는 <p>, <div>, <span> 등과 같은 임의의 HTML 태그입니다.
class는 클래스를 할당하는 데 사용되는 속성입니다.
"class-name"은 클래스에 부여할 이름입니다 (원하는 이름을 선택할 수 있습니다!)

예제 1: 기본 클래스 사용

<p class="highlight">이 문단은 강조되었습니다.</p>

이 예제에서, 우리는 문단에 "highlight"라는 클래스를 부여했습니다. 이는 아직 그的外观을 변경하지 않지만, 나중에 CSS로 이 문단을 타겟팅할 수 있는 방법을 제공합니다.

HTML 클래스 속성 사용

이제 클래스를 추가하는 방법을 알고 있으므로, 다양한 상황에서 어떻게 사용할 수 있는지 살펴보겠습니다.

예제 2: 여러 클래스 추가

단일 요소에 여러 개의 클래스를 추가할 수 있습니다. 공백으로 구분하면 됩니다:

<div class="important-box blue-background">
이 div는 두 개의 클래스를 가지고 있습니다: important-box와 blue-background
</div>

이제 이 div는 두 개의 클래스를 가지고 있습니다. 우리는 이를 중요한 상자로 스타일링하고 파란 배경을 주는 CSS를 사용할 수 있습니다.

예제 3: 같은 클래스, 다른 요소

같은 클래스를 다양한 요소에 사용할 수 있습니다:

<h1 class="text-center">이 제목은 가운데 정렬됩니다</h1>
<p class="text-center">이 문단도 또한 가운데 정렬됩니다</p>

이 두 요소는 모두 "text-center" 클래스를 공유하고 있습니다. 이는 다양한 요소에 일관된 스타일을 적용하는 데 유용합니다.

예제 4: JavaScript와 클래스

클래스는 CSS뿐만 아니라 JavaScript에서도 매우 유용합니다. 간단한 예제를 보겠습니다:

<button class="click-me"> 클릭하세요! </button>

<script>
document.querySelector('.click-me').addEventListener('click', function() {
alert('버튼을 클릭했습니다!');
});
</script>

이 예제에서, 우리는 클래스를 사용하여 JavaScript로 버튼을 선택하고 클릭 이벤트를 추가합니다.

클래스에 대한 기억할 점

대소문자 구분: 클래스 이름은 대소문자를 구분합니다. "Highlight"와 "highlight"는 다른 클래스로 간주됩니다.
이름 지정 관례: 의미 있는 이름을 사용하세요. "red-text"는 "rt"보다 나은 이름입니다.
이름에 공백 없음: 여러 단어가 필요하다면, 하이픈이나 캐멀케이스를 사용하세요: "big-title" 또는 "bigTitle".
재사용성: 클래스는 재사용할 수 있어야 합니다. 단일 사용인 클래스는 정말 필요한지 고려해 보세요.
의미 있는 이름: 외관보다는 목적을 설명하는 이름을 사용하세요. "important-note"는 "red-box"보다 나은 이름입니다.

다음은 클래스 사용의 일반적인 방법을 요약한 표입니다:

방법	설명	예제
단일 클래스	요소에 하나의 클래스 적용	`<p class="highlight">텍스트</p>`
여러 클래스	요소에 여러 개의 클래스 적용	`<div class="box important">콘텐츠</div>`
공유 클래스	다양한 요소에 같은 클래스 사용	`<h1 class="center">제목</h1><p class="center">문단</p>`
동적 클래스	JavaScript로 클래스 추가/제거	`element.classList.add('active')`
자손 선택자	클래스 요소 내 요소 스타일링	`.container p { color: blue; }`

실무 연습: 무언가를 만들어 보자!

이제 기본 내용을 다 배웠으므로, 간단한 프로젝트로 모든 것을 통합해 보겠습니다. 우리는 "내가 좋아하는 책들" 목록을 만들어 보겠습니다.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>내가 좋아하는 책들</title>
<style>
.book-list {
background-color: #f0f0f0;
padding: 20px;
}
.book {
margin-bottom: 10px;
}
.title {
font-weight: bold;
color: #333;
}
.author {
font-style: italic;
color: #666;
}
.fiction {
border-left: 5px solid #ff9900;
padding-left: 10px;
}
.non-fiction {
border-left: 5px solid #3366cc;
padding-left: 10px;
}
</style>
</head>
<body>
<div class="book-list">
<h1 class="list-title">내가 좋아하는 책들</h1>
<div class="book fiction">
<span class="title">To Kill a Mockingbird</span> by
<span class="author">Harper Lee</span>
</div>
<div class="book non-fiction">
<span class="title">A Brief History of Time</span> by
<span class="author">Stephen Hawking</span>
</div>
<div class="book fiction">
<span class="title">1984</span> by
<span class="author">George Orwell</span>
</div>
</div>
</body>
</html>

이제 우리가 한 일을 분석해 보겠습니다:

우리는 주요 컨테이너에 "book-list" 클래스를 추가했습니다.
각 책은 "book" 클래스를 가진 <div> 안에 있습니다.
우리는 추가로 "fiction"과 "non-fiction" 클래스를 사용하여 책을 카테고리화했습니다.
각 책의 제목과 저자에 각각의 클래스를 추가했습니다.
<style> 섹션에서 우리는 이 클래스들을 사용하여 다양한 스타일을 적용했습니다.

이 예제는 클래스의 강력한 기능을 보여줍니다. 우리는 몇 개의 클래스와 간단한 CSS로 구조화되고 스타일이 지정된 목록을 만들었습니다.

결론

이제 여러분은 HTML 클래스로 첫 걸음을 뗐습니다. 클래스는 HTML 요소들의 최고의 친구입니다. 그들은 요소들이 예쁘고 정리된 모습을 유지하는 데 도움을 줍니다. 웹 개발자로서의 여정을 계속하면서, 여러분은 점점 더 클래스를 사용하게 될 것입니다.

지속적으로 연습하고, 호기심을 가지고, 실험을 두려워하지 마세요. 얼마 지나지 않아, 어떤 웹 디자이너도 자랑스럽게 여기는 아름답고 잘 구조화된 웹 페이지를 만들 수 있을 것입니다. 행복한 코딩을!

Credits: Image by storyset