16. CSS 다루기
페이지 정보
작성자 관리자 댓글 0건 조회 1,204회 작성일 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>
실습 : 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>
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축으로 이동
댓글목록
등록된 댓글이 없습니다.