HTML 클래스 어떤 기능일까요? 태그를 그룹화하여, 특정 CSS 효과를 부여하는 기능을 합니다.
HTML 클래스
HTML 클래스 속성은 태그 뒤에 class와 클래스명을 입력하면 됩니다. <p> 태그에 클래스명을 apple로 지정하면 아래 처럼 작성하면 됩니다.
<p class = "apple"><h1>HTML Class 속성</h1>
<p class="apple">class 속성은 태그 뒤에 한 칸 띄고 입력후, class 이름을 지정해줍니다.</p>클래스 선택자 지정
클래스 이름이 지정된 태그에 개별 효과를 지정하기 위해서는 CSS 기술이 필요합니다.
class 이름에 선택자를 적용합니다. 클래스를 선택자로 호출시 클래스명 앞에 마침표(.)를 사용합니다.
클래스명이 apple인 클래스를 선택하려면 .apple{ } 명령어를 사용합니다.
.apple {
background-color: greenyellow;
padding: 20px;
border: 4px dotted blue;
font-size: 17px;
}클래스 중복
클래스명을 여러 태그에 동시에 적용시킬 수 있습니다. .banana{ } 에서 지정된 CSS 효과는 클래스명이 banana인 모든 태그에 동시에 적용됩니다.
반면 id 속성은 선택자로 지정시 중복이 불가능합니다.
<!DOCTYPE html>
<html>
<head>
<style>
.banana{
border:1px solid gray;
margin:2px;
padding:10px;
color:white;
font-size:20px;
background-color:indigo;
}
</style>
</head>
<body>
<ul>
<li class="banana">코끼리</li>
<li class="banana">오랑우탄</li>
<li class="banana">캥거루</li>
</ul>
lt;/body>
</html>