class
class 속성은 style sheet에서 클래스 이름을 가리킬 때 사용
class 내에 css 속성을 정의하고 요소에 class를 붙여 미리 정의한 css 속성을 사용 가능
class는 여러 요소가 동일한 클래스를 사용할 수 있다.
class는 스타일 시트에서 .클래스명 {}으로 지정한다.
<head>
<style>
.city {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>스타일 시트에 city라는 클래스를 정의
<div class="city">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>city 클래스를 여러 요소에서 사용
id
id 속성은 요소의 고유 id를 지정
id의 속성값은 HTML 문서 내에서 고유해야 한다.
id는 스타일 시트에서 #id명 {} 으로 정의
<head>
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<h1 id="myHeader">My Cities</h1>id는 한 요소에서만 사용해야 한다.
'HTML' 카테고리의 다른 글
| HTML 간단한 회원가입 화면 만들기 (0) | 2023.02.01 |
|---|---|
| HTML input type (1) | 2023.01.31 |
| HTML 블록(Block) / 인라인(Inlin) / div, span 요소 (1) | 2023.01.31 |
| HTML 기본 (0) | 2023.01.31 |
댓글