happy cat image

everdevel

Web Technology, 에버디벨

UI 변경

EEOS

에버디벨 책을 학습할 수 있는 클라우드 개발 환경을 제공합니다.
개발환경구축없이 태블릿에서도 개발할 수 있는 책의 예제와 프로젝트
오직 당신을 위한 스토리지, URL, DB, 무제한 트래픽
그리고 웹기반 개발환경을 제공합니다.

더 알아보기
에버디벨이 만든 무료 클라우드 개발환경을 소개합니다.

클래스 추가 및 삭제하기

클래스 추가 및 삭제 하기 이게 과연 무슨 뜻이지 하시는 분들 계실 것입니다.

저도 이 부분은 처음 볼 땐 뭔지 이해가 안갔는데 2번째 보니까 이해가 가던데요.

그렇다고 해서 어려운건 아닙니다. 단지 제가 책을 대충 봐서 몰랐던 거였구요..^^

addClass()

클래스 추가는 addClass()를 사용합니다.

<style>
.base{border:4px solid yellow}
.base_text{font-weight:bold;color:hotpink}
</style>

<p class="base">hello world</p>

위의 예제 소스는 보면 결과는 다음과 같습니다.

 
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>EVERDEVEL :: 제이쿼리 강좌</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.2.0.min.js" ></script>
<script type="text/javascript">
</script>
<style>
.base{border:4px solid yellow}
.base_text{font-weight:bold;color:hotpink}
</style>
</head>
<body>
<p class="base">hello world</p>
</body>
</html>

(로그인을 하시면 위의 코드를 실행 할 수 있습니다.
oAuth인증 방식으로 빠르고 간편하게 로그인할 수 있습니다.
네이버, 구글, 카카오, 라인의 ID로 빠르게 로그인 하세요.)

로그인 하여 위의 코드를 클릭 한번에 실행하려면 여기를 클릭해 주세용.

위의 소스 결과

hello world

위의 소스의 base클래스에 아래의 CSS를 추가 할 수 있습니다.

.base_text{font-weight:bold;color:hotpink}

그렇다면 base클래스의 텍스트는 볼드 처리 및 핫핑크 색으로 변하겠죠?

addClass()사용법

대상체클래스.addClass('추가할 클래스 이름');

jQuery

var base = $('.base');
base.addClass('base_text');

위에소스는 base클래스에 base_text를 추가 한다는 뜻입니다.

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>EVERDEVEL :: 제이쿼리 강좌</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.2.0.min.js" ></script>
<script type="text/javascript">
$(function(){
  var base = $('.base');
  base.addClass('base_text');
});
</script>
<style>
.base{border:4px solid yellow}
.base_text{font-weight:bold;color:hotpink}
</style>
</head>
<body>
<p class="base">hello world</p>
</body>
</html>

(로그인을 하시면 위의 코드를 실행 할 수 있습니다.
oAuth인증 방식으로 빠르고 간편하게 로그인할 수 있습니다.
네이버, 구글, 카카오, 라인의 ID로 빠르게 로그인 하세요.)

로그인 하여 위의 코드를 클릭 한번에 실행하려면 여기를 클릭해 주세용.

결과 보기

hello world

위에서 보듯이 base_text의 css도 같이 적용이 되었습니다.

그럼 이제 removeClass();에 대해서 알아보겠습니다.

removeClass()

removeClass()는 어떠한 기능을 하는지 이제 감이 오시겠죠? addClass()의 반대로써 클래스를 제거해주는 기능을 합니다.

워낙 쉬우니 예제 하나로 강좌를 마무리 하겠습니다. ^^

HTML

<div id="each1" class="common">hello world</div>
<div id="each2" class="common">hello world</div>

CSS

.common{font-size:20px;color:hotpink}

이렇게 작성을 하고 위의 소스 결과를 본다면 each1,each2 둘다 class common이 적용되어 있어서 칼라 핫핑크에 폰트 크기 20픽셀이 적용됩니다.

[i am id each1]hello world

[i am id each2]hello world

위와 같은 결과가 나오는데요. 위의 결과에 아래의 제이쿼리 소스를 추가해보면 아이디each2에는 removeClass('common')가 작용하여 common 클래스가 아닌게 되므로
글씨색 핫핑크,폰트 크기 20픽셀의 영향에서 벗어나게 됩니다.

jQuery

var id2 = $('#each2');
id2.removeClass('common');

결과는 이러합니다.

[i am id each1]hello world

[i am id each2]hello world

그럼 웹에디터에서 테스트 해 볼 수 있게 소스를 작성하면 아래와 같습니다

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>EVERDEVEL :: 제이쿼리 강좌</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.2.0.min.js" ></script>
<script type="text/javascript">
$(function(){
var id2 = $('#each2');
id2.removeClass('common');
});
</script>
<style>
.common{font-size:20px;color:hotpink}
</style>
</head>
<body>
<div id="each1" class="common">hello world</div>
<div id="each2" class="common">hello world</div>
</body>
</html>

(로그인을 하시면 위의 코드를 실행 할 수 있습니다.
oAuth인증 방식으로 빠르고 간편하게 로그인할 수 있습니다.
네이버, 구글, 카카오, 라인의 ID로 빠르게 로그인 하세요.)

로그인 하여 위의 코드를 클릭 한번에 실행하려면 여기를 클릭해 주세용.

이렇게 addClass(), addRemove()에 대해서 알아 보았습니다.

다음 강좌에서는 요소의 속성을 변경하는 attr에 대해서 배워보도록 합시다.

강좌로 돌아가기