반응형
카카오톡으로 시작하기
구글로 시작하기
페이스북으로 시작하기
라인으로 시작하기
모두 되살리기


css부분


   

#kakao-box{
width: 300px;
height: 44px;
border-radius: 5px;
margin-bottom: 8px;
font-size: 12px;
color: #4a4a4a;
background-color: #fff115;
box-shadow: 0 2px 1px 0 rgba(155, 155, 155, 0.5);
display: flex;
align-items: center;
}
#facebook-box{
width: 300px;
height: 44px;
border-radius: 5px;
margin-bottom: 8px;
font-size: 12px;
color: #ffffff;
background-color: #3b5998;
box-shadow: 0 2px 1px 0 rgba(155, 155, 155, 0.5);
display: flex;
align-items: center;
}
#google-box{
width: 300px;
height: 44px;
border-radius: 5px;
margin-bottom: 8px;
font-size: 12px;
color: #4a4a4a;
background-color: #ffffff;
box-shadow: 0 2px 1px 0 rgba(155, 155, 155, 0.5);
display: flex;
align-items: center;
}
#line-box{
width: 300px;
height: 44px;
border-radius: 5px;
margin-bottom: 8px;
font-size: 12px;
color: #ffffff;
background-color: #00bd00;
box-shadow: 0 2px 1px 0 rgba(155, 155, 155, 0.5);
display: flex;
align-items: center;
}
#icon-img{
margin-left: 50px;
margin-right:26px;
margin-top: 6px;
margin-bottom: 6px;
}
#reset {
width: 300px;
height: 44px;
border-radius: 5px;
font-size: 15px;
color: #ffffff;
text-align: center;
background-color: #90BEF9;
box-shadow: 0 2px 1px 0 rgba(155, 155, 155, 0.5);
display: inline-grid;
align-items: center;
}


reset 부분은 inline-grid를 통해 상하좌우 가운데 정렬을 시도했다.



HTML 부분


<body>
<div id = "app">
<div id="kakao-box">
<img id="icon-img" src="https://t1.daumcdn.net/cfile/tistory/992DA6415B743DB62B">
카카오톡으로 시작하기
</div>
<div id="google-box">
<img id="icon-img" src="https://t1.daumcdn.net/cfile/tistory/99D8AF415B743DB636">
구글로 시작하기
</div>
<div id="facebook-box">
<img id="icon-img" src="https://t1.daumcdn.net/cfile/tistory/9922CF415B743DB62D">
페이스북으로 시작하기
</div>
<div id="line-box">
<img id="icon-img" src="https://t1.daumcdn.net/cfile/tistory/992972415B743DB708">
라인으로 시작하기
</div>
<div id="reset" v-show="hideCnt <= 0">
모두 되살리기
</div>
</div>



전체 (Vue, Jquery, HTML, CSS)


<!-- https://www.w3schools.com/Jquery/jquery_ajax_get_post.asp -->

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0,
minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuex"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- particles.js lib - https://github.com/VincentGarreau/particles.js -->
<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<!-- stats.js lib -->
<script src="http://threejs.org/examples/js/libs/stats.min.js"></script>
</head>

<body>
<div id = "app">
<div id="kakao-box">
<img id="icon-img" src="https://t1.daumcdn.net/cfile/tistory/992DA6415B743DB62B">
카카오톡으로 시작하기
</div>
<div id="google-box">
<img id="icon-img" src="https://t1.daumcdn.net/cfile/tistory/99D8AF415B743DB636">
구글로 시작하기
</div>
<div id="facebook-box">
<img id="icon-img" src="https://t1.daumcdn.net/cfile/tistory/9922CF415B743DB62D">
페이스북으로 시작하기
</div>
<div id="line-box">
<img id="icon-img" src="https://t1.daumcdn.net/cfile/tistory/992972415B743DB708">
라인으로 시작하기
</div>
<div id="reset" v-show="hideCnt <= 0">
모두 되살리기
</div>
</div>


<script>
var vm = new Vue({
el : "#app",

created(){
$(document).ready(function(){
$('#kakao-box').click(function(){
$('#kakao-box').hide(1000, function(){
window.open("https://www.kakao.com")
vm.$data.hideCnt--
});
});
$('#google-box').click(function(){
$('#google-box').hide(1000, function(){
window.open("https://www.google.com")
vm.$data.hideCnt--
});
});

$("#facebook-box").click(function(){
$('#facebook-box').hide(1000, function(){
window.open("https://www.facebook.com")
vm.$data.hideCnt--
});
});

$("#line-box").click(function(){
$('#line-box').hide(1000, function(){
window.open("https://line.me/ko/")
vm.$data.hideCnt--
});
});

$("#reset").click(function(){
vm.$data.hideCnt = 4
$('#line-box').show(500);
$('#facebook-box').show(500);
$('#google-box').show(500);
$('#kakao-box').show(500);
})
});
},

data: {
hideCnt: 4
}
});

</script>
</body>

<style scoped>
#kakao-box{
width: 300px;
height: 44px;
border-radius: 5px;
margin-bottom: 8px;
font-size: 12px;
color: #4a4a4a;
background-color: #fff115;
box-shadow: 0 2px 1px 0 rgba(155, 155, 155, 0.5);
display: flex;
align-items: center;
}
#facebook-box{
width: 300px;
height: 44px;
border-radius: 5px;
margin-bottom: 8px;
font-size: 12px;
color: #ffffff;
background-color: #3b5998;
box-shadow: 0 2px 1px 0 rgba(155, 155, 155, 0.5);
display: flex;
align-items: center;
}
#google-box{
width: 300px;
height: 44px;
border-radius: 5px;
margin-bottom: 8px;
font-size: 12px;
color: #4a4a4a;
background-color: #ffffff;
box-shadow: 0 2px 1px 0 rgba(155, 155, 155, 0.5);
display: flex;
align-items: center;
}
#line-box{
width: 300px;
height: 44px;
border-radius: 5px;
margin-bottom: 8px;
font-size: 12px;
color: #ffffff;
background-color: #00bd00;
box-shadow: 0 2px 1px 0 rgba(155, 155, 155, 0.5);
display: flex;
align-items: center;
}
#icon-img{
margin-left: 50px;
margin-right:26px;
margin-top: 6px;
margin-bottom: 6px;
}
#reset {
width: 300px;
height: 44px;
border-radius: 5px;
font-size: 15px;
color: #ffffff;
text-align: center;
background-color: #90BEF9;
box-shadow: 0 2px 1px 0 rgba(155, 155, 155, 0.5);
display: inline-grid;
align-items: center;
}
</style>
</html>


여기서 show나 hide부분 뒤에 function은 이 애니메이션이 끝난 후 이뤄지는 함수이다.





반응형
저작자표시 비영리 변경금지

'Basic > HTML & CSS' 카테고리의 다른 글

특정 element의 child가 parent의 margin을 무시하는 css  (0) 2018.08.24
화면을 넘어갈 때 강제 개행 CSS  (0) 2018.08.22
CSS를 이용하여 글자 정 가운데 위치시키기  (4) 2018.08.06
배경화면 풀페이지 및 이미지 가운데 정렬 CSS  (0) 2018.07.24
반응형 iframe 만들기  (0) 2016.10.21

티스토리툴바