목차
- class 예제 - 1개 클래스명 사용 경우
- class 정의
- class 구문
- class 예제 - 여러 클래스명 사용 경우
- class 예제 - [JS] 동일 클래스명 사용 요소 중 특정요소 선택
- 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>
결과보기
