happy cat image

everdevel

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

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

- 2017.8.5 에버디벨 운영자

클릭 했을때 무언가 실행하기

우리가 어떠한 요소에 클릭을 했을때 어떠한 현상이 일어나게끔 하는것을 오늘 배워 보도록 합시다. (너무진도가 빠른건가 -_-^;)

상황1

hello world라는 문구를 클릭했을때 hello world가 사라지게끔 해봅시다.^^

click() 이용하기

click시에 어떠한 이벤트가 발생하기 위해서는 click()함수를 사용합니다. 사용방법은 간단합니다.

자신이 누르고 싶은 요소를 선택자로 작성하고.click(function(){를 써주면됩니다. 이해가 되시나요?

만약,

<div class="content">Hello world!!</div>

를 작성하였다고 합니다. 그럴 경우 위의 hello world!!!를 클릭 한다는 것을 제이쿼리로 표현을 해본다면
먼저 content 클래스를 선택합니다.

$('.content')

위와 같이 선택을 하게 되죠?
그리고 선택자 뒤에 점을 찍고 클릭 함수를 적어줍니다. click(); 이렇게 하면 아래의 모양이 됩니다.

$('.content').click();

그러면 클릭을 했으면 어떠한 일이 일어나야 겠죠? 일이 일어나게 할려면 function(){} 가 필요합니다. 이것은 클릭을 할때 어떠한 일이 생기게끔 해야 하므로 클릭변수 click()안에 넣어 주게 됩니다. 그러면 모양이 이렇게 되죠?

$('.content').click(function(){});

그러면 일이 일어나야 하는 대상체는 어디에다가 쓸까요? 바로 function(){}의 {}안에 넣게 됩니다.
제가 하는 말이 어려울 수 있지만 위의 형태를 자주 타이핑 하면 저절로 쉽게 외워집니다. (인내심을......)
우리는 hello world를 클릭시에 hello world 자기 자신이 사라지게끔 하는 기능을 구현하려고 하기때문에 {}안에 hello world를 감싸는 클래스
content를 선언해줍니다.
그러면 모양이 이렇게 되죠? 보기 쉽게 하기 위하여 {}사이에 엔터를 쳐서 줄을 바꾸겠습니다.

$('.content').click(function(){
  $('.content');
});

위와같이 {}사이에 $('.content')를 선언했습니다. 그런데 어쩌라고??
바로 여기에서 사라지는 함수를 사용해야 합니다. 그것은 바로 두둥!! hide();입니다. 이 하이드 함수를 클래스 content 옆에 붙여줍니다. 점을찍고 hide();를 적어줍니다. 아래와 같이

$('.content').click(function(){
  $('.content').hide();
});

위와 같습니다. 그러면 한번 이 소스를 구현해 봅시다.

그래서 결론 소스는

$(function(){
    $('.content').click(function(){
        $('.content').hide();
    });
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>제이쿼리</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.2.0.min.js" ></script>
<script type="text/javascript">
$(function(){
  $('.content').click(function(){
    $('.content').hide();
  });
});
</script>
</head>
<body>
<div class="content">hello world<div>
</body>
</html>

그럼 하나 더 해봅니다. 다음은 show버튼과 hide버튼 2개의 버튼을 생성해서 hello world가 보이게도 또는 안보이게도 하는것인데요.. 해봅시다.

Hello world!!!

위의 기능을 구현하기 위해서 사용된 소스는 너무 너무 간단합니다. 처음보는 show()라는 것을 사용했는데요.보여주는 함수 입니다. 똑같은 형식의 소스를 하나더 써주고 hide()를 show()로 바꿔줬을뿐입니다. 일단 이렇게 간단하게 구현을 해보았습니다. ^^

$(function(){
  $('.btn_show').click(function(){
    $('.btn_word').show();
  });
  $('.btn_hide').click(function(){
    $('.btn_word').hide();
  });
});

전체 소스 보기

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>제이쿼리</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.2.0.min.js" ></script>
<script type="text/javascript">
$(function(){
  $('.btn_show').click(function(){
    $('.btn_word').show();
  });
  $('.btn_hide').click(function(){
    $('.btn_word').hide();
  });
});
</script>
</head>
<body>
<button class="btn_show" style="padding:3px">show</button>
<button class="btn_hide" style="padding:3px">hide</button>
<div class="btn_word">Hello world!!!</div>
</body>
</html>

강좌로 돌아가기