실습 16일 차

구성본·2022년 7월 20일
실습

1. 학습한 내용

  • 구글링하면서 슬라이드부분을 만드는 것을 찾아보고 살펴보던 중에 몇몇 사이트들이 도움이 되었다
  • 전체적인 배경 슬라이드를 코딩한 부분을 가져올 수 있는게 있어서 적용시켜 봤다
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/style3.css">
    <!-- fontawesome -->
    <script src="https://kit.fontawesome.com/01f338039f.js" crossorigin="anonymous"></script>
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <!-- codrops slider -->
	<script src="js/modernizr.custom.js"></script>


</head>

<body>
    <header>
        <div class="container">
            <h1>
                <!-- Resoft Logo -->
                <button data-animation-scroll="true" data-target="#main"><img src="./img/resoft logo.png"></button>
            </h1>
                <!-- Nav Bar -->
            <nav>
                <ul>
                    <li>
                        <button data-animation-scroll="true" data-target="#company">회사소개</button>
                    </li>
                    <li>
                        <button data-animation-scroll="true" data-target="#work">사업현황</button>
                    </li>
                    <li>
                        <button data-animation-scroll="true" data-target="#information">정보마당</button>
                    </li>
                <!-- Hamberger Button -->
                    <li class="btn">
                        <button type="button" onclick="doDisplay()"><i class="fa-solid fa-bars" style="color:white"></i></button>
                    </li>
                </ul>
            </nav>    
        </div>

                <!-- Hamberger Navbar -->
        <div id="myNav" class="overlay">
            <div class="overlay-content">
                <a href="#">REsoft소개</a>
                <a href="#">연혁</a>
                <a href="#">조직도</a>
                <a href="#">특허&인증</a>
                <a href="#">오시는 길</a>
            </div>
            <div class="overlay-content">
                <a href="#">ECOCE</a>
                <a href="#">moaDo</a>
                <a href="#">Etc</a>
              </div>
              <div class="overlay-content">
                <a href="#">REsoft소식</a>
              </div>
        </div>

        <!-- Main Text -->
        <div class="text-box">
            <div class="hd-1">
                <p class="main-text">Evolution<br />With New Software</p>
                <p class="sub-text">
                    <span>Mobile APP(Android/iOS) Development, </span>
                    <span>AI Bigdata Analysis, MetaVerse, </span>
                    <span>Responsive WEBsite, Brand Design Launch, </span>
                    <span>ICT Consulting</span>
                </p>

            <!-- codrops Slide Control -->
                <div class="main">
                    <ul id="cbp-bislideshow" class="cbp-bislideshow">
                        <li><img src="./img/Head-back-img.png" alt="image01"/></li>
                        <li><img src="./img/back-slide-2.png" alt="image02"/></li>
                        <li><img src="./img/back-slide-3.png" alt="image03"/></li>
                    </ul>
                    <div id="cbp-bicontrols" class="cbp-bicontrols">
                        <span class="cbp-biprev"></i></span>
                        <span class="cbp-bipause"></span>
                        <span class="cbp-binext"></i></span>
                    </div>                    
                </div>

            </div>
        </div>

        <!-- Hamberger Script -->
        <script> 
            var bDisplay = true; 
            function doDisplay(){ 	
                var con = document.getElementById("myNav"); 	
                if(con.style.display=='none'){ 		
                    con.style.display = 'block'; 	
                }else{ 		
                    con.style.display = 'none'; 	
                } 
            } 
        </script>

         <!-- codrops slider  -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
		<script src="js/jquery.imagesloaded.min.js"></script>
		<script src="js/cbpBGSlideshow.min.js"></script>
		<script>
			$(function() {
				cbpBGSlideshow.init();
			});
		</script>

    </header>
</body>
</html>

-css

@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&family=Noto+Sans+KR&display=swap');

/******************************** codrops slider component*******************************/
@font-face {
	font-family: 'entypo';
	src:url('../fonts/controls/entypo.eot');
	src:url('../fonts/controls/entypo.eot?#iefix') format('embedded-opentype'),
		url('../fonts/controls/entypo.woff') format('woff'),
		url('../fonts/controls/entypo.ttf') format('truetype'),
		url('../fonts/controls/entypo.svg#entypo') format('svg');
	font-weight: bold;
	font-style: normal;
}

* {
    margin: 0;
    padding: 0;
    font-family: 'Noto Sans', sans-serif;
    box-sizing: border-box;
    vertical-align: baseline;
}

body {
    max-width: 1920px;
    margin: 0 auto;
}
li {
    list-style: none;
}


/********************************* 헤더부분 *************************************/
header {
    width: 100%;
    height: 900px;
    position: fixed;
    z-index: 1000;
    top:0;
}

header .container{
    display: flex;
    justify-content: space-between; /* 양 끝으로 배치 */
    align-items: center;
    width: 100%;
    border: 1px solid #ffff;
    height: 80px;
}

header nav ul{
    display: flex; /* 메뉴 가로 배치 */
}

header nav ul li{
    padding: 2rem;
}

header button{
    background: transparent;
    border: 0;
    cursor: pointer;
    color: white;
}

/************************************* 로고 ****************************************/
header h1 button{ 
    font-weight: bold;
    color: white;
    margin-left: 360px;
}
header h1 button img {
    width: 133px;
    height: 30px;
}

/*************************** 메뉴 ********************************/
header nav ul li button {
    font-size: 20px;
}
header nav ul li.btn button {
    margin-right: 220px;
    margin-left: 30px;
    font-size: 32px;
}


.text-box {
    position: relative;
    height: 100%;
}

.hd-1 {
    position: absolute;
    top: 400px;
    left: 240px;
    color: #ffff;
    letter-spacing: 0;
    text-align: left;
}

.hd-1 p.main-text {
    font-size: 40px;
    font-weight: bold;
    line-height: 140%;
    margin-bottom: 50px;
}

.hd-1 p.sub-text {
    word-break: normal;
    font-size: 18px;
    width: 60%;
}

.hd-1 img {
    margin-top: 80px;
    opacity: 0.5;
}
.hd-1 img.left{
    width: 60px;
    height: 40px;
}
.hd-1 img.center{
    width: 15px;
    height: 21px;
    margin-bottom: 10px;
    margin-left: 15px;
    margin-right: 15px;
}
.hd-1 img.right{
    width: 60px;
    height: 40px;
}

/* Hidden */
.overlay {
    height: 210px;
    width: 100%;
    position: fixed;
    z-index: 1;
    top: 80px;
    left: 0;
    background-color: rgba(47, 88, 163, 0.9);
    overflow-y: hidden;
    transition: 0.5s;
}

.overlay-content {
    float: left;
    top: 10%;
    text-align: left;
    margin-right: 50px;
    margin-top: 15px;
    line-height: 0.7;
}
.overlay-content:first-child {
    margin-left: 1169px;
}
.overlay-content:nth-child(2) {
    margin-left: -22px;
}
.overlay-content:last-child {
    margin-left: 10px;
}

.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 20px;
    color: #ffff;
    display: block;
    transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
    color: black;
}

/******************************* codrops slider ************************************/
.cbp-bislideshow {
	list-style: none;
	width: 100%;
	height: 900px;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	padding: 0;
	margin: 0;
}

.cbp-bislideshow li {
	position: absolute;
	width: 101%;
	height: 101%;
	top: -0.5%;
	left: -0.5%;
	opacity: 0;
	-webkit-transition: opacity 1s;
	-moz-transition: opacity 1s;
	transition: opacity 1s;
    filter: brightness(30%);
}

.backgroundsize .cbp-bislideshow li {
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	background-position: center center;
}

/************************** hide the images ***************************/
.backgroundsize .cbp-bislideshow li img {
	display: none;
}

.cbp-bislideshow li img {
	display: block;
	width: 100%;
}

/*************************** slider controls ************************/
.cbp-bicontrols {
	position: fixed;
	width: 300px;
	height: 100px;
	margin: -50px 0 0 -150px;
	top: 88%;
	left: 18%;
}

.cbp-bicontrols span {
	float: left;
	width: 100px;
	height: 100px;
	position: relative;
	cursor: pointer;
}

.cbp-bicontrols span:before {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	text-align: center;
	font-family: 'entypo';
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 100px;
	font-size: 40px;
	color: #fff;
	-webkit-font-smoothing: antialiased;
	opacity: 0.7;
}

.cbp-bicontrols span:hover:before {
	opacity: 1;
}

.cbp-bicontrols span:active:before {
	top: 2px;
}

span.cbp-biplay:before {
	content: "\e002";
}

span.cbp-bipause:before {
	content: "\e003";
}

span.cbp-binext:before {
	content: "\e000";
}

span.cbp-biprev:before {
	content: "\e001";
}

.cbp-bicontrols span.cbp-binext {
	float: right;
}

/* Fallback */

.no-js.no-backgroundsize .cbp-bislideshow li:first-child {
	opacity: 1;
}

.no-js.backgroundsize .cbp-bislideshow li:first-child img {
	display: block;
}

-js(user made)

/**
 * cbpBGSlideshow.js v1.0.0
 * http://www.codrops.com
 *
 * Licensed under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * Copyright 2013, Codrops
 * http://www.codrops.com
 */
var cbpBGSlideshow = (function() {

	var $slideshow = $( '#cbp-bislideshow' ),
		$items = $slideshow.children( 'li' ),
		itemsCount = $items.length,
		$controls = $( '#cbp-bicontrols' ),
		navigation = {
			$navPrev : $controls.find( 'span.cbp-biprev' ),
			$navNext : $controls.find( 'span.cbp-binext' ),
			$navPlayPause : $controls.find( 'span.cbp-bipause' )
		},
		// current item´s index
		current = 0,
		// timeout
		slideshowtime,
		// true if the slideshow is active
		isSlideshowActive = true,
		// it takes 3.5 seconds to change the background image
		interval = 3500;

	function init( config ) {

		// preload the images
		$slideshow.imagesLoaded( function() {
			
			if( Modernizr.backgroundsize ) {
				$items.each( function() {
					var $item = $( this );
					$item.css( 'background-image', 'url(' + $item.find( 'img' ).attr( 'src' ) + ')' );
				} );
			}
			else {
				$slideshow.find( 'img' ).show();
				// for older browsers add fallback here (image size and centering)
			}
			// show first item
			$items.eq( current ).css( 'opacity', 1 );
			// initialize/bind the events
			initEvents();
			// start the slideshow
			startSlideshow();

		} );
		
	}

	function initEvents() {

		navigation.$navPlayPause.on( 'click', function() {

			var $control = $( this );
			if( $control.hasClass( 'cbp-biplay' ) ) {
				$control.removeClass( 'cbp-biplay' ).addClass( 'cbp-bipause' );
				startSlideshow();
			}
			else {
				$control.removeClass( 'cbp-bipause' ).addClass( 'cbp-biplay' );
				stopSlideshow();
			}

		} );

		navigation.$navPrev.on( 'click', function() { 
			navigate( 'prev' ); 
			if( isSlideshowActive ) { 
				startSlideshow(); 
			} 
		} );
		navigation.$navNext.on( 'click', function() { 
			navigate( 'next' ); 
			if( isSlideshowActive ) { 
				startSlideshow(); 
			}
		} );

	}

	function navigate( direction ) {

		// current item
		var $oldItem = $items.eq( current );
		
		if( direction === 'next' ) {
			current = current < itemsCount - 1 ? ++current : 0;
		}
		else if( direction === 'prev' ) {
			current = current > 0 ? --current : itemsCount - 1;
		}

		// new item
		var $newItem = $items.eq( current );
		// show / hide items
		$oldItem.css( 'opacity', 0 );
		$newItem.css( 'opacity', 1 );

	}

	function startSlideshow() {

		isSlideshowActive = true;
		clearTimeout( slideshowtime );
		slideshowtime = setTimeout( function() {
			navigate( 'next' );
			startSlideshow();
		}, interval );

	}

	function stopSlideshow() {
		isSlideshowActive = false;
		clearTimeout( slideshowtime );
	}

	return { init : init };

})();
  • 구현은 가능했지만 왠지 합쳤을 때 문제가 있을 수도 있고
  • 완전한 클론코딩으로서는 미완성이라는 부분이 아쉬워서 다르게 파고들수있는 부분이 있나 찾아보고 있다

2. 학습한 내용 중 어려웠던 점

  • 애니메이션을 구현하려니 버튼에 애니메이션을 따로 줘야했고 슬라이드 함수를 따로 구현해야 해서 복잡한 면이 많은 것 같다

3. 해결방법

  • 클론코딩으로 응용해보려고 한다
  • 오늘은 일이 있어서 많은 부분을 코딩하지 못했지만 결과론적으로는 나쁘지 않은 결과를 만들어서 그나마 다행이다

4. 학습소감

  • 구현해 나가야할게 점점 늘어나가지만 만드는 과정이 꽤나 재미있어서 다행이다
  • 애니메이션 함수 부분은 언제쯤 편하게 볼 수 있을까
profile
구성본
코딩공부중
이전 포스트

실습 15일 차

다음 포스트

실습 17일 차

0개의 댓글