happy cat image

everdevel

우리 모두의 웹 입문, 에버디벨

UI 변경
오늘도 방문해 주셔서 감사합니다.
여러분이 매일 찾아주셔서 하루 5명 오는 사이트에서 1000명이 오는 사이트로 커갈 수 있었습니다.
드디어 2017년 8월 25일 에버디벨 책이 [웹코딩 시작하기]라는 제목으로 정말 출간 합니다.
정말 열심히 최선을 다해 많은 조사를 하며 작성했습니다. ^-^*
에버디벨은 제가 프로그래머가 아닌 시절 만든 사이트지만, [웹코딩 시작하기]는 저의 2년간의 프로그래머 경력을
살려서 꼭 알아야 한다고 생각하는 것들을 최대한 쉽게 설명하여 만들었습니다.
[웹코딩 시작하기]서평 이벤트도 시작했습니다.
[웹코딩 시작하기 서평 이벤트 많은 참여 부탁드립니다. ^-^* 눌러주세요.]

- 2017.8.5 에버디벨 운영자

클래스 추가 및 삭제하기

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

저도 이 부분은 처음 볼 땐 뭔지 이해가 안갔는데 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>

위의 소스 결과

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>

결과 보기

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>

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

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

강좌로 돌아가기