하이브리드앱

본문 바로가기
사이트 내 전체검색


하이브리드앱
하이브리드앱

16. CSS 다루기

페이지 정보

작성자 관리자 댓글 0건 조회 537회 작성일 22-01-12 18:47

본문

16. CSS 다루기

실습 : jMobile36.html


<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

<title>제이쿼리 모바일 연습</title>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<script type="text/javascript">

var init=function(){

$('#btn1').click(function(){

//$('#target').css("background-color", "lightgreen");

//$('#target').css("border", "1px solid blue");

$('#target').css({background:"lightgray", border:"2px solid blue"});

});

}


           $(document).ready(init);

</script>

</head>

<body>

<div data-role="page" id="page1">

<div data-role="header" data-position="fixed" id="header">

<h3>CSS 다루기</h3>

</div>

<div role="main" class="ui-content">

<h3 class="ui-bar ui-bar-a">제목</h3>

<div class="ui-body" id="target">

<p>스타일시트 다루기 연습</p>

</div>

<input type="button" id="btn1" value="Style Sheet 바꾸기">

</div>

<div data-role="footer" data-position="fixed">

<h3>jQuery</h3>

</div>

</div><!-- page1 -->

</body>

</html>



2.PNG


실습 : jMobile37.html


<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

<title>제이쿼리 모바일 연습</title>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<script type="text/javascript">

var init= function(){

$('#btn1').click(function(){

var ul=$("<ul>");

ul.css("list-style","none"); 

var li1=$("<li>").css({

padding:"5px",

width:"auto",

font:"15px 굴림",

color:"red"}).html("추가항목1");

var li2=$("<li>").css({

padding:"5px",

width:"auto",

font:"15px 굴림",

color:"green"

}).html("추가항목2");

var li3=$("<li>").css({

padding:"5px",

width:"auto",

font:"15px 굴림",

color:"blue"

    }).html("추가항목1");

ul.append(li1);

ul.append(li2).append(li3);

ul.appendTo($('#div1'));

});

};

$(document).ready(init);

</script>

</head>

<body>

<div data-role="page" id="page1">

<div data-role="header" data-position="fixed" id="header">

<h3>CSS 다루기</h3>

</div>

<div role="main" class="ui-content">

<input type="button" id="btn1" value="요소생성하기">

<div id="div1"></div>

</div>

<div data-role="footer" data-position="fixed">

<h3>jQuery</h3>

</div>

</div><!-- page1 -->

</body>

</html>



3.PNG



CSS의 transform 속성 중 translate(이동)

translate(x,y): 2차원적으로 이동을 시키는 속성, x축으로 y축으로 이동

translataX(x): x축으로 이동

translateY(y): y축으로 이동

translateZ(z): z축으로 이동

translate3d(x,y,z):3차원적으로 이동을 시키는 속성, x,y,z축으로 이동



실습 : jMobile38.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>제이쿼리 모바일 연습</title>
<script type="text/javascript">
var init = function(){
$("#btn1").click(function(){
$("#div1 img").css({
transform:"translate3d(100px, 0px, 0px)",
});
});
$("#btnZoom").click(function(){
$("#div1 img").css({     
transform:"scale3d(2, 2, 1)"
});
});
$("#btnRotate").click(function(){
$("#div1 img").css({     
transform:"rotateZ(45deg)"
});
});
$("#btn2").click(function(){
$("#div1 img").css({
   transform:"translate3d(0px, 0px, 0px)"
});
});
}
$(document).ready(init);
</script>

</head>
<body>
<div data-role="page" id="page1">
<div data-role="header" data-position="fixed" id="header">
<h3>CSS 다루기</h3>
</div>
<div role="main" class="ui-content">
<input type="button" id="btn1" value="y축 이동">
<input type="button" id="btnZoom" value="확대">
<input type="button" id="btnRotate" value="회전">
<div id="div1" style="background-color:yellow">
</div>
<input type="button" id="btn2" value="원래대로">
   </div>
<div data-role="footer" data-position="fixed">
<h3>jQuery</h3>
</div>
</div><!-- page1 -->
</body>
</html>


4.PNG


댓글목록

등록된 댓글이 없습니다.


개인정보취급방침 서비스이용약관 모바일 버전으로 보기 상단으로

TEL. 063-469-4551 FAX. 063-469-4560 전북 군산시 대학로 558
군산대학교 컴퓨터정보공학과

Copyright © www.leelab.co.kr. All rights reserved.