공부/HTML|CSS
API 없이 인스타그램 HTML (by TagName)
밥성수
2020. 7. 15. 01:26
1. #instagram-feed 영역 추가
<div id="instagram-feed"></div>
2. 스크립트 임포트 / 스크립트 추가
<script src="js/jquery.instagramFeed.min.js"></script>
<script >
(function($){
$(window).on('load', function(){
$.instagramFeed({
'tag': '해시태그',
'container': "#instagram-feed",
'display_profile': false,
'display_gallery': true,
'items': 10,
'items_per_row': 5,
'margin': 0,
'callback': null,
'styling': true
});
});
})(jQuery);
</script>3. 반응형 소스 추가
<style>
@media (max-width: 375px){
.instagram_gallery a, .instagram_gallery a img{ width: calc(50% - 0px) !important; }
}
@media (min-width: 375px){
.instagram_gallery a, .instagram_gallery a img{ width: calc(33.3333% - 0px) !important; }
#insta-box{min-height:810px;}
}
@media ( min-width: 768px){
.instagram_gallery a, .instagram_gallery a img{ width: calc(33.3333% - 0px) !important; }
}
@media (min-width: 768px){
.instagram_gallery a, .instagram_gallery a img{ width: calc(25% - 0px) !important; }
#insta-box{min-height:620px;}
}
@media (min-width: 992px) {
.instagram_gallery a, .instagram_gallery a img{ width: calc(20% - 0px) !important; }
#insta-box{min-height:560px;}
}
</style>
