offfff

HTML Classes 본문

프로그래밍

HTML Classes

offfff 2016. 9. 7. 09:00

Using The class Attribute


HTML class 속성은 같은 클래스 이름을 가진 element들을 동일한 속성으로 정의하고 싶을때 사용한다.

아래 예제에서는 같은 클래스 이름을 가진 3개의 <div> element가 있다.


<!DOCTYPE html>

<html>

<head>


<sytle>

div.cities {

background-color: black;

color: white;

margin: 20px 0 20px 0;

padding: 20px;

}

</style>


</head>

<body>


<div class="cities">

<h2>London</h2>

<p>London is the capital 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>




Using The class Attribute on Inline Elements


HTML class 속성은 inline element로 사용될 수 있다.


<!DOCTYPE html>

<html>

<head>


<sytle>

span.note {

font-size: 120%;

color: white;

}

</style>


</head>

<body>


<h1><span class="note">Important</span> heading</h1>

<p>This is some <span class="note">important</span> text.</p>


</body>

</html>




아래 링크를 참조하여 번역 및 수정 함

http://www.w3schools.com/html/html_classes.asp

저작자표시 비영리

'프로그래밍' 카테고리의 다른 글

HTML 자바스크립트(HTML JavaScript)  (0) 2016.09.09
HTML iframes  (0) 2016.09.08
HTML 블록(HTML Blocks)  (0) 2016.09.06
HTML 리스트(HTML Lists)  (0) 2016.09.05
HTML 표(HTML Tables)  (0) 2016.09.04
'프로그래밍' Related Articles more