HTML 클래스

HTML을 분류(클래스 설정)하여 요소의 클래스에 CSS 스타일을 정의할 수 있습니다.

동일한 클래스에 동일한 스타일을 설정하거나 다른 클래스에 다른 스타일을 설정할 수 있습니다.

예제

<!DOCTYPE html>
<html>
<head>
<style>
.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
} 
</style>
</head>
<body>
<div class="cities">
<h2>런던</h2>
<p>
런던은 영국의 수도입니다. 
영국에서 가장 인구가 많은 도시입니다, 
13백만 명 이상의 인구를 가진 도시 지역으로 이루어져 있습니다.
</p>
</div> 
</body>
</html>

직접 시도해 보세요

분류된 블록 요소

HTML <div> 요소는블록 요소다른 HTML 요소의 컨테이너로 사용될 수 있습니다.

div 요소의 클래스를 설정하여 동일한 div 요소에 동일한 클래스를 설정할 수 있습니다：

예제

<!DOCTYPE html>
<html>
<head>
<style>
.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
} 
</style>
</head>
<body>
<div class="cities">
<h2>런던</h2>
<p>런던은 영국의 수도입니다. 
영국에서 가장 인구가 많은 도시입니다, 
대도시 지역 인구는 1300만 명 이상입니다.</p>
</div>
<div class="cities">
<h2>Paris</h2>
<p>Paris는 프랑스의 수도이자, 인구가 가장 많은 도시입니다.</p>
</div>
<div class="cities">
<h2>Tokyo</h2>
<p>Tokyo는 일본의 수도이자, 대도시 지역의 중심입니다,</p>
세계에서 가장 인구가 많은 대도시 지역입니다.</p>
</div>
</body>
</html>

직접 시도해 보세요

분류 행 내 요소

HTML span 요소는 행 내 요소로, 텍스트의 컨테이너로 사용될 수 있습니다.

span 요소의 클래스를 설정하면 동일한 span 요소에 동일한 스타일을 적용할 수 있습니다.

예제

<!DOCTYPE html>
<html>
<head>
<style>
  span.red {color:red;}
</style>
</head>
<body>
<h1>My <span class="red">Important</span> Heading</h1>
</body>
</html>

직접 시도해 보세요