Front-end 국비지원 #035일

JooSehyun·2022년 12월 4일
JavaScriptafteranimate()animationappendappendTobeforefadehide()insertAfterinsertBeforejqueryprepend()prependToshow()slidezeplin반응형반응형제작반응형페이지제플린
0

반응형 페이지 제작 1-1

이번 시간에는 제플린을 사용하여 반응형 페이지를 제작한다.

제플린이란?

제플린을 쓰는 이유

  • 이미지 슬라이스 사용이 편리하다.
  • 텍스트 선택시 폰트 정보가 다 나온다. CSS로 나오는데 필요한 부분만 셀렉해서 사용하는 것을 추천.
  • 좌표값을 다 알려준다.

제플린의 특징

  • 프로젝트 1개는 무료
  • 스케치와 psd를 활용할 수 있다.
  • 개발자가 스케치를 활용 할 수 없을때 사용한다.
  • 프로젝트 디바이스 선택이 중요하다
  • IOS선택
  • Untitle에 프로젝트 이름 입력
  • 스케치, XD, 피그마, 포토샵을 볼 수 있다.
  • 모래시계는 작업 히스토리다.
  • 안드로이드 선택 > 우측 프로젝트 명 아래에 안드로이드 클릭하면 해상도 설정할 수 있다.

zeplin 을 검색한다.

웹으로도 가능하고 앱설치도 가능하다. 로그인을 하면 포토샵 psd로 작업한 프로젝트를 불러올수 있다. 폰트사이즈 컬러 등 css 확인 가능.

HTML

<ul id="skip">
		<li><a href="#header">헤더 바로가기</a></li>
		<li><a href="#nav">메뉴 바로가기</a></li>
		<li><a href="#content">내용 바로가기</a></li>
	</ul>
	<div id="wrap">
		<header id="header">
			<div class="container">
				<div class="header_inner">
					<div class="header_inner_flex">
						<h1 class="logo"><a href="index01_01.html"><img src="./images/logo.png" alt="mangoboardlogo"></a></h1>
						<nav id="nav">
							<ul>
								<li><a href="#">템플릿</a></li>
								<li><a href="#">사용가이드</a></li>
								<li><a href="#">사용자갤러리</a></li>
								<li><a href="#">요금제/저작권</a></li>
							</ul>
						</nav>
					</div>
					<div class="gnb">
						<ul class="gnb-sub">
							<li><a href="#">로그인</a></li>
							<li><a href="#">회원가입</a></li>
							<li><a href="#">고객센터</a></li>
							<li><a href="#">실험실</a></li>
						</ul>
						<ul class="sns">
							<li><a href="#"><img src="./images/blog_ico.png" alt="블로그"></a></li>
							<li><a href="#"><img src="./images/facebook_ico.png" alt="페이스북"></a></li>
							<li><a href="#"><img src="./images/youtube_ico.png" alt="유튜브"></a></li>
						</ul>
					</div>
				</div>
				<div class="mobile_header">
					<ul>
						<li>
							<a href="#" class="app-btn">
								<span class="bar bar1"></span>
								<span class="bar bar2"></span>
								<span class="bar bar3"></span>
							</a>
							<ul class="mobile-nav">
								<li><a href="#">템플릿</a></li>
								<li><a href="#">사용가이드</a></li>
								<li><a href="#">사용자갤러리</a></li>
								<li><a href="#">요금제/저작권</a></li>
							</ul>
						</li>
						<li><a href="#"><img src="./images/logo.png" alt="mobileLogo"></a></li>
						<li><a href="#" class="mobile-find-btn"><i class="fas fa-search"></i></a></li>
					</ul>
				</div>
			</div>
		</header>

CSS

*{box-sizing: border-box;}
body{font-family: 'Noto Sans KR', sans-serif;}

/* 공통속성 */
.container{width: 1160px; margin: 0 auto; height: inherit; background: rgba(0, 0, 0, .3);}

/* 레이아웃 */
#header{width: 100%; height: 80px; background: rgb(255, 255, 255); position: fixed; top: 0; left: 0; z-index: 999;}

/* header */
.header_inner{position: relative;}
.header_inner .header_inner_flex{display: flex; height: 80px; align-items: center;}
.header_inner h1{margin-right: 10%;}
.header_inner nav ul{display: flex;}
.header_inner nav ul li{margin-right: 30px;}
.header_inner nav ul li a{color: #333; font-size: 18px; font-weight: 500; letter-spacing: -2.52px;}
.header_inner nav ul li a:hover{color:#fecb29;}
.header_inner .gnb{display: flex; position: absolute; right: 0; top: 25px;}
.header_inner .gnb ul{display: flex;}
.header_inner .gnb > .gnb-sub{position: relative; top: 5px;}
.header_inner .gnb ul li{margin-right: 18px;}
.header_inner .gnb .sns li:last-child{margin-right: 0;}
.header_inner .gnb .sns li a{}
.header_inner .gnb .sns li a img{}
.mobile_header{display: none;}


/* media screen */
@media screen and (max-width: 1160px){
    .container{width: 100%; padding: 0 20px;}
}
@media screen and (max-width: 1100px){
    .header_inner .gnb .sns{display: none;}
    .header_inner .gnb ul li:last-child{margin-right: 0;}
}
@media screen and (max-width: 950px){
    .header_inner .gnb > .gnb-sub{top: -20px;}
    .header_inner nav ul li:last-child{margin-right: 0;}
    .header_inner .header_inner_flex{justify-content: space-between;}
    
    .main-top-wrap .main-top-left h2{font-size: 28px; margin-top: 10px;}
    /* .main-top-wrap .main-top-left h2 span a{position: relative; left: 10px; top: 9px;} */
    .main-top-wrap .main-top-left h3{font-size: 52px;}
}
@media screen and (max-width: 880px){
    .main-top-wrap{display: flex; flex-wrap: wrap;}
    .main-top-wrap .main-top-left{flex-basis: 100%; border-right: none; }
    .main-top-wrap .main-top-left h2{font-size: 32px; text-align: center;}
    .main-top-wrap .main-top-left h3{font-size: 62px; text-align: center;}
    .main-top-wrap .main-top-right{flex-basis: 100%; margin-top: 20px;}
    .main-top-wrap .main-top-right .news-box{width: 90%; margin: 0 auto; background: #ccc; padding: 20px;}
    .main-top-wrap .main-top-left::after{display: none;}
}
@media screen and (max-width: 720px){
    #header{width: 100%; height: 60px; background: rgb(216, 216, 48);}
    .header_inner{display: none;}
    .mobile_header{display: block;}
    .mobile_header ul{display: flex; height: 60px; align-items: center; justify-content: space-between;}
    .mobile_header>ul>li:first-child{width: 26px; height: 16px;}
    .mobile_header>ul>li:first-child .app-btn{width: 26px; height: 16px; display: block; position: relative;}
    .mobile_header ul li{}
    .mobile_header ul li .app-btn .bar{width: 100%; height: 2px; background: #555; display: block; position: absolute; top: 0; left: 0; transition: .3s;}
    .mobile_header ul li .app-btn .bar1{top: 0;}
    .mobile_header ul li .app-btn .bar1.add{top: 50%; transform: rotate(45deg); margin-top: -1px;}
    .mobile_header ul li .app-btn .bar2{top: 50%;}
    .mobile_header ul li .app-btn .bar2.add{opacity: 0;}
    .mobile_header ul li .app-btn .bar3{top: 100%;}
    .mobile_header ul li .app-btn .bar3.add{top: 50%; transform: rotate(-45deg); margin-top: -1px;}
    .mobile_header ul li .mobile-nav{display: none; position: absolute; top: 60px; width: 100%; left: 0; height: 200px;}
    .mobile_header ul li .mobile-nav li{height: 50px; border-bottom: 1px solid #ddd; background: rgba(0,0,0,.8); line-height: 50px; text-align: center;}
    .mobile_header ul li .mobile-nav li a{color : #ebebeb;}
    .mobile_header ul li .mobile-find-btn{font-size: 24px; color: #555;}

    #mainTop{width: 100%; margin-top: 60px; padding: 30px 0;}
    .main-top-wrap .main-top-left h2{font-size: 24px;}
    .main-top-wrap .main-top-left h3{font-size: 32px;}
}

결과

JQuery

after, before, insertAfter, insertBefore

결과

HTML

    <div id="wrap">
        <p>내용1</p>
        <p>내용2</p>
        <p>내용3</p>
        <p>내용4</p>
    </div>

CSS

*{margin: 0; padding: 0;}
#wrap{width: 500px; height: 400px; margin: 100px auto; background: pink; padding: 30px;}
p{line-height: 50px; border-bottom: 1px solid #ddd;}

Script

$('#wrap p:eq(2)').after("<p>After로 추가</p>");
$('#wrap p:eq(0)').before("<p>Before로 추가</p>");
$("<p>insertAfter 추가</p>").insertAfter("#wrap p:eq(1)");
$("<p>insertBefore 추가</p>").insertBefore("#wrap p:eq(0insertAfter_insertBefore)");

JQuery Animation

Slide 이미지 만들기

결과

HTML

<div class="boxWrap">
        <div class="container">
            <span class="left"><a href="#">&lt</a></span>
            <div class="insertBox">
                <ul>
                    <li><a href="#"><img src="./img/cat01.png" alt=""></a></li>
                    <li><a href="#"><img src="./img/cat02.jpg" alt=""></a></li>
                    <li><a href="#"><img src="./img/cat03.jpg" alt=""></a></li>
                    <li><a href="#"><img src="./img/cat04.JPG" alt=""></a></li>
                    <li><a href="#"><img src="./img/cat05.JPG" alt=""></a></li>
                    <li><a href="#"><img src="./img/cat06.JPG" alt=""></a></li>
                    <li><a href="#"><img src="./img/cat07.JPG" alt=""></a></li>
                    <li><a href="#"><img src="./img/cat08.JPG" alt=""></a></li>
                    <li><a href="#"><img src="./img/cat09.JPG" alt=""></a></li>
                    <li><a href="#"><img src="./img/cat10.JPG" alt=""></a></li>
                    <li><a href="#"><img src="./img/cat11.JPG" alt=""></a></li>
                    <li><a href="#"><img src="./img/cat12.JPG" alt=""></a></li>
                    <li><a href="#"><img src="./img/cat13.JPG" alt=""></a></li>
                </ul>
            </div>
            <span class="right"><a href="#">&gt</a></span>
        </div>
    </div>

CSS

*{margin:0; padding: 0;}
a{font-size: 30px; text-decoration: none; font-weight: bold; color: #000;}
ul{list-style: none;}
.boxWrap{padding: 50px 0;}
.boxWrap .container{width: 1000px; margin: 0 auto; position: relative; background: red; height: 250px;}
.boxWrap .container .left{position: absolute; left: -50px; top: 75px;}
.boxWrap .container .insertBox{width: 1000px; overflow: hidden; height: 250px;}
.boxWrap .container .insertBox ul{width: 2600px; height: 250px; position: relative; left: 0; top: 0; }
.boxWrap .container .insertBox ul li{float: left; width: 200px; height: 100%; padding: 0 5px; box-sizing: border-box;}
.boxWrap .container .insertBox ul li a{display: block;}
.boxWrap .container .insertBox ul li a img{width: 100%; height: 250px;}
.boxWrap .container .right{position: absolute; right: -50px; top: 75px;}

Script

const $right=$('.right');
const $left=$('.left');
const $moving=$('.insertBox>ul');

$right.click(function(){
    $moving.stop().animate({left:200*-1},200,function(){
        $(this).children("li:first").insertAfter($(this).children("li:last"));
        $(this).css({left:0})
    });

});

$left.click(function(){
   $moving.children("li:last").insertBefore($moving.children("li:first"));
   $moving.css({left:200*-1});
   $moving.stop().animate({left:0},200);
});

원리는 next 나 prev 버튼을 누르면 첫번째 사진이 제일 반대편으로 넘어가서 목록을 계속 만들어 주는것이다. prev 버튼은 먼저 이동이 되고 나서 슬라이드 이동이 되는 방식이다.

append, appendTo, prepend, prependTo

HTML

<body>
    <div id="basket">basket</div>
    <div id="apple">apple</div>
    <div id="banana">banana</div>
    <div id="orange">orange</div>
</body>

CSS

        body{width: 500px; margin: 100px auto;}
        #basket{padding: 10px; background: pink;}
        #apple{margin: 5px; background: orangered; padding: 5px;}
        #banana{margin: 5px; background: rgb(250, 233, 4); padding: 5px;}
        #orange{margin: 5px; background: rgb(255, 136, 0); padding: 5px;}

Script

const basket=$('#basket');
const apple=$('#apple');
const banana=$('#banana');
const orange=$('#orange');

append

basket.append(apple);
basket.append(orange);
basket.append(banana);

appendTo

apple.appendTo(basket);
orange.appendTo(basket);
banana.appendTo(basket);

prepend

basket.prepend(apple);
basket.prepend(orange);
basket.prepend(banana);

prependTo

apple.prependTo(basket);
orange.prependTo(basket);
banana.prependTo(basket);

이렇게 HTML의 조작 없이 스크립트에서 append, appendTo, prepend, prependTo 로 감싸기가 된다.

appendTo 와 prependTo 는 대상이 거꾸로 된다 bascket으로 해야 담기는 코드를 볼 수 있다.

show hide

결과

HTML

    <div id="div1">처음에 보이지 않는 상자</div>
    <div id="div2">처음부터 보이는 상자</div>

CSS

        div{width: 500px; margin: 20px auto; border: 3px solid #ddd;}
        #div1{display: none;}

Script

$('#div1').show(1000);
$('#div2').hide(1000);

hide 상자는 1초뒤에 숨겨지고 show는 1초뒤에 보여진다.

fade

결과

HTML

    <div class="container"><div id="box1">fadeIn Example</div></div>
    <div class="container"><div id="box2">fadeOut Example</div></div>
    <div class="container"><div id="box3">fadeTo Example</div></div>

CSS

        body{font-size: 5em;}
        .container{height: 120px;}
        .container>div{padding: 20px; box-sizing: border-box;}
        #box1{background: pink; display: none;}
        #box2{background: rgb(45, 153, 167);}
        #box3{background: rgb(125, 202, 23);}

Script

$('#box1').fadeIn('fast');
$('#box2').fadeOut('fast');
$('#box3').fadeTo(3000, .3);
profile
JooSehyun
이전 포스트

Front-end 국비지원 #034일

다음 포스트

Front-end 국비지원 #036일

0개의 댓글