521
No
CSS3 트랜지션 사용법 익히기
css3 트랜지션을 사용하는 방법은 간단합니다. css3의 수많은 속성 중에서 어떤 것에 트랜지션 효과를 줄 것인지 하나 고릅니다. 그리고 변하는 시간을 지정하면 됩니다.
transition-property : 속성이름;
transition-duration : 변하는 시간;
▶ 속성이름 : css3의 속성이름을 지정
▶ 변하는 시간 : s를 사용하여 초 단위로 지정
예를 들어서 다음처럼 이미지 한 장이 있는 간단한 HTML 마크업이 준비되었다고 가정하겠습니다.
<body>
<img src=“images/univ.JPG” alt=“” />
</body>
img 엘리먼트에 직접 태그 선택자로 다음처럼 이미지의 너비값(width)을 30% 로 축소합니다. 너비값을 이용하여 트랜지션 효과를 줄 것이므로 transition-property 에 width를 지정합니다. 그리고 변하는 시간을 1초인 1s를 사용합니다.
img {
width:30%;
transition-property:width;
transition-duration:1s;
}
이제 변하는 시점을 지정해 주어야 합니다. 보통은 사용자의 마우스 클릭이나 롤오버 상태일 때 변하게 해줍니다. 예를 들어 이미지 위에 마우스 커서가 롤오버 되었을 때 이미지 크기를 확대해 보겠습니다.
img:hover {
width ;100%
}
위 예는 a 엘리먼트의 유사 클래스로 많이 쓰이는 :hover를 img 에 사용한 것입니다. 이미지위에 마우스 커서를 올려놓으면 img:hover 안에 선언한 스타일이 적용됩니다. 따라서 이미지 너비가 30%에서 100% 로 되면서 확대된 느낌을 줄 수 있습니다.
그리고 transition-property, transition-duration의 속성을 두 개 지정하는 것이 번거롭다면 한 줄로 해결할 수 있습니다. transition 속성을 이용하면 됩니다.
transition: 속성이름 변하는 시간;
속성이름 : css3의 속성이름을 지정
변하는 시간 : s를 사용하여 초 단위로 지정
img {
width :30%;
transition:width 1s;
}
유의할 점은 ‘속성이름’과 ‘변하는 시간’ 사이는 반드시 빈칸(스페이스 문자)을 넣어야 한다는 것입니다. 위 예는 transition 속성을 사용해서 width와 1초를 넣어준 경우입니다.
브라우저 종류별 CSS3 스타일 지정하는 방법
css3는 아직 정식 표준이 아닙니다. 그렇다 보니 브라우저별로 지원하는 경우도 있고 그렇지 않은 경우도 있습니다. 또한 지원하더라도 표준이 혹시라도 바뀌면 나중에 변경하기 쉽도록 브라우저별로 고유의 접두어를 사용하고 있습니다. 사파리와 크롬은 –webkit-, 파이어폭스는
-moz- , 오페라는 –o- 라는 접두어를 사용합니다. 따라서 브라우저에 따라 어떤 것을 지원하는지 염두에두고 다음처럼 접두어를 일일이 적어 주어야 합니다. 만약 접두어를 기입하지 않으면 제대로 실행되지 않을 수 있습니다.
img {
width :30%;
transition:width 2s;
-webkit-transition:width 2s; /* 사파리와 크롬 */
-moz-transition :width 2s ; /* 파이어폭스 */
-o-transition: width 2s; /* 오페라 */
}
위의 경우는 사파리, 크롬, 파이어폭스, 오페라 및 기타 css3 표준을 위한 브라우저를 모두 대상으로 작성한 경우입니다. 모바일만 고려한다면 해당 디바이스의 브라우저를 염두에 두고 작성하면 소스 코드 수를 절약할 수 있습니다.
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Cache-Control" content="no-cache"/>
<meta http-equiv="Expires" content="0"/>
<meta http-equiv="Pragma" content="no-cache"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>MacaronicsMobile</title>
<link rel="stylesheet" href="themes/MacaronicsMobile.min.css" />
<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet"> <!-- 3 KB -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script> <!-- 16 KB -->
<style type="text/css">
#logDiv{
background-color: #AB0000;
}
#logo {
width:176px;
height:132px;
text-indent:-9999px;
background-image: url(themes/images/logo.png);
background-repeat: no-repeat;
margin-top: 0px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
}
.title_style {
color: #3F3C30;
padding-top: 10px;
}
.fotorama__caption {
text-align: center;
}
/* 제목까지 포함한 총 높이값*/
.custom_icon .ui-btn .ui-btn-inner { padding-top: 70px; }
.custom_icon .ui-btn .ui-icon {
/* 여백까지 고려한 너비와 높이값 */
width: 60px; height: 60px;
/* 아이콘 위치의 x좌표 */
margin-left: -30px;
/* 영역을 좁히는 것을 모두 해제시킴 */
box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; -webkit-border-radius: 0; border-radius: 0;
}
/* 아이콘 파일의 경로를 배경이미지로 설정 */
#icon1 .ui-icon { background: url(icon01.png) 50% 50% no-repeat; background-size: 48px 47px; }
#icon2 .ui-icon { background: url(icon02.png) 50% 50% no-repeat; background-size: 48px 37px; }
#icon3 .ui-icon { background: url(icon03.png) 50% 50% no-repeat; background-size: 48px 41px; }
#icon4 .ui-icon { background: url(icon04.png) 50% 50% no-repeat; background-size: 48px 48px; }
img{
width:30%;
transition-property:width;
transition-duration:1s;
-webkit-transition-property:width;
-webkit-transition-duration:0.3s;
-moz-transition-property:width;
-moz-transition-duration:0.3s;
-o-transition-property:width;
-o-transition-duration:0.3s;
margin-right:10px;
margin-bottom:10px;
float:left;
}
img:hover{
width:100%;
}
.small{
width:30%;
}
.large{
width:100%;
}
.clear_both{
clear:both;
}
.bold_style{
font-weight:bold;
color:#950000;
}
</style>
</head>
<body>
<!-- main page -->
<div data-role="page" id="main">
<div data-role="header" data-theme="b" id="logDiv">
<h2 id="logo">Macaronics</h2>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li><a href="#campus_images">
<img src="themes/images/pic_i.png" class="ui-li-thumb" />
<h3 class="title_style">캠퍼스이미지</h3>
</a>
</li>
<li ><a href="#uni_intro" >
<img src="themes/images/intro_i.png" alt="" class="ui-li-thumb"/>
<h3 class="title_style">대학교소개</h3>
</a>
</li>
<li><a href="#">
<img src="themes/images/movie_i.png" alt="" class="ui-li-thumb"/>
<h3 class="title_style">홍보동영상</h3>
</a>
</li>
<li><a href="#" >
<img src="themes/images/map_i.png" alt="" class="ui-li-thumb" />
<h3 class="title_style">캠퍼스맵</h3>
</a>
</li>
</ul>
</div>
</div>
<div data-role="page" id="campus_images" class="gallery-page">
<div data-role="header" data-position="fixed" data-fullscreen="true">
<a href="#main" data-icon="home" data-direction="reverse" class="ui-btn-left">Home</a>
<h1>캠퍼스 이미지</h1>
<div data-role="navbar">
<ul>
<li>
<a href="#campus_images" class=“ui-btn-active” data-icon="gear">캠퍼스이미지</a></li>
<li><a href="#uni_intro" data-icon="info">대학교소개</a></li>
<li><a href="#" data-icon="camera">홍보동영상3</a></li>
<li><a href="#" data-icon="grid">캠퍼스맵</a></li>
</ul>
</div> <!-- navbar 끝 -->
</div><!-- header 끝 -->
<div data-role="content">
<div class="fotorama" data-arrows="true" data-width="100%" data-ratio="965/643" data-allowfullscreen="true"
data-nav="thumbs">
<img src="pic/cb01.jpg" data-caption="호수공원" />
<img src="pic/cb02.jpg" data-caption="자유관" />
<img src="pic/cb03.jpg" data-caption="성실관" />
<img src="pic/cb04.jpg" data-caption="학생회관" />
<img src="pic/cb05.jpg" data-caption="자유관 앞 조형물" />
<img src="pic/cb06.jpg" data-caption="본관" />
<img src="pic/cb07.jpg" data-caption="채플관" />
<a href="http://youtu.be/gc-SkeQ3Bng">최고의 가치 비디오</a>
</div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar" class="custom_icon" >
<ul>
<li><a href="#" id="icon1" data-icon="custom">icon1</a></li>
<li><a href="#" id="icon2" data-icon="custom">icon2</a></li>
<li><a href="#" id="icon3" data-icon="custom">icon3</a></li>
<li><a href="#" id="icon4" data-icon="custom">icon4</a></li>
</ul>
</div> <!-- navbar 끝 -->
</div> <!-- footer 끝 -->
</div>
<!-- 대학교 소개 페이지-->
<div data-role="page" data-add-back-btn="true" id="uni_intro" >
<div data-role="header" data-theme="b" >
<a href="index.html" data-icon="home" data-direction="reverse" class="ui-btn-left">Home</a>
<h1>대학교 소개</h1>
</div>
<div data-role="content" >
<div>
<!-- <p>마우스를 그림위에 올려보세요.</p> -->
<img src="themes/images/univ.jpg" alt="" class="small" id="pic_univ"/>
<h1>
"<strong class="bold_style">시대정신</strong>을 선도하는 열린<strong class="bold_style">학문공동체</strong>
입니다."</h1>
<div class="clear_both"></div>
<p>안녕하십니까? 버추얼 대학교에 관심을 가져주셔서 감사합니다. 버추얼 대학교는 1세기의 역사를 지니며 그동안
많은 발전을 거듭하였습니다.</p>
<p>버추얼 대학교는 세계에서 가장 선도적인 대학교 중의 하나로 인벙받고 있습니다. 설립목적은 사회와 개인에 직접
적인 기여와 성공을 준비할 수 있도록 하는 것입니다. 궁극적으로는 인류문명에 유용한 인재를 양성한느 것입니다.
오늘날 버추얼 대학교는 현재 인류가 당면하고 있는 여러 문제를 해결하고 다음 세대를 선도할 수 있는 리더가 될 수
있도록 학생들을 준비시키는 것입니다.</p>
<p>여러분의 미래를 버추얼 대학교에서 함께하시길 희망합니다.</p>
<p>총장 Luke Andrew</p>
</div>
</div>
<div data-role="footer" data-theme="b">
<h2 id="e">버추얼 대학교</h2>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
// 처음 flag값을 false로 초기화 시킴
// $("#result").data("flag","false");
/*
// flag 값에 따라 스타일을 small과 large를 교환하며 적용
$("#pic_univ").click( function() {
var bflag = $("#result").html();
alert(bflag);
if (bflag =="false" ) {
bflag = "true";
$("#pic_univ").removeClass("small");
$("#pic_univ").addClass("large");
} else if(bflag=="true"){
bflag = "false";
$("#pic_univ").removeClass("large");
$("#pic_univ").addClass("small");
};
$("#result").html(bflag);
$("#pic_univ").data("flag",bflag);
} ); */
/*
/// flag 값에 따라 스타일을 small과 large를 교환하며 적용
$("#pic_univ").click( function() {
//var bflag = $("#pic_univ").data("flag");
var bflag = $("#e").html();
if (bflag == "false" ) {
bflag = "true";
} else {
bflag = "false";
};
$("#e").html(bflag);
$("#pic_univ").data("flag",bflag);
} ); */
// 처음 flag값을 false로 초기화 시킴
$("#pic_univ").data("flag","false");
// flag 값에 따라 스타일을 small과 large를 교환하며 적용
$("#pic_univ").click( function() {
var bflag = $("#pic_univ").data("flag");
if (bflag == "false" ) {
bflag = "true";
var newSrc = $(this).attr("src").replace("univ_small.jpg", "univ_large.jpg");
$(this).attr("src", newSrc);
$("#pic_univ").removeClass("small");
$("#pic_univ").addClass("large");
} else {
bflag = "false";
var newSrc = $(this).attr("src").replace("univ_large.jpg", "univ_small.jpg");
$(this).attr("src", newSrc);
$("#pic_univ").removeClass("large");
$("#pic_univ").addClass("small");
};
$("#e").html(bflag);
$("#pic_univ").data("flag",bflag);
} );
});
</script>
</body>
</html>
결과 =>
http://braverokmc2.dothome.co.kr/junho/result/index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>버추얼대학교</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css" />
<!-- Photo Swipe CSS 설정 추가 -->
<link href="photoswipe/examples/jquery-mobile.css" type="text/css" rel="stylesheet" />
<link href="photoswipe/photoswipe.css" type="text/css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>
<!-- Photo Swipe 자바스크립트 설정 추가 -->
<script src="photoswipe/lib/klass.min.js"></script>
<script src="photoswipe/code.photoswipe.jquery-3.0.4.min.js"></script>
<script src="photoswipe/create_ps_instance.js"></script>
<!-- 대학교 소개 자바스크립트 설정 추가-->
<script type="text/javascript" >
$(document).ready(function() {
// 처음 flag값을 false로 초기화 시킴
$("#pic_univ").data("flag","false");
// flag 값에 따라 스타일을 small과 large를 교환하며 적용
$("#pic_univ").click( function() {
var bflag = $("#pic_univ").data("flag");
if (bflag == "false" ) {
bflag = "true";
var newSrc = $(this).attr("src").replace("univ_small.jpg", "univ_large.jpg");
$(this).attr("src", newSrc);
$("#pic_univ").removeClass("small");
$("#pic_univ").addClass("large");
} else {
bflag = "false";
var newSrc = $(this).attr("src").replace("univ_large.jpg", "univ_small.jpg");
$(this).attr("src", newSrc);
$("#pic_univ").removeClass("large");
$("#pic_univ").addClass("small");
};
$("#e").html(bflag);
$("#pic_univ").data("flag",bflag);
} );
});
</script>
<style type="text/css">
/* 메인 페이지 용 */
#logo {
width:176px;
height:132px;
text-indent:-9999px;
background-image: url(images/CI_TITLE.png);
background-repeat: no-repeat;
margin-top: 0px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
}
.title_style {
color: #3F3C30;
padding-top: 10px;
}
/* 대학교 소개용*/
#pic_univ {
float: left;
margin-right: 10px;
margin-bottom: 10px;
-webkit-transition-property: width;
-webkit-transition-duration: .1s;
}
.small {
width: 96px;
}
.large {
width: 300px;
}
.clear_both {
clear: both;
}
.bold_style {
font-weight: bold;
color: #950000;
}
</style>
</style>
</head>
<body>
<!-- 메인 페이지-->
<div data-role="page" id="main">
<div data-role="header">
<h2 id="logo">가상 대학교</h2>
</div>
<div data-role="content" data-theme="d">
<ul data-role="listview" data-inset="true">
<li><a href="#campus_images" >
<img src="images/pic_i.png" alt="" class="ui-li-thumb" />
<h3 class="title_style">캠퍼스 이미지</h3>
</a>
</li>
<li ><a href="#intro" >
<img src="images/intro_i.png" alt="" class="ui-li-thumb"/>
<h3 class="title_style">대학교소개</h3>
</a>
</li>
<li><a href="#">
<img src="images/movie_i.png" alt="" class="ui-li-thumb"/>
<h3 class="title_style">홍보동영상</h3>
</a>
</li>
<li><a href="#" >
<img src="images/map_i.png" alt="" class="ui-li-thumb" />
<h3 class="title_style">캠퍼스맵</h3>
</a>
</li>
</ul>
</div> <!-- content 끝-->
</div><!-- page 끝-->
<!-- 캠퍼스 페이지-->
<div data-role="page" id="campus_images" class="gallery-page" >
<div data-role="header">
<a href="#main" data-icon="home" data-direction="reverse" class="ui-btn-left">Home</a>
<h1>캠퍼스 이미지</h1>
</div><!-- header 끝 -->
<div data-role="content" data-theme="d">
<ul class="gallery">
<li><a href="pic/full/cb01.jpg" rel="external"><img src="pic/thumb/ca01.jpg" alt="호수공원" /></a></li>
<li><a href="pic/full/cb02.jpg" rel="external"><img src="pic/thumb/ca02.jpg" alt="자유관" /></a></li>
<li><a href="pic/full/cb03.jpg" rel="external"><img src="pic/thumb/ca03.jpg" alt="성실관" /></a></li>
<li><a href="pic/full/cb04.jpg" rel="external"><img src="pic/thumb/ca04.jpg" alt="학생회관" /></a></li>
<li><a href="pic/full/cb05.jpg" rel="external"><img src="pic/thumb/ca05.jpg" alt="자유관 앞 조형물" /></a></li>
<li><a href="pic/full/cb06.jpg" rel="external"><img src="pic/thumb/ca06.jpg" alt="본관" /></a></li>
<li><a href="pic/full/cb07.jpg" rel="external"><img src="pic/thumb/ca07.jpg" alt="채플관" /></a></li>
</ul>
</div>
<div data-role="footer">
<h2>버추얼 대학교</h2>
</div>
</div>
<!-- 대학교 소개 페이지-->
<div data-role="page" id="intro" data-add-back-btn="true" >
<div data-role="header" data-theme="a" >
<a href="index.html" data-icon="home" data-direction="reverse" class="ui-btn-left">Home</a>
<h1>대학교 소개</h1>
</div>
<div data-role="content" data-theme="c">
<img class="small" id="pic_univ" src="images/univ_small.jpg" alt="">
<h2>"<span class="bold_style">시대정신</span>을 선도하는 열린 <span class="bold_style">학문 공동체</span> 입니다. </h2>
<div class="clear_both"></div>
<p>안녕하십니까? 버추얼 대학교에 관심을 가져주셔서 감사합니다. 버추얼 대학교는 1세기의 역사를 지니며 그 동안 많은 발전을 거듭하였습니다. </p>
<p>버추어 대학교는 세계에서 가장 선도적인 대학교 중의 하나로 인정받고 있습니다. 설립목적은 사회와 개인에 직접적인 기여와 성공을 준비할 수 있도록 하는 것입니다. 궁극적으로는 인류문명에 유용한 인재를 양성하는 것입니다. 오늘날 버추얼 대학교는 현재 인류가 당면하고 있는 여러 문제를 해결하고 다음 세대를 선도할 수 있는 리더가 될 수 있도록 학생들을 준비시키는 것입니다. </p>
<p>여러분의 미래를 버추얼 대학교에서 함께하시길 희망합니다. </p>
<p>총창 Luke Andrew</p>
</div>
<div data-role="footer">
<h2 id="e">버추얼 대학교</h2>
</div>
</div>
</body>
</html>
결과 =>
http://braverokmc2.dothome.co.kr/junho/mission/#intro
댓글 ( 4)
댓글 남기기