이미지 갤러리 만들기

yoowonseok Image Gallery
    <script src="prefixfree.min.js"></script><script src="prefixfree.dynamic-dom.js"></script><script src="http://code.jquery.com/jquery-1.11.1.js"></script><script src="prefixfree.jquery.js"></script><script>// <![CDATA[
        $(document).ready(function () {            // div 태그를 생성합니다.
            for (var i = 0; i < 200; i++) {
                // 변수를 선언합니다.
                var output = '';
                output += 'rotateY(' + i * 20 + 'deg) ';
                output += 'translateY(' + i * 5 + 'px) ';
                output += 'translateZ(' + 310 + 'px)';
 
                // 태그를 생성합니다.
                $('
 
<div></div>
 
 
').addClass('image').css({
                    'width': 100,
                    'height': 60,
                    'transform': output
                }).appendTo('#yoowonseok_gallery');
            }
 
            // 변수를 선언합니다.
            var isMouseDown = false;
            var originalPosition = { x: 0, y: 0 };
            var originalRotation = { x: 0, y: 0, z: 0 };
            var originalScale = 1.0;
            var createGalleryPosition = function () {
                var output = '';
                output += 'translateY(' + originalPosition.y + 'px) ';
                output += 'rotateY(' + originalRotation.y + 'deg)';
                return output;
            };
            var createViewportPosition = function () {
                var output = '';
                output += 'rotateX(-10deg) ';
                output += 'scaleX(' + originalScale + ') ';
                output += 'scaleY(' + originalScale + ')';
                return output;
            };
 
            createGalleryPosition();
            createViewportPosition();
 
            // 이벤트를 연결합니다.
            $(window).on({
                mousedown: function (event) {
                    // 마우스가 드래그 중임을 알립니다.
                    isMouseDown = true;
 
                    // 마우스 위치를 저장합니다.
                    originalPosition.x = event.screenX;
 
                    // 디폴트 이벤트를 제거합니다.
                    event.preventDefault();
                },
                mouseup: function (event) {
                    // 마우스 드래그를 해제합니다.
                    isMouseDown = false;
 
                    // 디폴트 이벤트를 제거합니다.
                    event.preventDefault();
                },
                mousemove: function (event) {
                    // 마우스를 드래그 중일 때
                    if (isMouseDown) {
                        // 마우스 이동 거리를 구합니다.
                        distance = event.screenX - originalPosition.x;
                        originalRotation.y += distance;
                        originalPosition.y += distance / 3;
 
                        // 스타일을 적용합니다.
                        $('#yoowonseok_gallery').css('transform', createGalleryPosition());
                        $('#viewport').css('transform', createViewportPosition());
 
                        // 마우스 위치를 저장합니다.
                        originalPosition.x = event.screenX;
                    }
 
                    // 디폴트 이벤트를 제거합니다.
                    event.preventDefault();
                },
                mousewheel: function (event) {
                    // 변경된 휠 크기를 사용해 크기를 구합니다.
                    var changeScale = originalScale + event.originalEvent.wheelDeltaY / 1000
 
                    // 음수 크기가 나오지 않게 합니다.
                    if (changeScale > 0) {
                        // 크기를 변경합니다.
                        originalScale = changeScale;
 
                        // 객체에 스타일을 적용합니다.
                        $('#tizen_gallery').css('transform', createGalleryPosition());
                        $('#viewport').css('transform', createViewportPosition());
 
                        // 디폴트 이벤트를 제거합니다.
                        event.preventDefault();
                    }
                }
            });
        });
 
// ]]></script>

 

// StyleFix Dynamic DOM plugin
(function(self){
 if(!self) {
	return;
}
 
self.events = {
	DOMNodeInserted: function(evt) {
		var node = evt.target, tag = node.nodeName;
 
		if(node.nodeType != 1) {
			return;
		}
 
		if(/link/i.test(tag)) {
			self.link(node);
		}
		else if(/style/i.test(tag)) {
			self.styleElement(node);
		}
		else if (node.hasAttribute('style')) {
			self.styleAttribute(node);
		}
	},
 
	DOMAttrModified: function(evt) {
		if(evt.attrName === 'style') {
			document.removeEventListener('DOMAttrModified', self.events.DOMAttrModified, false);
			self.styleAttribute(evt.target);
			document.addEventListener('DOMAttrModified', self.events.DOMAttrModified, false);
		}
	}
};
 
document.addEventListener('DOMContentLoaded', function() {
	// Listen for new <link> and <style> elements
	document.addEventListener('DOMNodeInserted', self.events.DOMNodeInserted, false);
 
	// Listen for style attribute changes
	document.addEventListener('DOMAttrModified', self.events.DOMAttrModified, false);
}, false);
 
})(window.StyleFix);
 
// PrefixFree CSSOM plugin
(function(self){
 
if(!self) {
	return;
}
 
// Add accessors for CSSOM property changes
if(window.CSSStyleDeclaration) {
	for(var i=0; i<self.properties.length; i++) {
		var property = StyleFix.camelCase(self.properties[i]),
		    prefixed = self.prefixProperty(property, true),
		    proto = CSSStyleDeclaration.prototype,
		    getter,
		    setter;
 
		// Lowercase prefix for IE
		if(!(prefixed in proto)) {
			prefixed = prefixed.charAt(0).toLowerCase() + prefixed.slice(1);
			if(!(prefixed in proto)) {
				continue;
			}
		}
 
		getter = (function(prefixed) {
			return function() {
				return this[prefixed];
			}
		})(prefixed);
		setter = (function(prefixed) {
			return function(value) {
				this[prefixed] = value;
			}
		})(prefixed);
 
		if(Object.defineProperty) {
			Object.defineProperty(proto, property, {
				get: getter,
				set: setter,
				enumerable: true,
				configurable: true
			});
		}
		else if(proto.__defineGetter__) {
			proto.__defineGetter__(property, getter);
			proto.__defineSetter__(property, setter);
		}
	}
}
 
})(window.PrefixFree);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
(function($, self){
 if(!$ || !self) {
	return;
}
 
for(var i=0; i<self.properties.length; i++) {
	var property = self.properties[i],
		camelCased = StyleFix.camelCase(property),
		PrefixCamelCased = self.prefixProperty(property, true);
 
	$.cssProps[camelCased] = PrefixCamelCased;
}
 
})(window.jQuery, window.PrefixFree);
 
// StyleFix 1.0.3 + PrefixFree 1.0.6 / Lea Verou / MIT license
(function(){function b(a,b){return[].slice.call((b||document).querySelectorAll(a))}if(!window.addEventListener)return;var a=window.StyleFix={link:function(b){try{if(b.rel!=="stylesheet"||b.hasAttribute("data-noprefix"))return}catch(c){return}var d=b.href||b.getAttribute("data-href"),e=d.replace(/[^\/]+$/,""),f=b.parentNode,g=new XMLHttpRequest,h;g.onreadystatechange=function(){g.readyState===4&&h()},h=function(){var c=g.responseText;if(c&&b.parentNode&&(!g.status||g.status<400||g.status>600)){c=a.fix(c,!0,b);if(e){c=c.replace(/url\(\s*?((?:"|')?)(.+?)\1\s*?\)/gi,function(a,b,c){return/^([a-z]{3,10}:|\/|#)/i.test(c)?a:'url("'+e+c+'")'});var d=e.replace(/([\\\^\$*+[\]?{}.=!:(|)])/g,"\\$1");c=c.replace(RegExp("\\b(behavior:\\s*?url\\('?\"?)"+d,"gi"),"$1")}var h=document.createElement("style");h.textContent=c,h.media=b.media,h.disabled=b.disabled,h.setAttribute("data-href",b.getAttribute("href")),f.insertBefore(h,b),f.removeChild(b),h.media=b.media}};try{g.open("GET",d),g.send(null)}catch(c){typeof XDomainRequest!="undefined"&&(g=new XDomainRequest,g.onerror=g.onprogress=function(){},g.onload=h,g.open("GET",d),g.send(null))}b.setAttribute("data-inprogress","")},styleElement:function(b){if(b.hasAttribute("data-noprefix"))return;var c=b.disabled;b.textContent=a.fix(b.textContent,!0,b),b.disabled=c},styleAttribute:function(b){var c=b.getAttribute("style");c=a.fix(c,!1,b),b.setAttribute("style",c)},process:function(){b('link[rel="stylesheet"]:not([data-inprogress])').forEach(StyleFix.link),b("style").forEach(StyleFix.styleElement),b("[style]").forEach(StyleFix.styleAttribute)},register:function(b,c){(a.fixers=a.fixers||[]).splice(c===undefined?a.fixers.length:c,0,b)},fix:function(b,c){for(var d=0;d<a.fixers.length;d++)b=a.fixers[d](b,c)||b;return b},camelCase:function(a){return a.replace(/-([a-z])/g,function(a,b){return b.toUpperCase()}).replace("-","")},deCamelCase:function(a){return a.replace(/[A-Z]/g,function(a){return"-"+a.toLowerCase()})}};(function(){setTimeout(function(){b('link[rel="stylesheet"]').forEach(StyleFix.link)},10),document.addEventListener("DOMContentLoaded",StyleFix.process,!1)})()})(),function(a,b){function c(a,b,c,e,f){a=d[a];if(a.length){var g=RegExp(b+"("+a.join("|")+")"+c,"gi");f=f.replace(g,e)}return f}if(!window.StyleFix||!window.getComputedStyle)return;var d=window.PrefixFree={prefixCSS:function(a,b){var e=d.prefix;a=c("functions","(\\s|:|,)","\\s*\\(","$1"+e+"$2(",a),a=c("keywords","(\\s|:)","(\\s|;|\\}|$)","$1"+e+"$2$3",a),a=c("properties","(^|\\{|\\s|;)","\\s*:","$1"+e+"$2:",a);if(d.properties.length){var f=RegExp("\\b("+d.properties.join("|")+")(?!:)","gi");a=c("valueProperties","\\b",":(.+?);",function(a){return a.replace(f,e+"$1")},a)}return b&&(a=c("selectors","","\\b",d.prefixSelector,a),a=c("atrules","@","\\b","@"+e+"$1",a)),a=a.replace(RegExp("-"+e,"g"),"-"),a},property:function(a){return(d.properties.indexOf(a)?d.prefix:"")+a},value:function(a,b){return a=c("functions","(^|\\s|,)","\\s*\\(","$1"+d.prefix+"$2(",a),a=c("keywords","(^|\\s)","(\\s|$)","$1"+d.prefix+"$2$3",a),a},prefixSelector:function(a){return a.replace(/^:{1,2}/,function(a){return a+d.prefix})},prefixProperty:function(a,b){var c=d.prefix+a;return b?StyleFix.camelCase(c):c}};(function(){var a={},b=[],c={},e=getComputedStyle(document.documentElement,null),f=document.createElement("div").style,g=function(c){if(c.charAt(0)==="-"){b.push(c);var d=c.split("-"),e=d[1];a[e]=++a[e]||1;while(d.length>3){d.pop();var f=d.join("-");h(f)&&b.indexOf(f)===-1&&b.push(f)}}},h=function(a){return StyleFix.camelCase(a)in f};if(e.length>0)for(var i=0;i<e.length;i++)g(e[i]);else for(var j in e)g(StyleFix.deCamelCase(j));var k={uses:0};for(var l in a){var m=a[l];k.uses<m&&(k={prefix:l,uses:m})}d.prefix="-"+k.prefix+"-",d.Prefix=StyleFix.camelCase(d.prefix),d.properties=[];for(var i=0;i<b.length;i++){var j=b[i];if(j.indexOf(d.prefix)===0){var n=j.slice(d.prefix.length);h(n)||d.properties.push(n)}}d.Prefix=="Ms"&&!("transform"in f)&&!("MsTransform"in f)&&"msTransform"in f&&d.properties.push("transform","transform-origin"),d.properties.sort()})(),function(){function e(a,b){return c[b]="",c[b]=a,!!c[b]}var a={"linear-gradient":{property:"backgroundImage",params:"red, teal"},calc:{property:"width",params:"1px + 5%"},element:{property:"backgroundImage",params:"#foo"},"cross-fade":{property:"backgroundImage",params:"url(a.png), url(b.png), 50%"}};a["repeating-linear-gradient"]=a["repeating-radial-gradient"]=a["radial-gradient"]=a["linear-gradient"];var b={initial:"color","zoom-in":"cursor","zoom-out":"cursor",box:"display",flexbox:"display","inline-flexbox":"display",flex:"display","inline-flex":"display"};d.functions=[],d.keywords=[];var c=document.createElement("div").style;for(var f in a){var g=a[f],h=g.property,i=f+"("+g.params+")";!e(i,h)&&e(d.prefix+i,h)&&d.functions.push(f)}for(var j in b){var h=b[j];!e(j,h)&&e(d.prefix+j,h)&&d.keywords.push(j)}}(),function(){function f(a){return e.textContent=a+"{}",!!e.sheet.cssRules.length}var b={":read-only":null,":read-write":null,":any-link":null,"::selection":null},c={keyframes:"name",viewport:null,document:'regexp(".")'};d.selectors=[],d.atrules=[];var e=a.appendChild(document.createElement("style"));for(var g in b){var h=g+(b[g]?"("+b[g]+")":"");!f(h)&&f(d.prefixSelector(h))&&d.selectors.push(g)}for(var i in c){var h=i+" "+(c[i]||"");!f("@"+h)&&f("@"+d.prefix+h)&&d.atrules.push(i)}a.removeChild(e)}(),d.valueProperties=["transition","transition-property"],a.className+=" "+d.prefix,StyleFix.register(d.prefixCSS)}(document.documentElement)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
* { margin: 0; padding: 0; }
 
html, body {    height: 100%; overflow: hidden;
    background: #141414;
}
 
.image {
    /* 태그 중앙 정렬 */
    width: 100px;
    height: 60px;
 
    position: absolute;
    left: 0; top: 0;
 
    /* 모양 지정 */
    border: 3px solid white;
    box-sizing: border-box;
    background: url('http://placehold.it/100x60');
    background-size: 100% 100%;
}
 
#viewport {
    transform-style: preserve-3d;
    perspective: 2000px;
    position: relative;
    height: 100%;
    transform: rotateX(-10deg);
}
 
#tizen_gallery {
    width: 100px; height: 60px;
    transform-style: preserve-3d;
    position: absolute;
    left: 50%; top: 50%;
 
    margin-left: -50px;
    margin-top: -30px;
}

반응형 웹

– 반응형 웹 –
미디어 쿼리를 사용하면 장치 부류를 구분하는 것은 물론 장치의 크기나 비율을 구분할 수도 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!doctype html>
<html lang="ko">
 <head>  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
  <title>반응형 웹</title>
  <style type="text/css">
	@media screen and (max-width: 767px){/*0~767px*/
		.font_face{
			background:red;
		}
	}
	@media screen and (min-width: 768px) and (max-width: 959px){/*768px~959px*/
		.font_face{
			background:green;
		}
	}
	@media screen and (min-width: 960px){/*960px~*/
		.font_face{
			background:orange;
		}
	}
 
  </style>
 </head>
 <body>
		<h1>CSS 추가 규칙과 반응형 웹</h1>
		<div class="font_face">
			<h2>media 속성 이용하기</h2>
			<div>
				<h3>media and print</h3>
				<p>show me the money</p>
				<p>operation cwal</p>
			</div>
		</div>
 </body>
</html>

CSS3 변환

  • transform 속성
    CSS3는 다음 변환을 지원함.

그림1

  1. translate(translateX , translateY) : 특정한 크기만큼 이동함.
  2. translateX(translateX) : X축으로 특정한 크기만큼 이동함.
  3. translateY(translateY) : Y축으로 특정한 크기만큼 이동함.
  4. scale(scaleX,scaleY) : 특정한 크기만큼 확대 및 축소함.
  5. scaleX(scaleX) : X축으로 특정한 크기만큼 확대 및 축소함.
  6. scaleY(scaleY) : Y축으로 특정한 크기만큼 확대 및 축소함.
  7. skew(angleX,angleY) : 특정한 각도만큼 기울임.
  8. skewX(angleX) : X축으로 특정한 각도만큼 기울임.
  9. skewY(angleY) : Y축으로 특정한 각도만큼 기울임.
  10. rotate(angleZ) : 특정한 각도만큼 회전함.
*transform*
section div{
 width:100px;
 height:100px;
 background:red;
 /*모든 버전의 웹브라우저에 지원하기 위해 벤더 프리픽스*/
 -ms-transform:rotate(60deg);
 -moz-transform:rotate(60deg);
 -o-transform:rotate(60deg);
 -webkit-transform:rotate(60deg);
 transform:rotate(60deg);
 /*다른 변환 함수 추가 사용 가능!*/
 /*
 -ms-transform:rotate(60deg) scale(1.2) skewY(10deg);
 -moz-transform:rotate(60deg) scale(1.2) skewY(10deg);
 -o-transform:rotate(60deg) scale(1.2) skewY(10deg);
 -webkit-transform:rotate(60deg) scale(1.2) skewY(10deg);
 transform:rotate(60deg) scale(1.2) skewY(10deg); */
}
  •  perspective
    이 속성은 원근감을 조정할 수 있다.

    body {
        width: 200px;
        margin: 200px auto;
        perspective: 400;
    }