조회 수 76 추천 수 0 댓글 5
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

- 반응형 슬라이더 복습

- 반응형 전체 레이아웃


  • ?
    콘디쌤 2017.04.25 09:49
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>설화수 | 아모레퍼시픽</title>
    <link href="css/common.css" rel="stylesheet" type="text/css">
    <link href="css/header.css" rel="stylesheet" type="text/css">
    <link href="css/visual.css" rel="stylesheet" type="text/css">
    <link href="css/brand.css" rel="stylesheet" type="text/css">
    <link href="css/ingredients.css" rel="stylesheet" type="text/css">
    <link href="css/technologies.css" rel="stylesheet" type="text/css">
    <link href="css/instagram.css" rel="stylesheet" type="text/css">
    <link href="css/footer.css" rel="stylesheet" type="text/css">
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="js/main.js"></script>
    
    </head>
    
    <body>
    
    	<header>
        	<div class="logo"></div>
            <div class="util">
            	<div class="lang">KR</div>
            	<div class="lang">EN</div>
            	<div class="lang">CN</div>
                
            	<div class="search"></div>
            	<div class="news">NEWS</div>
            </div>
            <nav>
            	<div class="gnb">
                	<div class="text">GNB1</div>
                	<div class="draw">GNB1</div>
                </div>    
            	<div class="gnb">
                	<div class="text">GNB2</div>
                	<div class="draw">GNB2</div>
                </div>    
            	<div class="gnb">
                	<div class="text">GNB3</div>
                	<div class="draw">GNB3</div>
                </div>    
            	<div class="gnb">
                	<div class="text">GNB4</div>
                	<div class="draw">GNB4</div>
                </div>    
            	<div class="gnb">
                	<div class="text">GNB5</div>
                	<div class="draw">GNB5</div>
                </div>    
            </nav>
        </header>
        
        <div class="content">
            <section class="visual">
            	<div class="bg"></div>
                <div class="title"></div>
                <div class="cover">
                	<div>아시아의 지혜를 담은 Holistic Beauty, 설화수
    Holistic and harmonious skincare inspired by traditional Asian 
    wisdom, cultivating balanced beauty both inside and out</div>
                </div>
            </section>
            <section class="brand">brand</section>
            
            <section class="ingredients">
            <div class="title">Ingredients</div>
                    <div class="layout-inner">
                    
                    	<div class="slider">
                        	<div class="inner">
                            	<div class="slide">
                                	<div class="image"><img src="http://www.amorepacific.com/int/ko/brands/sulwhasoo/_jcr_content/content/image_4.jpg/1482129002343.jpg" /></div>
                                	<div class="desc">자음단</div>
                                </div>
                            	<div class="slide">
                                	<div class="image"><img src="http://www.amorepacific.com/int/ko/brands/sulwhasoo/_jcr_content/content/image_5.jpg/1482129002343.jpg" /></div>
                                    <div class="desc">인삼</div>
                                    
                                </div>
                            </div>
                        </div>
                        
                        <div class="prev">PREV</div>
                        <div class="next">NEXT</div>
                    </div>
            </section>
            
            <section class="technologies">
           	 		<div class="title">Technologies</div>
                    
                    <div class="layout-inner">
                    
                    	<div class="slider">
                        	<div class="inner">
                            	<div class="slide">
                                	<div class="desc">바이오컨버전 기술</div>
                                    <div class="image"><img src="http://www.amorepacific.com/int/ko/brands/sulwhasoo/_jcr_content/content/image_6.jpg/1482129002343.jpg" /></div>
                                </div>
                            	<div class="slide">
                                	<div class="desc">진세니스피어</div>
                                	<div class="image"><img src="http://www.amorepacific.com/int/ko/brands/sulwhasoo/_jcr_content/content/image_7.jpg/1482129002343.jpg" /></div>
                                    
                                </div>
                            </div>
                        </div>
                        
                        <div class="prev">PREV</div>
                        <div class="next">NEXT</div>
                    
                    </div>
                    
             </section>
            
            
            <section class="instagram">
            	<div class="title">Instagram</div>
                <div class="item-wrap">
                	<div class="item">
                    	<div class="image"></div>
                    	<div class="cover">
                        	<div class="text">#HolisticBeauty from #AsianWisdom</div>
                        	<div class="circle"></div>
                        </div>
                    </div>
                	<div class="item">
                    	<div class="image"></div>
                    	<div class="cover">
                        	<div class="text"></div>
                        	<div class="circle"></div>
                        </div>
                    </div>
                	<div class="item">
                    	<div class="image"></div>
                    	<div class="cover">
                        	<div class="text"></div>
                        	<div class="circle"></div>
                        </div>
                    </div>
                	<div class="item">
                    	<div class="image"></div>
                    	<div class="cover">
                        	<div class="text"></div>
                        	<div class="circle"></div>
                        </div>
                    </div>
                	<div class="item">
                    	<div class="image"></div>
                    	<div class="cover">
                        	<div class="text"></div>
                        	<div class="circle"></div>
                        </div>
                    </div>
                	<div class="item">
                    	<div class="image"></div>
                    	<div class="cover">
                        	<div class="text"></div>
                        	<div class="circle"></div>
                        </div>
                    </div>
                	<div class="item">
                    	<div class="image"></div>
                    	<div class="cover">
                        	<div class="text"></div>
                        	<div class="circle"></div>
                        </div>
                    </div>
                	<div class="item">
                    	<div class="image"></div>
                    	<div class="cover">
                        	<div class="text"></div>
                        	<div class="circle"></div>
                        </div>
                    </div>
                	<div class="item">
                    	<div class="image"></div>
                    	<div class="cover">
                        	<div class="text"></div>
                        	<div class="circle"></div>
                        </div>
                    </div>
                	<div class="item">
                    	<div class="image"></div>
                    	<div class="cover">
                        	<div class="text"></div>
                        	<div class="circle"></div>
                        </div>
                    </div>
                </div>
                
            </section>
        </div>
        
        <footer>
        	인재채용 고객상담실 매거진 사이트맵 관련사이트 서비스 이용약관 개인정보 처리방침
        </footer>
        
    </body>
    </html>
    


    @charset "utf-8";
    /* CSS Document */
    
    section.technologies {
    	height: 100vh;
    	background-color: #fff;
    }
    
    section.technologies .title {
    	font-size: 30px;
    	position: absolute;
    	top: 60px;
    	left: 50%;
    	transform: translateX(-50%);
    }
    
    .layout-inner {
    	width: 800px;
    	max-width: 800px;
    	padding: 0 100px;
    	
    	background-color: red;
    	position: absolute;
    	left: 50%;
    	top: 140px;
    	transform: translateX(-50%);
    }
    
    .slider {
    	width: 100%;
    	padding-top: 50%;
    	background-color: blue;
    	overflow: hidden;
    }
    .slider .inner {
    	position: absolute;
    	width: 200%;
    	top: 0; bottom: 0;
    	background-color: pink;
    	
    	transition: transform 0.5s ease-in-out;
    }
    
    .moved {
    	transform: translate3d( -50%, 0, 0);
    }
    
    .slide {
    	width: 50%;
    	float: left;
    	padding-top: 25%;
    }
    
    .prev, .next {
    	position: absolute;
    	top: 50%;
    	transform: translateY(-50%);
    	width: 60px;
    	height: 60px;
    	background-color: orange;
    	cursor: pointer;
    }
    .prev {
    	left: 0;
    	display: none;
    }
    .next {
    	right: 0;
    }
    
    @media (max-width: 1000px) {
    	
    	.layout-inner {
    		width: 100%;
    		padding: 0;
    	}
    	
    }
    
    .slide .desc {
    	position: absolute;
    	width: 50%;
    	top: 0; bottom: 0;
    	background-color: green;
    }
    
    .slide .image {
    	position: absolute;
    	width: 50%;
    	top: 0; bottom: 0;
    	left: 50%;
    }
    
    .slide .image img {
    	width: 100%;
    }
    
    
    
    
    
    

    $(document).ready(function(){
    
    	$(window).scroll(function(){
    		var scrollTop = $(window).scrollTop();
    		
    		if (scrollTop >= 100) {
    			$("header").addClass("small");
    		} else {
    			$("header").removeClass("small");
    		}
    		
    		if (scrollTop >= 200) {
    			$("section.visual .title").fadeOut(500);
    		} else {
    			$("section.visual .title").fadeIn(500);
    		}
    	});
    	
    	$("section.visual .bg").mousemove(function(e){
    		var pointer = $(window).width() / 2 - e.clientX;
    		
    		$(this).css("transform", "translate3d( "+ pointer/40 +"px , 0, 0)");
    		
    	});
    	
    	
    	$(".prev").click(function(){
    		$(this).parent().find(".inner").removeClass("moved");
    		$(this).fadeOut(0);
    		$(this).parent().find(".next").fadeIn(0);
    	});
    	
    	$(".next").click(function(){
    		$(this).parent().find(".inner").addClass("moved");
    		$(this).fadeOut(0);
    		$(this).parent().find(".prev").fadeIn(0);
    	});
    	
    
    });
    



  • ?
    콘디쌤 2017.04.25 10:16
    @charset "utf-8";
    /* CSS Document */
    
    section.technologies {
    	height: 100vh;
    	background-color: #fff;
    }
    
    section.technologies .title {
    	font-size: 30px;
    	position: absolute;
    	top: 60px;
    	left: 50%;
    	transform: translateX(-50%);
    }
    
    .layout-inner {
    	width: 800px;
    	max-width: 800px;
    	padding: 0 100px;
    	
    	position: absolute;
    	left: 50%;
    	top: 140px;
    	transform: translateX(-50%);
    }
    
    .slider {
    	width: 100%;
    	padding-top: 50%;
    	background-color: blue;
    	overflow: hidden;
    }
    .slider .inner {
    	position: absolute;
    	width: 200%;
    	top: 0; bottom: 0;
    	background-color: pink;
    	
    	transition: transform 0.5s ease-in-out;
    }
    
    .moved {
    	transform: translate3d( -50%, 0, 0);
    }
    
    .slide {
    	width: 50%;
    	float: left;
    	padding-top: 25%;
    }
    
    .prev, .next {
    	position: absolute;
    	top: 50%;
    	transform: translateY(-50%);
    	width: 40px;
    	height: 40px;
    	cursor: pointer;
    	border: 1px solid #000;
    	border-radius: 50%;
    	overflow: hidden;
    	
    	transition: background-color 0.2s;
    }
    .prev {
    	left: 0;
    	display: none;
    }
    .next {
    	right: 0;
    }
    
    .prev:before {
    	content: '';
    	width: 10px; height: 10px;
    	border-left: 1px solid #000;
    	border-top: 1px solid #000;
    	position: absolute;
    	top: 50%; left: 55%;
    	transform: translate( -50%, -50%) rotate(-45deg);
    	transition: left 0.2s;
    }
    .prev:after {
    	content: '';
    	width: 10px; height: 10px;
    	border-left: 1px solid #fff;
    	border-top: 1px solid #fff;
    	position: absolute;
    	top: 50%; left: 110%;
    	transform: translate( -50%, -50%) rotate(-45deg);
    	transition: left 0.2s;
    }
    .prev:hover {
    	background-color: #000;
    }
    .prev:hover:before {
    	left: 0%;
    }
    .prev:hover:after {
    	left: 55%;
    }
    
    
    
    .next:before {
    	content: '';
    	width: 10px; height: 10px;
    	border-right: 1px solid #fff;
    	border-bottom: 1px solid #fff;
    	position: absolute;
    	top: 50%; left: -10%;
    	transform: translate( -50%, -50%) rotate(-45deg);
    	transition: left 0.2s;
    }
    .next:after {
    	content: '';
    	width: 10px; height: 10px;
    	border-right: 1px solid #000;
    	border-bottom: 1px solid #000;
    	position: absolute;
    	top: 50%; left: 45%;
    	transform: translate( -50%, -50%) rotate(-45deg);
    	transition: left 0.2s;
    }
    .next:hover {
    	background-color: #000;
    }
    .next:hover:before {
    	left: 45%;
    }
    .next:hover:after {
    	left: 100%;
    }
    
    
    
    @media (max-width: 1000px) {
    	
    	.layout-inner {
    		width: 100%;
    		padding: 0;
    	}
    	
    }
    
    .slide .desc {
    	position: absolute;
    	width: 50%;
    	top: 0; bottom: 0;
    	background-color: green;
    }
    
    .slide .image {
    	position: absolute;
    	width: 50%;
    	top: 0; bottom: 0;
    	left: 50%;
    }
    
    .slide .image img {
    	width: 100%;
    }
    
    
    
    
    
    
  • ?
    콘디쌤 2017.04.25 10:35
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>before</title>
    
    <style>
    .box {
    	position: relative;
    	width: 100px;
    	height: 100px;
    	background-color: orange;
    	border-radius: 50%;
    	cursor: pointer;
    	overflow: hidden;
    }
    .box:before {
    	content: '';
    	position: absolute;
    	width: 40px; height: 40px;
    	background-color: blue;
    	top: 50%; left: -20%;
    	transform: translate( -50%, -50%);
    	border-radius: 50%;
    	transition: left 0.4s;
    }
    
    .box:after {
    	content: '';
    	position: absolute;
    	width: 40px; height: 40px;
    	background-color: red;
    	top: 50%; left: 50%;
    	transform: translate( -50%, -50%);
    	border-radius: 50%;
    	transition: left 0.4s;
    }
    .box:hover:before {
    	left: 50%;
    }
    .box:hover:after {
    	left: 120%;
    }
    </style>
    
    </head>
    
    <body>
    
    	<div class="box"></div>
    
    </body>
    </html>
    
  • ?
    콘디쌤 2017.04.25 11:03
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>after</title>
    
    <style>
    .box {
    	position: relative;
    	width: 200px;
    	height: 100px;
    	margin: 0 auto;
    	cursor: pointer;
    	background-color: orange;
    	overflow: hidden;
    }
    .box:before {
    	content: '';
    	width: 100px; height: 100px;
    	position: absolute;
    	background-color: red;
    	left: 0%;
    	transition: left 0.5s;
    }
    .box:after {
    	content: '';
    	width: 100px; height: 100px;
    	position: absolute;
    	background-color: red;
    	left: 50%;
    	transition: left 0.5s;
    }
    .box:hover:before {
    	left: -50%;
    }
    .box:hover:after {
    	left: 100%;
    }
    
    </style>
    
    </head>
    
    <body>
    	<div class="box"></div>
    </body>
    </html>
    
  • ?
    콘디쌤 2017.04.25 12:23
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>hover menu</title>
    
    <style>
    
    div {
    	position: relative;
    }
    
    .link {
    	margin: 10px 0;
    	position: static;
    }
    
    .link .text {
    	color: #ddd;
    	cursor: pointer;
    	width: 200px;
    }
    .link:hover .text {
    	color: navy;
    	text-decoration: underline;
    }
    .link .view {
    	position: absolute;
    	top: 0; left: 200px; right: 0;
    	height: 300px;
    	background-color: #eee;
    	display: none;
    }
    .link:hover .view {
    	display: block;
    }
    
    
    
    </style>
    
    </head>
    
    <body>
    
    	<div class="draw">
        
        	<div class="link">
            	<div class="text">Amorepacific</div>
                <div class="view">AAA</div>
            </div>
        	<div class="link">
            	<div class="text">AP WAY</div>
                <div class="view">BBB</div>
            </div>
        	<div class="link">
            	<div class="text">윤리경영</div>
                <div class="view">CCC</div>
            </div>
        	<div class="link">
            	<div class="text">글로벌네트워크</div>
                <div class="view">DDD</div>
            </div>
        	<div class="link">
            	<div class="text">비주얼 아이덴티티</div>
                <div class="view">EEE</div>
            </div>
        
        </div>
    
    </body>
    </html>
    
?

List of Articles
번호 카테고리 제목 글쓴이 날짜 조회 수
공지 디지털디자인A NCS (국가직무능력표준) - 디지털디자인 학습모듈 1 콘디쌤 2015.04.19 394
319 UI/UX 실무 XE 레이아웃 콘디쌤 2017.06.08 21
318 UI/UX 실무 실무프로젝트 - kibos 완료 콘디쌤 2017.06.01 31
317 UI/UX 실무 실무프로젝트 - 10일차 1 콘디쌤 2017.05.30 27
316 UI/UX 실무 실무프로젝트 - 9일차 1 콘디쌤 2017.05.29 27
315 UI/UX 실무 실무프로젝트 - 8일차 1 콘디쌤 2017.05.29 23
314 UI/UX 실무 실무프로젝트 - 7일차 1 콘디쌤 2017.05.26 29
313 UI/UX 실무 실무프로젝트 - 6일차 6 콘디쌤 2017.05.25 24
312 UI/UX 실무 실무프로젝트 - 5일차 2 콘디쌤 2017.05.23 54
311 UI/UX 실무 실무프로젝트 - 4일차 4 콘디쌤 2017.05.23 77
310 UI/UX 실무 실무프로젝트 - 3일차 3 콘디쌤 2017.05.20 54
309 UI/UX 실무 실무프로젝트 - 2일차 3 콘디쌤 2017.05.18 57
308 UI/UX 실무 실무프로젝트 - 1일차 4 콘디쌤 2017.05.17 101
307 UI/UX 실무 설화수 brands 메뉴 1 콘디쌤 2017.05.10 34
306 UI/UX 실무 모바일 앱 제작 - 마무리 콘디쌤 2017.05.04 53
305 UI/UX 실무 모바일 앱 제작 - 동영상 / 마무리 3 콘디쌤 2017.05.01 95
304 UI/UX 실무 모바일 앱 제작 - 입력폼 / 팝업 8 콘디쌤 2017.04.27 113
303 UI/UX 실무 모바일 앱 제작 - 상세 페이지 / 팝업 3 콘디쌤 2017.04.26 73
302 UI/UX 실무 모바일 앱 제작 기초 4 콘디쌤 2017.04.25 82
» UI/UX 실무 반응형 - 아모레퍼시픽 설화수 7일차 (복습) 5 콘디쌤 2017.04.24 76
300 UI/UX 실무 반응형 - 아모레퍼시픽 설화수 6일차 (복습) 3 콘디쌤 2017.04.23 67
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 16 Next
/ 16