이미지 사이즈
본문
인스타 홈페이지에 연동하는건데요..원래는 아래사진처럼 이렇게 잘 보여야하는데요
다른 사이트 똑같은 방법으로 인스타 연동 잘 했는데..
여기만 안되네요..ㅠㅠ
이렇게 보여지네요..가로 여백이 넓게 되서 아래로 정렬되는거같은데..어떻게 해야하는지 모르겠어요..
<?php
define('_INDEX_', true);
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
if (G5_IS_MOBILE) {
include_once(G5_THEME_MOBILE_PATH.'/index.php');
return;
}
include_once(G5_THEME_PATH.'/head.php');
?>
<script>
new WOW().init();
</script>
<h2 class="sound_only">최신글</h2>
<div class="main_wrap">
<div class="main_banner visual_banner">
<div class="swiper-container mb_container">
<div class="swiper-wrapper ">
<div class="swiper-slide visual_slide_item">
<div class="inner banner_wrap">
<div class="banner_content">
<h2 class="title" data-swiper-parallax="-500" data-swiper-parallax-duration="1000"></h2>
<p class="desc" data-swiper-parallax="-650" data-swiper-parallax-duration="1000"></p>
<div class="" data-swiper-parallax="" data-swiper-parallax-duration="">
</div>
</div>
</div>
</div>
<div class="swiper-slide visual_slide_item visual_slide_item2">
<div class="inner banner_wrap">
<div class="banner_content">
<h2 class="title" data-swiper-parallax="-500" data-swiper-parallax-duration="1000">
</h2>
<p class="desc" data-swiper-parallax="-650" data-swiper-parallax-duration="1000"></p>
<div class="" data-swiper-parallax="" data-swiper-parallax-duration="">
</div>
</div>
</div>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
</div>
<script>
var swiper = new Swiper('.visual_banner .swiper-container', {
slidesPerView: 1,
spaceBetween: 0,
effect: 'fade',
parallax: true,
loop: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
autoplay: {
delay: 5000,
disableOnInteraction: false,
},
});
</script>
<div class="main_con">
<div class="section_wrap section1">
<div class="inner ">
<div class="section clearfix">
<div class="right_con wow fadeInRight" data-wow-delay="0.5s"
style="visibility: visible; animation-delay: 0.5s; animation-name: fadeInRight;">
<div class="right_title">
<h5>PET GROOMING ACADEMY</h5>
<p>WECOME TO TOPDOGS</p>
</div>
<div class="right_text">
<p>실전미용.가위컷에 강한학원"부천 탑 애견미용학원" 사이트에 오신것을 환영합니다!!
<BR />안녕하세요~안산 탑애견미용학원 원장 김애경 입니다.<br />저희 탑애견미용학원은 고정관념에 얽매이지않은 교육을 할 것 이며 개개인 역량을 충분히 발휘 할 수 있는 또한 유행에 뒤쳐지지 않는 교육을 하겠습니다
</p>
</div>
<div class="right_btn">
<a href="<?php echo G5_THEME_URL ?>/company/introduce.php">Read More</a>
</div>
</div>
<div class="left_con wow fadeInLeft" data-wow-delay="0.7s"
style="visibility: visible; animation-delay: 0.7s; animation-name: fadeInLeft;">
<img src="<?php echo G5_THEME_IMG_URL ?>/main/box_section_img.png" alt="">
</div>
<div class="left_list wow fadeInLeft" data-wow-delay="0.9s"
style="visibility: visible; animation-delay: 0.9s; animation-name: fadeInLeft;">
<p class="left_list_tit">KNOWLEDGE AND SKILLS</p>
<ul>
<li><span>애견미용 전반에 대한 폭넓은 지식습득 및
기술연마(B, C급 자격증 획득)를 합니다.</span></li>
<li><span> 애견관리 전방에 대한 깊이있는 지식습득 및
경험축적을 할 수 있습니다.</span></li>
<li><span>쇼 독 그루밍을 비롯한 고난도 애견미용 기술을 습득합니다.</span></li>
<li><span>최고의 강사진들이 믿음과 신뢰를 바탕으로
최선을 다해 교육합니다.</span></li>
</ul>
</div>
</div>
</div>
</div>
<div class="section_wrap section_bg">
<div class="inner">
<div class="sec1_part">
<ul class="sec1_list clearfix">
<li class="sec1_item wow fadeInUp">
<div class="sec1_box">
<a href="http://topdogs2.co.kr/bbs/board.php?bo_table=instructor&wr_id=3">
<div class="sec1_img">
<img src="<?php echo G5_THEME_IMG_URL?>/main/box_img2.png" alt="">
</div>
<div class="sec1_hover">
<p class="sec1_con_tit">김민경 부원장 </p>
<p class="sec1_con_info"> 부원장 소개</p>
</div>
</a>
</div>
</li>
<li class="sec1_item wow fadeInUp">
<div class="sec1_box">
<a href="http://topdogs2.co.kr/bbs/board.php?bo_table=instructor&wr_id=5">
<div class="sec1_img">
<img src="<?php echo G5_THEME_IMG_URL?>/main/box_img3.png" alt="">
</div>
<div class="sec1_hover">
<p class="sec1_con_tit"> 박지석 실장</p>
<p class="sec1_con_info"> 실장 소개</p>
</div>
</a>
</div>
</li>
<li class="sec1_item wow fadeInUp">
<div class="sec1_box">
<a href="http://topdogs2.co.kr/bbs/board.php?bo_table=instructor&wr_id=6">
<div class="sec1_img">
<img src="<?php echo G5_THEME_IMG_URL?>/main/box_img4.png" alt="">
</div>
<div class="sec1_hover">
<p class="sec1_con_tit">이용혁 강사</p>
<p class="sec1_con_info"> 강사 소개</p>
</div>
</a>
</div>
</li>
</ul>
</div>
</div>
</div>
<script>
$(function () {
$(" .sec1_box").bind('mouseenter mouseleave', function (e) {
var pageX = e.offsetX;
var pageY = e.offsetY;
var partW = (pageX * 100) / $(this).width();
var partH = (pageY * 100) / $(this).height();
var posX;
var posY;
var win_width = $(window).width();
if (win_width > 768) {
if (e.type === 'mouseenter') {
if (partH < partW) {
if (partW > 90) {
posX = 100;
posY = 0;
} else {
posX = 0;
posY = -100;
}
} else if (partW < partH) {
if (partH > 90) {
posX = 0;
posY = 100;
} else {
posX = -100;
posY = 0;
}
}
$(this).find('.sec1_hover').css({
top: posY + '%',
left: posX + '%'
});
$(this).find('.sec1_hover').stop(true, true).animate({
top: 0,
left: 0
}, 500);
} else {
if (partH < partW) {
if (partW > 90) {
posX = 100;
posY = 0;
} else {
posX = 0;
posY = -100;
}
} else if (partW < partH) {
if (partH > 90) {
posX = 0;
posY = 100;
} else {
posX = -100;
posY = 0;
}
}
$(this).find('.sec1_hover').stop(true, false).animate({
top: posY + '%',
left: posX + '%'
}, 300);
}
} else {
}
});
// 창 사이즈 조절시 컨텐츠 높이 맞춤
});
</script>
<div class="section_wrap section_bg2">
<div class="inner">
<div class="clearfix main-board-content">
<div class="main-list-board wow fadeInRight">
<div class="latest-wrap">
<div class="tabs clearfix">
<a href="<?php echo G5_BBS_URL?>/board.php?bo_table=notice" class="active">공지사항</a>
<a href="<?php echo G5_BBS_URL?>/board.php?bo_table=qa">온라인상담</a>
</div>
<div class="lt-wrap">
<div class="board_tab_con on"><?php echo latest('theme/basic','notice',5,30); ?>
</div>
<div class="board_tab_con"><?php echo latest('theme/basic','qa',5,30); ?>
</div>
</div>
</div>
</div>
<div class="main-gallery-board wow fadeInRight">
<div class="gallery-list">
<div class="main-gallery-latest">
<?php echo latest('theme/pic_basic2','gallery', 4, 40); ?>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(function () {
$('.latest-wrap .tabs a').on('click', function () {
n = $('.latest-wrap .tabs a').index($(this));
$('.latest-wrap .tabs a').eq(n).addClass('active').siblings().removeClass('active');
$('.latest-wrap .board_tab_con').eq(n).addClass('on').siblings().removeClass('on');
return false;
});
});
</script>
<!-- -->
<div class="section_wrap ">
<div class="inner">
<div class="section sect1">
<ul class="sect1_con">
<li class="wow fadeInUp">
<div class="icon_wrap">
<div class="s1icon s1i1"></div>
</div>
<div class="s1tbox">
<p>핸들러</p>
<span>애견미용사 자격증 종류 안내입니다<br>애견미용사 자격증 종류 안내입니다</span>
</div>
</li>
<li class="wow fadeInUp" data-wow-delay="0.1s">
<div class="icon_wrap">
<div class="s1icon s1i2"></div>
</div>
<div class="s1tbox">
<p>애견종합관리사</p>
<span> 애견미용사 자격증 종류 안내입니다 <br>애견미용사 자격증 종류 안내입니다</span>
</div>
</li>
<li class="wow fadeInUp" data-wow-delay="0.2s">
<div class="icon_wrap">
<div class="s1icon s1i3"></div>
</div>
<div class="s1tbox">
<p> 심사위원</p>
<span> 애견미용사 자격증 종류 안내입니다 <br> 애견미용사 자격증 종류 안내입니다</span>
</div>
</li>
<li class="wow fadeInUp" data-wow-delay="0.3s">
<div class="icon_wrap">
<div class="s1icon s1i4"></div>
</div>
<div class="s1tbox">
<p>훈련사</p>
<span>애견미용사 자격증 종류 안내입니다 <br> 애견미용사 자격증 종류 안내입니다</span>
</div>
</li>
</ul>
</div>
</div>
</div>
<style type="text/css">
#instafeed-container {width:1200px;margin:0 auto;height:320px;overflow:hidden;}
#instafeed-container a img{ border:#ddd solid 1px;border-radius:4px;width: 13.3%;margin:5px;}
.inst_tit {width:1200px;margin:0 auto;text-align:center;padding:10px 0 5px 0;font-size:26px;color:#b10f0f;font-weight:500;}
.is_tt {width:1200px;margin:0 auto;text-align:center;font-size:18px;margin-bottom:20px;}
@media (max-width: 991px) {
#instafeed-container {width:100%;margin:0 auto;height:340px;overflow:hidden;}
#instafeed-container a img{ border:#ddd solid 1px;width: 22%;border-radius:3px;margin:5px;}
.inst_tit {width:100%;margin:0 auto;text-align:center;padding:20px 0 0px 0;font-size:24px;color:#b10f0f;font-weight:500;}
.is_tt {width:100%;margin:0 auto;text-align:center;font-size:17px;margin-bottom:20px;}
}
</style>
<h1 class="inst_tit">Instagram</h1>
<p class="is_tt"><a href="https://www.instagram.com/ansan_top_academy" target="_blank">@ansan_top_academy</a></p>
<div id="instafeed-container"></div>
<script src="https://cdn.jsdelivr.net/gh/stevenschobert/instafeed.js@2.0.0rc1/src/instafeed.min.js"></script>
<script type="text/javascript">
var userFeed = new Instafeed({
get: 'user',
target: "instafeed-container",
resolution: 'low_resolution',
accessToken: 'IGQVJYWWZAQbTRHYTh2UG5zOW9mYzQ1TmoxLWJBcnZA1d25TNmNOVS14YUNKTEZAqWUtsN1VmVXFJMnFOY2lIekNqaElGS2oycHpzbFV0NndPOFB4SjZAWdlJ3VDFWUkE0SDdxaGlhSE9zR1pFYlhjUU5NNQZDZD'
});
userFeed.run();
</script>
<div class="section_wrap section-gallery">
<div class="section sect4 wow fadeInUp">
<div class="latest_wr">
<!-- 사진 최신글2 { -->
<?php
// 이 함수가 바로 최신글을 추출하는 역할을 합니다.
// 사용방법 : latest(스킨, 게시판아이디, 출력라인, 글자수);
// 테마의 스킨을 사용하려면 theme/basic 과 같이 지정
echo latest('theme/pic_basic', 'gallery2', 8, 50);
?>
<!-- } 사진 최신글2 끝 -->
</div>
</div>
</div>
</div>
</div>
<?php
include_once(G5_THEME_PATH.'/tail.php');
?>
답변 1
#instafeed-container a, #instafeed-container a img {display: inline;}
추가해주시면 됩니다.
바로 되네요~!!!!너무 너무 감사합니다~!!!!
