Front-end 국비지원 #037일

JooSehyun·2022년 12월 5일
@TargetAPIPauseaddClassclassListclickkeyframesmutednth-child(2n)playremoveClassvideo반응형반응형제작반응형페이지비디오비디오컨트롤카카오맵카카오맵API
0

반응형 페이지 제작 1-3

전체 결과

1-3 진행 결과

오늘은 배너와 배너 하단 컨텐츠 부분을 제작하였다.

HTML

<div id="videoBanner" class="video-banner">
	<div class="container">
    	<div class="playBtn">
        	<img src="./images/mango_playicon.png" alt="mangoplayicon">
        </div>
    </div>
</div>
<section id="template" class="template">
				<div class="container">
					<h2>막막한 디자인? 템플릿이 도와 드립니다.</h2>
					<p>
						온라인, 모바일, 인쇄용까지 다양한  템플릿을 활용하면<br>
						누구나 고퀄리티로 척척. 디자인이 즐거워집니다.
					</p>
					<div class="tamplate-line">
						<ul class="title">
							<li class="on">
								<a href="#">인포그래픽</a>
								<span class="template-text">
									학습자료, 이력서, 타임라인, 대시보드, 캠페인 등
								</span>
							</li>
							<li>
								<a href="#">네임카드</a>
								<span class="template-text">
									학습자료, 이력서, 타임라인, 대시보드, 캠페인 등
								</span>
							</li>
							<li>
								<a href="#">카드뉴스</a>
								<span class="template-text">
									학습자료, 이력서, 타임라인, 대시보드, 캠페인 등
								</span>
							</li>
							<li>
								<a href="#">현수막</a>
								<span class="template-text">
									학습자료, 이력서, 타임라인, 대시보드, 캠페인 등
								</span>
							</li>
							<li>
								<a href="#">상세페이지</a>
								<span class="template-text">
									학습자료, 이력서, 타임라인, 대시보드, 캠페인 등
								</span>
							</li>
							<li>
								<a href="#">세로베너</a>
								<span class="template-text">
									학습자료, 이력서, 타임라인, 대시보드, 캠페인 등
								</span>
							</li>
							<li>
								<a href="#">SNS</a>
								<span class="template-text">
									학습자료, 이력서, 타임라인, 대시보드, 캠페인 등
								</span>
							</li>
							<li>
								<a href="#">이벤트.홍보페이지</a>
								<span class="template-text">
									학습자료, 이력서, 타임라인, 대시보드, 캠페인 등
								</span>
							</li>
							<li>
								<a href="#">프레젠테이션</a>
								<span class="template-text">
									학습자료, 이력서, 타임라인, 대시보드, 캠페인 등
								</span>
							</li>
							<li>
								<a href="#">유튜브채널아트</a>
								<span class="template-text">
									학습자료, 이력서, 타임라인, 대시보드, 캠페인 등
								</span>
							</li>
							<li>
								<a href="#">배너</a>
								<span class="template-text">
									학습자료, 이력서, 타임라인, 대시보드, 캠페인 등
								</span>
							</li>
							<li>
								<a href="#">웹툰스타일</a>
								<span class="template-text">
									학습자료, 이력서, 타임라인, 대시보드, 캠페인 등
								</span>
							</li>
							<li>
								<a href="#">포스터.전단</a>
								<span class="template-text template-text1">
									학습자료, 이력서, 타임라인, 대시보드, 캠페인 등
								</span>
							</li>
							<li>
								<a href="#">로고 <em class="ellipse">N</em></a>
								<span class="template-text template-text2">
									학습자료, 이력서, 타임라인, 대시보드, 캠페인 등
								</span>
							</li>
							<li>
								<a href="#">유튜브썸네일</a>
								<span class="template-text template-text3">
									학습자료, 이력서, 타임라인, 대시보드, 캠페인 등
								</span>
							</li>
						</ul>
						<ul class="btn">
							<li class="on ir_so">버튼</li>
							<li class="ir_so">버튼</li>
							<li class="ir_so">버튼</li>
							<li class="ir_so">버튼</li>
							<li class="ir_so">버튼</li>
							<li class="ir_so">버튼</li>
							<li class="ir_so">버튼</li>
							<li class="ir_so">버튼</li>
							<li class="ir_so">버튼</li>
							<li class="ir_so">버튼</li>
							<li class="ir_so">버튼</li>
							<li class="ir_so">버튼</li>
							<li class="ir_so">버튼</li>
							<li class="ir_so">버튼</li>
							<li class="ir_so">버튼</li>
						</ul>
					</div>
				</div>
			</section>

CSS

#videoBanner{width: 100%; height: 610px; }
#template{width: 100%;}

/* videoBanner */
.video-banner{height: 610px; background: #fcce01 url(../images/mango_player3.png) no-repeat center center; position: relative;}
.video-banner .playBtn{position: absolute; top: 50%; left: 50%; margin-top: -57px; margin-left: -57px; /* transform: translate(-50%, -50%);  */animation: ani 1s infinite alternate;}

/* section */
.template{padding: 70px 0;}
.template h2{text-align: center; font-size: 40px; color: #1e1e1e; margin-bottom: 27px;}
.template p{text-align: center; font-size: 17px; color: #777;}
.template .tamplate-line{margin-top: 77px;}
.template .tamplate-line ul{display: flex;}
.template .tamplate-line ul li{position: relative;}
.template .tamplate-line .title li:nth-child(2n){top: 55px;}
.template .tamplate-line .title li:nth-child(1){left: 2px;}
.template .tamplate-line .title li:nth-child(2){left: 11px;}
.template .tamplate-line .title li:nth-child(3){left: 32px;}
.template .tamplate-line .title li:nth-child(4){left: 57px;}
.template .tamplate-line .title li:nth-child(5){left: 75px;}
.template .tamplate-line .title li:nth-child(6){left: 87px;}
.template .tamplate-line .title li:nth-child(7){left: 119px;}
.template .tamplate-line .title li:nth-child(8){left: 121px;}
.template .tamplate-line .title li:nth-child(9){left: 91px;}
.template .tamplate-line .title li:nth-child(10){left: 80px;}
.template .tamplate-line .title li:nth-child(11){left: 84px;}
.template .tamplate-line .title li:nth-child(12){left: 110px;}
.template .tamplate-line .title li:nth-child(13){left: 112px;}
.template .tamplate-line .title li:nth-child(14){left: 128px;}
.template .tamplate-line .title li:nth-child(15){left: 150px;}
.template .tamplate-line .title li.on .template-text{display: block;}
.template .tamplate-line .title li a{font-size: 16px; color: #666;}
.template .tamplate-line .title li .template-text{position: absolute; width: 280px; display: none; top: -30px; background: #777; color: #fff; padding: 3px; border-radius: 13px; text-align: center;}
.template .tamplate-line .title li .template-text1{left: -48px;}
.template .tamplate-line .title li .template-text2{left: -142px;}
.template .tamplate-line .title li .template-text3{left: -194px;}
.template .tamplate-line .title li:nth-child(2n) .template-text{top: 30px;}
.ellipse{position: absolute; width: 18px; height: 18px; border-radius: 50%; background: #fcce00; text-align: center; font-size: 12px; color: #fff; top: 4px; left: 32px;}
.btn{display: flex; justify-content: space-around; margin-top: 10px;}
.btn li{width: 14px; height: 14px; border-radius: 50%; border: 1px solid #757575;}
.btn li.on{background-color: #757575;}

/* animation */
@keyframes ani {
    0%{transform: scale(1);}
    100%{transform: scale(1.2);}
}

2의 배수로(2n) 으로 위아래 정렬을 했다. 각 relative와 absolute를 활용하여 1~15 nth-child를 이용하여 위치를 조절했다.

Script

const bottomRadius=$('.btn li');
const line=$('.tamplate-line .title li');
bottomRadius.click(function(){
    bottomRadius.removeClass('on');
    $(this).addClass('on');
    let lines=$(this).index();
    line.removeClass('on');
    line.eq(lines).addClass('on');
});

.btn li 를 bottomRadius 변수로 만들고 .tamplate-link .title li 도 line이라는 변수를 선언했다. 첫번째 li에는 on 이라는 클래스를 지정했고 click 펑션을 사용하여 on으로 체크효과를 주는 클래스를 removeClass와 addClass를 사용하여 변하게 만든다. 함수가 실행되기전 모든 클래스 on 효과를 remove하고 지금 클릭하고 있는 this에 addClass '.on'을 클래스를 추가하여 체크박스 효과를 낸다.

JavaScript

비디오컨트롤

결과

HTML

 <div id="wrap">
        <video id="videoPlay" src="./video/cat.mp4"></video>
        <br>
        <button id="vplay">Play</button>
        <button id="vpause">Pause</button>
        <button id="vmuted">Muted</button>
        <button id="vmutedOn">MutedOn</button>
    </div>

CSS

#wrap{text-align: center;}
button{padding: 10px 15px; background: rgb(255, 131, 212); border: none; border-radius: 15px; font-weight: bold; color: #fff;}

JavaScript로 구현

JavaScript

const videoPlay=document.getElementById('videoPlay');
const play=document.getElementById('vplay');
const pause=document.getElementById('vpause');
const muted=document.getElementById('vmuted');
const mutedOn=document.getElementById('vmutedOn');

play.addEventListener('click',function(){
    videoPlay.play();
});
pause.addEventListener('click',function(){
    videoPlay.pause();
});
muted.addEventListener('click',function(){
    videoPlay.muted=true;
});
mutedOn.addEventListener('click',function(){
    videoPlay.muted=false;
});

JQuery로 구현

const $videoPlay1=$('#videoPlay1');
$('#vplay').click(function(){
    $videoPlay.get(0).play();
});
$('#vpause').click(function(){
    $videoPlay.get(0).pause();
});
$('#vmuted').click(function(){
    $videoPlay.get(0).muted=true;
});
$('#vmutedOn').click(function(){
    $videoPlay.get(0).muted=false; //get(0) 은 문법이다. 2번째 동영상이 온다고 해서 get(1)이 되지 않는다.
$('#vplay1').click(function(){
    $videoPlay1.get(0).play();
});

tab menu 만들기

결과

HTML

<div id="wrap">
        <ul class="tab-menu">
            <li><a href="#tabs-1" class="active">menu1</a></li>
            <li><a href="#tabs-2">menu2</a></li>
            <li><a href="#tabs-3">menu3</a></li>
        </ul>
        <div id="tabContent">
            <div id="tabs-1">
                <h2>Menu1</h2>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Pariatur laudantium dolorum est, sint facere, obcaecati, voluptate corrupti maiores doloremque repellat adipisci illo nostrum libero ut dolor commodi nobis? Tempore, placeat!</p>
            </div>
            <div id="tabs-2">
                <h2>Menu2</h2>
                <p>adipisicing elit. Pariatur laudantium dolorum est, sint facere, obcaecati, voluptate corrupti maiores doloremque repellat adipisci illo nostrum libero ut dolor commodi nobis? Tempore, placeat!</p>
            </div>
            <div id="tabs-3">
                <h2>Menu3</h2>
                <p>laudantium dolorum est, sint facere, obcaecati, voluptate corrupti maiores doloremque repellat adipisci illo nostrum libero ut dolor commodi nobis? Tempore, placeat!</p>
            </div>
        </div>
    </div>

CSS

ul{list-style: none;}
a{text-decoration: none; color: #333;}
#wrap{width: 960px; margin: 50px auto;}
.tab-menu{display: flex; padding-left: 0;}
.tab-menu li{width: 100px; text-align: center; margin-right: 2px;}
.tab-menu li a{display: block; width: 100%; padding: 10px 0; background: #ddd;}
.tab-menu li a.active{background: #333; color: white;}

#tabContent{background:#ededed; padding: 20px;}
#tabContent>div{display: none;}
#tabContent>div:first-child{display: block;}

Script

const targetLink=document.querySelectorAll('.tab-menu a');
const tabContent=document.querySelectorAll('#tabContent>div');

for(let i=0; i<targetLink.length; i++){
    targetLink[i].addEventListener('click',function(e){
        let orgTarget=e.target.getAttribute('href')
        let tabTarget=orgTarget.replace("#","");
        for(let j=0; j<targetLink.length; j++){
            targetLink[j].classList.remove('active');
            e.target.classList.add('active');
        }
        for(let k=0; k<tabContent.length; k++){
            tabContent[k].style.display='none'
        }
        document.getElementById(tabTarget).style.display='block'
    })
}

for문으로 실행하고 i< .tab-menu의 .lengt만큼 잡아주고 addEventListner 를 선언한다. 'click',function({e}) 펑션에 이번트의 알파벳인 e를 넣어준다. on이라는 클래스를 부여하는 스크립트이다.

카카오맵 API 적용하기

카카오맵 API 적용 방법

  1. 카카오 개발자 홈페이지에 들어가서 로그인한다.
    https://developers.kakao.com/console/app

  1. 애플리케이션 추가하기를 누른다.

  1. 정보를 입력한 후 체크박스 체크 후 저장

  1. web 플랫폼으로 도메인 주소를 작성한다. (하나는 쓰고있는 dothome 무료 도메인 주소이고 하나는 5번에서 설명.

  1. vs code에 open with live server 를 누른다.

  1. 주소에 나오는 127.0.0.1:5500 을 복사하여 플랫폼에 넣어준다. (개인마다 다름)

  1. 요약정보에 들어가서 JavaScript 키를 복사해둔다.

  1. 메뉴를 누르고 'Maps API' 로 들어간다.

  1. 3개중 web을 선택

  1. Guide 란에서 스크롤을 내리다 보면 '실제 지도를 그리는 JavaScript API를 불러오기' 란에 Script를 복사한다.

  1. 아까 복사해뒀던 JavaScript 키를 "발급받은 APP KEY를 넣으시면 됩니다" 란에 붙여넣고 Script에 넣는다.

  1. HTML과 JavaScript 부분을 각 복사 붙여넣기 하여 적용시켜준다.

  1. 여러 샘플도 있으니 샘플을 참고하여 스크립트 복사 붙여넣기만 해주면 간단하게 API를 사용하여 카카오맵을 넣을 수 있다.

  1. LatLng(37.268054, 127.005436) 이부분은 지도의 위도 경도 이다. 구글맵을 통해 위도 경도를 알아내고 지도의 시작 위치를 설정할 수 있으며 마커표시도 가능하다.
var container = document.getElementById('map');
var options = {
    center: new kakao.maps.LatLng(37.268054, 127.005436),
    level: 3
};
var map = new kakao.maps.Map(container, options);

ex) 예제

결과

ex) 현재 제작하고 있는 관공서 홈페이지에 레이아웃을 하여 넣어 보았다.

결과

profile
JooSehyun
이전 포스트

Front-end 국비지원 #036일

다음 포스트

Front-end 국비지원 #038일

0개의 댓글