Jquery
쉽게 역동적이고 멋진 HTML 만들기
* 제 블로그는 정말 "초심자"분들을 위한 블로그입니다.
잘하시는 분들은
아, 이런걸 필요로 하는 사람도 있구나
나도 옛날엔 그랬겠구나, 생각 해 주십사 말씀드립니다.
* 아마 HTML을 조금이라도 끄적 거리신 분들이
이해하시기 훨씬 편하시리라 생각듭니다.
물론 javascript 때문에
어떤 언어든 상관없이
프로그래밍 언어를 조금 하실줄 아셔야
이해가 가리라 싶습니다.
HTML을 한번 해 보신 분들은
원하는 형태의 틀을
원하는 방향에
원하는 크기에
원하는 간격에
.
.
.
처음 HTML을 접하고 웹페이지를 만들기 시작하면
머릿속에 있는 내가 원하는 그 형태를
정말 맞추기 어렵고 짜증나고
힘들게 만드셨을 겁니다.
그리고 나서 나온 결과물은
정말 초등학생이 자 대고 그리면
5분이면 만들 것 같은
웹페이지가 생성됩니다.
효과도 없고
멋있는 것도 없고
정말 멋진 페이지들은 많은데 !!
* w3schools.com 사이트를 보면서
그 멋진 사이트들의 효과를
하나씩 하나씩
저와 함께 해 보도록 하겠습니다.
먼저 Jquery를 사용하기 위해
<head>태그 안에
경로를 추가해 줍니다.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
첫번째 예제를 해 봅시다.
<script>
$(document).ready(function(){
$(".bu1").click(function(){
$("#test").toggle();
});
});
</script>
<p>아래의 버튼을 누르면 문장이 사라지고, 나타납니다. </p>
<p id="test">바로 이 문장이요 !</p>
<button class="bu1" style="border:solid; width:100px">버튼</button>
위와같이 간단한 코드로
아래의 버튼을 누르면 문장이 사라지고, 나타납니다.
바로 이 문장이요 !
* 사라지거나 나타나게만 하고 싶으시면
hide( ) / show( )
이렇게 사용하시면 됩니다.
신기하신 분들은 신기하고
아닌분들은 ... 예 아닐겁니다.
이제 시작이니
차근차근 쉬운것부터 해 봐야겠죠
물론 제가 못해서 그런겁니다.
다음 예제로 넘어가 보겠습니다.
복붙해서 바로바로 결과를 보겠습니다.
<script>
$(document).ready(function(){
$(".bu2").click(function(){
$("#div1").fadeToggle(2000);
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle();
});
});
</script>
<button class="bu2" style="border:solid; width:100px">버튼</button><br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
아래 글을 클릭하면,
상자들이 차례대로 사라졌다가 나타나게 됩니다.
*사라지거나 나타나게만 하고 싶으시면
fadeIn( ) / fadeOut( )
이렇게 사용하시면 됩니다.
소스코드 안에
$("#div1").fadeToggle(2000);
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle();
fadeToggle( ) 값들이 있는데,
2000, "slow", "fast" 등의 값을 넣어
속도를 조절 할 수 있습니다.
정말 웹의 책 앞부분만 닳게 하신 분들은
두번째 예제만으로
"우와" 하실거 같습니다.
제가 그렇습니다.
다음 예제는
여러 사이트에서 자주 보시는
효과입니다.
아래 글을 클릭하면,
슬라이드 효과가 나타납니다.
* 슬라이드가 내리거나, 올라가게만 하고 싶으시면
slideUp( ) / slideDown( )
이렇게 사용하시면 됩니다.
* 안의 <style>태그는 안넣으셔도 무방합니다.
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>
<div id="flip">눌러주세요</div>
<div id="panel">잘 따라 하고 계시네요 ! </div>
<style>
#panel, #flip {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#panel {
padding: 50px;
display: none;
}
</style>
재밌죠 재밌죠???
전 재밌는데,,
좀 멋있어 보이는 효과가 나오기 시작했습니다.
이제 감칠맛이 좀 나시죠?
저는 감칠맛이 나는데
이럴때는 좀 쉬어야 합니다.
글을 뭘 써야할지 생각이 안나서
나눠서 쓰려는건 아닙니다.
고로,
다음 포스팅에 이어서 하겠습니다.
감사합니다.
'IT > jquery' 카테고리의 다른 글
| jquery | Part_2 쉽고 간단히 역동적이고 멋있는 HTML 만들기 2 (2) | 2018.11.25 |
|---|
