HTML Classes
HTML 요소에 class를 부여하면, 요소의 클래스에 대한 CSS styles 정의를 가능하게 해준다.
같은 class 들에는 같은 styles 을, 다른 class 들에는 다른 styles 을 적용하게 된다.
London
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
background-color:black;
color:white;
margin:20px;
padding:20px;
}
</style>
</head>
<body>
<div class="cities">
<h2>London</h2>
<p>
London is the capital city of England. It is the most populous
city in the United Kingdom, with a metropolitan area of over 13
million inhabitants.
</p>
</div>
</body>
</html>
Try it Yourself »
블록(Block) 요소의 클래스화(Classing)
HTML <div> 요소는 블록 레벨(block level) 요소로, 다른 요소를 담는데 사용할 수 있다.
<div> 요소의 클래스화(Classing)는 동일한 <div> 요소들에 대한 같은 styles 을 정의 할 수 있게 해 준다. :
London
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.
Paris
Paris is the capital and most populous city of France.
Situated on the Seine River, it is at the heart of the Île-de-France region, also known as the région parisienne.
Within its metropolitan area is one of the largest population centers in Europe, with over 12 million inhabitants.
Tokyo
Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.
It is the seat of the Japanese government and the Imperial Palace, and the home of the Japanese Imperial Family.
The Tokyo prefecture is part of the world's most populous metropolitan area with 38 million people and the world's largest urban economy.
Example
<!DOCTYPE html>
<html>
<head>
<style>
div.cities {
background-color:black;
color:white;
margin:20px;
padding:20px;
}
</style>
</head>
<body>
<div
class="cities">
<h2>London</h2>
<p>London is the capital city of
England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
<div
class="cities">
<h2>Paris</h2>
<p>Paris is the capital and most
populous city of France.</p>
</div>
<div
class="cities">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the
center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</body>
</html>
Try it Yourself » 인라인(Inline) 요소의 클래스화(Classing)
HTML <span> 요소는 텍스트를 담는데 사용 가능한 인라인(inline) 요소이다.
<span> 요소의 클래스화(Classing)는 동일한 <span> 요소들에 대한 같은 styles 을 정의 할 수 있게 해준다.
Example
<!DOCTYPE html>
<html>
<head>
<style>
span.note {font-size:120%;color:red;}
</style>
</head>
<body>
<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>
</body>
</html>
Try it Yourself » Test Yourself with Exercises!
Exercise 1 » Exercise 2 » Exercise 3 »