[attribute] HTML - class 속성 ★★★ - 클래스명 선택자 지정 (= class속성 = 클래스속성)

목차

1. class 예제 - 1개 클래스명 사용 경우
2. class 정의
3. class 구문
4. class 예제 - 여러 클래스명 사용 경우
5. class 예제 - [JS] 동일 클래스명 사용 요소 중 특정요소 선택
6. class 예제 - [JS] 특정ID 요소 안에 클래스 추가 

class 예제 - 1개 클래스명 사용 경우

 

<style>

h1.hz {color: red;}

p.intro {color: blue;}

.intro {text-decoration:underline;}

.오픈년도 {color:red;}

</style>

<h1 class="hz">홈짱닷컴</h1>

<div class="intro">Homzzang.com</div>

<p class="intro">그누보드/영카트 제작관리 강의</p>

<p class="오픈년도">2012</p>

 

결과보기

class 정의

 

1개 이상의 클래스명 선택자 지정.

 

---

 

1. 클래스명 선택자는 아래 2가지 용도로 주로 사용.

• 해당 클래스명 갖는 여러 요소를 한번에 스타일 지정.
• JS로 해당 클래스명 갖는 요소의 내용/스타일 변경.

 

2.

• 전역속성이라서 모든 요소에서 사용 가능.
• class 관련 자세한 사항은 CSS 내용 참고.

 

3.

모든 브라우저 지원.

 

class 구문

 

클래스명 1개 지정

<element class="classname">

 

클래스명 여러 개 지정

<element class="classname1 classname2 classname3 ...">

 

---

[속성값]

 

classname

클래스명.

• 시작 문자: 영문(A-Z 또는 a-z)
• 이후 문자: 영문(A-Z 또는 a-z), 숫자(0-9), 하이픈(-), 언더스코어(_) 허용

 

PS. 한글도 가능하긴 하나, 거의 사용 X

class 예제 - 여러 클래스명 사용 경우

 

<style>

h1.hz { color: red; text-align: center;}

.bg {background-color: yellow;}

</style>

<h1 class="hz bg">홈짱닷컴 Homzzang.com</h1>

<p class="bg">홈페이지 제작관리 강의</p>

결과보기

---

PS. 기존 속성값을 덮어씌울 때도 사용 가능.

<style>

div {color:white; padding:30px}

.old {background:blue;}

.new {background:red;}
</style>

 

<div class="old new">신비</div>

 

결과보기 

class 예제 - [JS] 동일 클래스명 사용 요소 중 특정요소 선택

(예) hz 클래스명 갖는 2개 요소 중 첫 번째 것만 스타일 변경.

 

<div class="hz">홈짱닷컴</div>

<div class="hz">Homzzang.com</div>

<p>홈페이지 제작관리 강의</p>

<button onclick="homzzang()">클릭</button>

<script>

function homzzang() {

  var x = document.getElementsByClassName("hz");

  x[0].style.backgroundColor = "yellow";

}

</script>

 

결과보기

class 예제 - [JS] 특정ID 요소 안에 클래스 추가

 

<style>

.hzstyle { color:red; font-size:20px; font-weight:bold;}

</style>

<button onclick="homzzang()">클릭</button>

<div id="hz">홈짱닷컴 Homzzang.com</div>

<script>

function homzzang() {

  document.getElementById("hz").classList.add("hzstyle");

}

</script>

 

결과보기