테스트 사이트 - 개발 중인 베타 버전입니다
SIR

제가 부트스트랩으로 공부하던 중 처음으로 회사 홈페이지를 만들고 있는데요...

쥬노
프로필 보기이 회원 글보기
 · 9년 전 · 37

제가 부트스트랩으로 공부하던 중 처음으로 회사 홈페이지를 만들고 있는데요...

익스플로러 창을 최대크기로 했을때는 메뉴바 드롭다운이 제대로 되는데요...

익스플로러 창을 좁히고 보면 메뉴바가 슬라이드 밑으로 들어가서 보이지 않습니다.

고수님들 도움을 부탁드립니다.

23d7419f686c97a33d5e03d5198abda7_1468298
23d7419f686c97a33d5e03d5198abda7_1468298 

소스는 아래입니다....

 

<!DOCTYPE html>
<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">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>SPGLOBAL</title>

<!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="bootstrap-3.3.6-dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="bootstrap-3.3.6-dist/css/bootstrap-theme.min.css">
  <link rel="stylesheet" href="font-awesome-4.6.3/css/font-awesome.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
   
    <style>
    /* head_tail */
.head_tail{
 /*background-color:#666;*/
   color:#333;
   margin-top:20px;
   margin-bottom:20px;
   }

/* 네비게이션 색상변경 시작 */

.menu{
  margin-bottom:0px;/* 메뉴바와 슬라이더 간격 -> 메뉴바 아래 여백 */
 }
/* navbar */
.navbar-default {
 background: #795548; /* 메뉴배경색상 */
 border:none;
 border-radius:0px;
}
/* Brand 색상 */
.navbar-default .navbar-brand {
    color: #fff;
}
/* Brand 위로 마우스 올렸을 때 색상 */
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    color: #ff9800;
}
/* link */
.navbar-default .navbar-nav > li > a {
    color: #fff;  /* 메뉴 색상 */
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #ff9800;                 /* 마우스 올렸을때 메뉴 글자색상 */
 background-color:#5d4037;       /* 마우스 올렸을때 메뉴배경 색상 */
}

/* Active 색상 배경 */
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: #fff;
    background: #ff9800;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
    color: #fff;
    background: #ff9800;
}

 /* 드롭다운 서브메뉴 배경색상 */
.dropdown-menu {background-color:#ffa726;}

/* 드롭다운 서브메뉴에 마우스 올렸을때 서브메뉴 배경색상 */
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus {background: #8d6e63;}

/* 드롭다운 서브메뉴에 마우스 올렸을때 서브메뉴 변경색상 */
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus {color:#fff;}

/* caret 드롭다운 삼각형*/
.navbar-default .navbar-nav > .dropdown > a .caret {
    border-top-color: #fff;
    border-bottom-color: #fff;
}
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
    border-top-color: #ff9800;
    border-bottom-color: #ff9800;
}
.navbar-default .navbar-nav > .open > a .caret,
.navbar-default .navbar-nav > .open > a:hover .caret,
.navbar-default .navbar-nav > .open > a:focus .caret {
    border-top-color: #fff;
    border-bottom-color: #fff;
}

.navbar, .navbar-default{
 height:50px;        /* 메뉴바 두께  */
 padding-top:0px;     /* 메뉴바 상단 여백 */
 font-size:16px;      /* 메뉴바 폰트크기  */
 letter-spacing:2px; /* 메뉴바 글자간격 */
 word-spacing:5px;
}
  .navbar {
         border: 0;
         font-size: 16px !important; /* 폰트 크기 */
         letter-spacing: 1.5px;/* 글자간격 */
         border-radius: 0;
         }
/* mobile version */
.navbar-default .navbar-toggle {
    border-color: #DDD;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #fff;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #CCC;
}

@media (max-width: 768px) {

    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
        color: #fff;
    }
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
        color: #fff;
    }
    .navbar-default .navbar-nav .open .dropdown-menu{
  background-color:#212121; 
    }
    .navbar-default .navbar-nav{
  background-color:#333; 
    } 
}
/* 네비게이션 색상변경 끝 */

 

/* 슬라이더 시작 */
    .carousel-inner img {
        width: 100%; /* Set width to 100% */
        margin: auto;
        min-height:200px;
        }
    .carousel-control.right, .carousel-control.left {
        background-image: none;
        color: #ff5722;
  /* margin-left:150px; 슬라이드 왼쪽 화살표 왼쪽 위치변경 */
  /* margin-right:150px; 슬라이드 오른쪽 화살표 왼쪽 위치변경 */
  margin-top:auto;   /* 슬라이드 화살표 수직위치변경 */
        }
    .carousel-indicators li {
        border-color: #f4511e;
        }
    .carousel-indicators li.active {
        background-color: #f4511e;
        }
    .carousel-inner img {
        width: 100%; /* Set width to 100% */
  height:100%;
        margin: auto;
        min-height:200px;
        } 
/* 슬라이더 끝 */  
   
     .area{
  margin-top:20px;
  color:#3e2723;
  /*background-color:#e91e63;*/
  } 
       
    /* Set black background color, white text and some padding */
      footer {
        background-color:#78909c;
        color: white;
  height:100px;
  padding-top:30px;
  margin-top:30px;
        } 

    /* 스크롤 위로 */
     .scroll-top-wrapper {
        position: fixed;
        opacity: 0;
        visibility: hidden;
     overflow: hidden;
     text-align: center;
     z-index: 99999999;
        background-color: #777777;
     color: #eeeeee;
     width: 50px;
     height: 48px;
     line-height: 48px;
     right: 30px;
     bottom: 30px;
     padding-top: 2px;
     border-top-left-radius: 10px;
     border-top-right-radius: 10px;
     border-bottom-right-radius: 10px;
     border-bottom-left-radius: 10px;
     -webkit-transition: all 0.5s ease-in-out;
     -moz-transition: all 0.5s ease-in-out;
     -ms-transition: all 0.5s ease-in-out;
     -o-transition: all 0.5s ease-in-out;
     transition: all 0.5s ease-in-out;
        }
     .scroll-top-wrapper:hover {
     background-color: #888888;
        }
     .scroll-top-wrapper.show {
        visibility:visible;
        cursor:pointer;
     opacity: 1.0;
        }
     .scroll-top-wrapper i.fa {
     line-height: inherit;
        }
  
   /*상품 줌 아이콘 */
 .caption{margin-bottom:0px;} 
   /*.thumbnail { border-radius: 0; position: relative; z-index: 1; border: 2px solid #fff; outline: 1px solid #ccc; }*/
   .red { color: #FF0000}
   .black { color: #000}
   ul.block { height: 60px;}
   /*상품 줌 아이콘 */
   .zoom {
      position:absolute;
      left:50%;
      top:30%;
      width:60px;
      height:60px;
      margin:-30px 0 0 -30px;
      background: url(zoom.png) no-repeat center center;
      z-index:5;
      display:block;
      text-indent:-9999px;
      opacity: 0;
      filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);   
    }  
  .thumbnail:hover { border: 2px solid red; outline: 0}
  .thumbnail a:hover { text-decoration: none}
  .thumbnail:hover img{
    opacity: 0.3;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
  }
  .thumbnail:hover .zoom {
    opacity: 1;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
  }
    .tab-content {padding: 10px 0;} /* 공지사항 사업문의 */
 
    /*hr{
    border-color:#78909c;  
      } 수평선 색상 */
    .youtubewrap { /* 유튜브 동영상 */
       position: relative;
       width: 100%;
       padding-bottom: 56.25%;
       }
    .youtubewrap iframe {
       position: absolute;
       width: 100%;
       height: 100%;
       } 
   
    /* 아이콘 부분 */
    .service {margin: 40px;}
    .service a { display: block;}
    .icons {     
         float: left;
         display: block;
         font-size: 30px;
         color: #fff;
         background-color: #ff9800;
         border-radius: 50%;
         text-align: center;
         margin-right: 15px ;
         padding: 20px;
         border:4px solid #FF8040;
         transition: all 0.3s;
        } 

    .service a:hover .icons  { background-color:#607d8b;}
    .service a:hover .icontxt h4 { color: #607d8b; }
    .icontxt { display: block; color: #2E2F28; text-align: left; }
    .icontxt h4 {font-weight: bold; font-family: 'Source Sans Pro'; font-size: 20px; text-transform: uppercase; text-align: left;}
    @media (min-width: 768px) {
      .icons { margin: 0 auto; position: relative; left: 30%;}
      .icontxt h4 { text-align: center;}
    }

    @media (max-width: 360px) {
      .icontxt p { display: none; }
      .icontxt {line-height:10px; padding: 0; margin: 0;}
      .icontxt h4 { display: none; }
      .icons { padding: 20px; margin: 10px 0 10px 20px; }
      .book img { width: 50%; height: auto;}
      .control { display: none;}
    }     
 </style>
   
</head>
<body>
<!-- head_tail 시작 -->
<div class="container text-right head_tail">
   <small>Home · 회원가입 · Contact Us</small>
</div>
<!-- head_tail 끝 -->


  <!--네비게이션 시작 --> 
<nav class="navbar navbar-default menu">
 <div class="container-fluid">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>

      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
 </div>
</nav>
<!-- slider 시작 -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
      <li data-target="#myCarousel" data-slide-to="3"></li>
      <li data-target="#myCarousel" data-slide-to="4"></li>
    </ol>
    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="slider1-1800_500.gif" alt="Image">
        <div class="carousel-caption">
          <h3>Sell $</h3>
          <p>Money Money.</p>
        </div>     
      </div>

      <div class="item">
        <img src="slider2-1800_500.gif" alt="Image">
        <div class="carousel-caption">
          <h3>More Sell $</h3>
          <p>Lorem ipsum...</p>
        </div>     
      </div>
     
      <div class="item">
        <img src="slider3-1800_500.gif" alt="Image">
        <div class="carousel-caption">
          <h3>More Sell $</h3>
          <p>Lorem ipsum...</p>
        </div>     
      </div>
     
      <div class="item">
        <img src="slider4-1800_500.gif" alt="Image">
        <div class="carousel-caption">
          <h3>More Sell $</h3>
          <p>Lorem ipsum...</p>
        </div>     
      </div>     
      <div class="item">
        <img src="slider5-1800_500.gif" alt="Image">
        <div class="carousel-caption">
          <h3>More Sell $</h3>
          <p>Lorem ipsum...</p>
        </div>     
       
      </div>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>
<!-- slider 끝 -->

    <!-- 아이콘 부분 시작 -->
     <div class="container area">
     <h3><span class="glyphicon glyphicon-tree-deciduous" aria-hidden="true"></span>  SPGLOBAL Business Area</h3>
        <div class="row service text-center">
            <div class="col-md-3"> 
                <div class="row">
                  <a href="#">
                    <div class="col-md-12"> <span class="glyphicon glyphicon-dashboard icons"> </span></div>
                    <div class="col-md-12 icontxt">
                      <h4>Development</h4>
                      <p class="text-center">For convergence & idea products</p>
                    </div>
                 </a>
                </div>                
             </div>        
              <div class="col-md-3">
                <div class="row">
                  <a href="#">
                    <div class="col-md-12"> <span class="glyphicon glyphicon-barcode icons"> </span></div>
                    <div class="col-md-12 icontxt">
                       <h4>Distribution</h4>
                       <p class="text-center">For small business idea goods</p>
                    </div>
                  </a>
                </div>                                        
              </div>
              <div class="col-md-3">
                <div class="row">
                  <a href="#">
                    <div class="col-md-12"><span class="glyphicon glyphicon-globe icons"> </span></div>
                    <div class="col-md-12 icontxt">
                       <h4>Trade & Consulting</h4>
                       <p class="text-center">Export for small business idea goods</p>
                    </div>
                  </a>   
                </div>
              </div>
              <div class="col-md-3">
                <div class="row">
                 <a href="#">
                  <div class="col-md-12"><span class="glyphicon glyphicon-compressed icons"> </span></div>
                  <div class="col-md-12 icontxt">
                     <h4>Manufacture</h4>
                     <p class="text-center">Small business OEM , ODM</p>
                  </div>
                 </a>
                </div>                
             </div>
          </div>
      </div> <!-- 아이콘 끝-->

<!-- 제품보기 시작 -->
<div class="container-fluid product">
<div class="container">
<h3><span class="glyphicon glyphicon-gift" aria-hidden="true"></span>  SPGLOBAL Product</h3>
<div id="carousel-example-generic" class="carousel2 slide">
 <div class="carousel-inner">
  <div class="item active">
   <div class="row"> <!-- 슬라이드 one -->
  <div class="col-md-3">
    <div class="thumbnail">
      <a href="myo2.gif"><img src="myo2.gif" alt="myo2.gif"></a>
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>

    <div class="col-md-3">
    <div class="thumbnail">
      <a href="ocimple.gif"><img src="ocimple.gif" alt="..."></a>
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>                              
    </div>
    <div class="col-md-3">
    <div class="thumbnail">
      <a href="ocimple.gif"><img src="ocimple.gif" alt="..."></a>
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>                            
    </div>
    <div class="col-md-3">
    <div class="thumbnail">
      <a href="ocimple.gif"><img src="ocimple.gif" alt="..."></a>
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>                           
    </div>
   </div> <!-- 슬라이드 one end -->
  </div>
  <div class="item">
   <div class="row"> <!-- 슬라이드 one -->
    <div class="col-md-3">
    <div class="thumbnail">
      <a href="ocimple.gif"><img src="ocimple.gif" alt="..."></a>
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>     
    </div>
    <div class="col-md-3">
    <div class="thumbnail">
      <a href="ocimple.gif"><img src="ocimple.gif" alt="..."></a>
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>                                   
    </div>
    <div class="col-md-3">
    <div class="thumbnail">
      <a href="ocimple.gif"><img src="ocimple.gif" alt="..."></a>
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>       
    </div>
    <div class="col-md-3">
    <div class="thumbnail">
      <a href="ocimple.gif"><img src="ocimple.gif" alt="..."></a>
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>     
    </div>
   </div> <!-- 슬라이드 one end -->
  </div>
 </div>
</div>
<hr>
</div>
</div>


<!-- 제품보기 끝 -->

 

<!-- content 시작 -->
<div class="container-fluid content">
 <div class="container">
  <div class="row">
    <div class="col-md-4 con_1">
      <!--<h4><span class="glyphicon glyphicon-bullhorn" aria-hidden="true"></span> SPGLOBAL Community</h4>-->
    <ul class="nav nav-tabs">
      <li class="active"><a href="#home" data-toggle="tab">공지사항</a></li>
      <li><a href="#tab1" data-toggle="tab">사업문의</a></li>
      <li><a href="#tab2" data-toggle="tab">FAQ</a></li>
    </ul>
  
  <div class="tab-content">
    <div class="tab-pane active" id="home">
      <ul>
        <li>중부지방 물폭탄..서울·경기·강원 호우특보</li>
        <li>주노 탐사선 목성 궤도 안착 성공 "웰컴 투 주피터"</li>
        <li>'햇살론이 아닌 햇쌀론?' 서민금융상품 유사명칭</li>
        <li>유경준 통계청장 "국민의 모든 생활이 통계다"</li>
        <li>조선파업, 깃발은 들었지만..무작정 파업도 부담</li>
        <li>갈림길에 선 최경환..전대 출마냐, 불출마냐</li>
        <li>김영란법 부정청탁, 국회의원 예외 논란의 진실</li>
      </ul>
    </div>

    <div class="tab-pane" id="tab1">
      <ul>
        <li>김현수는 '1루 베이스' 밟는 것을 가장 잘 한다</li>
        <li>이대호의 AL 신인왕, 얼마나 가능성 있을까</li>
        <li>류현진의 복귀전 과제, 구속 우려 불식시킬까</li>
        <li>WKBL, 첼시 리 영구제명, 혼혈선수제 폐지</li>
        <li>비 오는 마산구장, NC 4경기 연속 취소되나</li>
        <li>'장마효과' 꼬여버린 한화 로테이션 해법될까</li>
        <li>'3G 연속 장타' 추신수, 그린 몬스터에 빼앗긴 홈런</li>
      </ul>
    </div>

    <div class="tab-pane" id="tab2">
      <ul>
        <li>현대차, 남양연구소 내 '자율주행택시' 실운행 돌입</li>
        <li>G80 사전계약 1만대 돌파..고급차 시장 안착</li>
        <li>페라리 슈퍼카 유일 국내서 중고차 사업 추진</li>
        <li>'2016 서울오토살롱' 7월 7일 개막</li>
        <li>수입차 서비스 '전국망' 어디까지 왔나</li>
        <li>쿠페 감성에 RV의 기능성 갖춘 혼다 HR-V</li>
        <li>7인승으로 넉넉하게, 티구안 LWB 중국에서 포착</li>
      </ul>
    </div>
  </div>     
 </div>
    <div class="col-md-4 con_2">
     <div class="col-md-12"> 
      <div class="row">
       <div class="col-md-3">
        <i class="fa fa-volume-control-phone fa-4x" aria-hidden="true"></i>
       </div>
       <div class="col-md-9">
        <h4>Customer Center</h4>
        <h3><strong><font color="#e65100">031. 293. 1550</font></strong></h3>
        <p><abbr title="Hours">H</abbr> : <small><font color="#FF0000">Monday</font>~<font color="#0000FF">Friday</font> : AM 9:00 ~ PM 6:00</small></p>
       </div>
      </div>
     </div> 
                  
     <div class="col-md-12"> 
      <div class="row">
       <div class="col-md-3">
        <i class="fa fa-car fa-3x" aria-hidden="true"></i>
       </div>
       <div class="col-md-9">
        <h4>Contact Us</h4>
        <p>경기도 수원시 권선구 칠보로 243</br>
(호매실동 79-1) (우)16395</p>
        <p><abbr title="Email">E</abbr> : <a href="mailto:spcarer@naver.com"> spcarer@naver.com</a> </p>
       </div>
      </div>
     </div>
    </div>   
      <!--<h4><span class="glyphicon glyphicon-picture" aria-hidden="true"></span> SPGLOBAL Gallery</h4>-->
      <div class="col-md-4 con_3">
      <!--<h4><span class="glyphicon glyphicon-facetime-video" aria-hidden="true"></span> Heal Foot Movie</h4>-->
      <!-- 푸티 동영상 넣기 시작 4:3 aspect ratio -->
        <div class="embed-responsive embed-responsive-4by3 youtubewrap">
          <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/vKYMVRpL3oU"></iframe>
        </div>
      <!-- 푸티 동영상 넣기 끝 4:3 aspect ratio -->
      </div>
  </div>
 </div>  
</div>
<!-- content 끝 -->

<!-- footer 시작 -->
<footer class="container-fluid text-center">
    <p>(우)16395 경기도 수원시 권선구 칠보로 243 (호매실동 79-1) | 대표 : 박 태 원 | Tel : 031-293-1550 | Fax : 031-293-1540</p>
    <p>Copyright © 2016 SPGLOBAL All Rights Reserved.</p>
</footer>
<!-- footer 끝 -->

<!-- 스크롤 처음으로 시작 -->
<div class="scroll-top-wrapper ">
  <span class="scroll-top-inner">
    <i class="fa fa-arrow-circle-up fa-2x"></i>
   <!--<span class="glyphicon glyphicon-circle-arrow-up" aria-hidden="true"></span>-->
  </span>
</div>

<!-- 스크롤 처음으로 끝 -->

<script type="text/javascript">
<!-- 스크롤 위로 시작 -->
//Thanks to: http://www.webtipblog.com/adding-scroll-top-button-website/

$(function(){
 
 $(document).on( 'scroll', function(){
 
  if ($(window).scrollTop() > 100) {
   $('.scroll-top-wrapper').addClass('show');
  } else {
   $('.scroll-top-wrapper').removeClass('show');
  }
 });
 
 $('.scroll-top-wrapper').on('click', scrollToTop);
});
 
function scrollToTop() {
 verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
 element = $('body');
 offset = element.offset();
 offsetTop = offset.top;
 $('html, body').animate({scrollTop: offsetTop}, 500, 'linear');
}

</script>
<!-- 스크롤 위로 끝 -->
    <script>
      $('.carousel').carousel()
      $('.carousel2').carousel({interval: 5000 })
      //*  fancybox  실행 스크립트 */
      $(document).ready(function() {
        $(".fancybox").fancybox({
          openEffect  : 'none',
          closeEffect : 'none'
        });
      });
 </script> 
</body>
</html>  

목록
이전글 다음글

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시글 목록

번호 제목
8265
스크롤 소스 구합니다 2
20403
PHP 숫자를 한글표기로 바꾸기 입니다.
20402
Mobile Android,IOS 앱용 아이콘 템플릿 참고 사이트
20401
PHP 여러문장을 한번에 자동 줄바꿈 하기 입니다.
20400
웹서버 서버 동시접속자 설정 변경하기
8259
반응형웹 템플릿 좀 봐주세요. 5
20399
PHP 디렉토리의 모든 파일을 읽어 목록으로 만들기 입니다.
20398
PHP PHP 버전이 낮아 imagerotate() 함수가 없을때 대신 사용하는 함수
8255
가운데 정렬좀 요~~~ 3
8249
시안 퍼블리쉬 해주신느분 있나요? 5
8246
부트스트랩은 어디서 받나요? 2
8242
소스구해요 3
20396
PHP 간단하게 자동으로 테이블 너비 조정하기 입니다. 1
8240
PHP MYSQL 장문 필드 검색 질문 입니다. 2
20395
PHP 문자열자르기 (문자별 다른 너비 해결)
20394
MySQL 테이블 복사 쿼리
31033
기타 많이들 사용하시는 Slider 에 대해서... 2
28385
밀려요 2
20393
PHP 현재 접속중인 사용자 나타내기
28380
디스플라이 인라인이 안되요,, 4
20392
MySQL mysql select 후 update 하기
28377
노란색박스가 가운데로 오게하려면 어떻게 하나요? 2
20391
PHP 다른 페이지로 이동하는 방법 3가지 입니다.
20390
PHP 한글문자열 자르는 법 입니다.
20389
PHP mysql_query 전체 갯수 빨리 알아보기 입니다.
20388
PHP POST값 통째로 인코딩하기, 배열, iconv
20387
PHP 이메일주소 검사하기 입니다.
20386
웹서버 php 확장자 내 맘대로 바꾸기 입니다.
20385
PHP 문자열을 한 문자씩 나누어 출력하기 입니다.
20384
node.js Node js 게시판 프로젝트 소개합니다.
20383
PHP pc 모바일 체크 1
20382
PHP 계정 사용량(용량) 확인
8238
어도비에서 만든 텍스트에디터 Brackets 1
20380
PHP textarea 입력한 엔터값 출력하기 1
20379
MySQL 소수점 반올림 버림
28376
html page 이동시 흰색 깜박임 없앨수 있나요??
28372
헤더영역 position: fixed 했는데 가로 스크롤이 안되네요 3
20378
jQuery jQuery version 1.9 이상에서 $.browser 사용하기
20377
PHP 에러 로그파일 생성하기
8235
CRM 고객관리 프로그램 2
20375
PHP 간단한 특정 IP 차단하기 입니다. 1
20374
PHP 다른 사이트의 내용을 자동으로 긁어오기 입니다.
20373
PHP 후이즈검색 하기 입니다.
20372
PHP 그래프 그리기 입니다.
20371
JavaScript 자바스크립트로 구현한 number_format() 입니다.
20370
JavaScript 금액 관련 숫자를 한글로 변환하기 입니다.
28370
모니터 별 세로 해상도 채울 수 있나요? 1
20369
PHP PHP 날짜 계산 관련 함수
28366
이제 3년되가는 퍼블리셔입니다. 3
20368
jQuery jQuery 1.x와 2.x 버전 동시에 사용하기
20367
PHP 요일, 시간마다 다른 CSS 제어하기 입니다.
20366
PHP iframe내의 id셀렉터 입니다.
20365
JavaScript 사업자 등록번호 검사하기 입니다.
20364
PHP 폼전송을 통해서 페이지를 이동하기 입니다.
20363
JavaScript 항상 같은곳에 광고창 만들기 입니다.
20362
JavaScript 부메뉴 나오게 하기 입니다.
20361
JavaScript 특정문자 제거하기 입니다.
20360
JavaScript 휴대폰번호 검사 하기 입니다.
20359
JavaScript 이미지 좌우로 이동 갤러리 입니다.
8231
웹 html 에디터는 어떻게 구현하시나요? 3
20358
PHP 파일 확장자 검사 함수 입니다.
20357
JavaScript 쉬운 replaceAll 입니다.
20356
PHP 그누보드 최근 게시물 파싱하기 입니다.
20355
PHP [알고리즘]퀵 정렬(Quick Sort)
20354
PHP php로 옥션 지마켓 11번가 쿠팡 위메프 등의 발주내역서 파일을
20353
PHP array_unique 배열중복값 제거
20352
JavaScript 콤보스타일 메뉴 입니다.
20351
JavaScript 쿠키를 이용한 레이어 공지창 입니다.
20350
JavaScript 효과있는 텍스트 틱커 입니다.
20349
PHP [알고리즘]힙 정렬(Heap Sort)
20348
PHP HTTP 인증 하기 입니다.
20347
JavaScript 외부 문서 불러오기 입니다.
20346
JavaScript 지정한 날짜까지 New 이미지를 띄워주기 입니다.
20345
MySQL Common MySQL Queries 다양한 MySQL 쿼리 예제
20344
JavaScript 메일 주소 검사하기 체크박스 입니다.
20343
JavaScript 무단링크 금지하기 입니다.
20342
PHP 간단하게 마우스,드래그,복사 등 막기 입니다.
20341
MySQL DB백업 및 복원
20340
JavaScript 페이지가 다른 사이트의 프레임에 갇히는 것을 막기 입니다.
20339
PHP 다른 사이트로 이동시 또는 창 닫을 시에 자동 로그아웃 하기 입니다.
20338
PHP PHP에 MYSQL 와 자바스크립트 연동 예제 입니다.
20337
jQuery input text 대문자만 받는 Jquery
20336
PHP 현재 페이지 URL 출력하기 입니다.
20335
JavaScript 이미지 업로드와 미리보기 입니다.
20334
JavaScript 배경음악 랜덤 재생 하기 입니다.
20333
JavaScript css 지원 여부 확인해서 다른 페이지로 이동하기 입니다.
20332
JavaScript 하부메뉴가 보였다가 숨겨졌다 하는 토글버튼 입니다.
20331
JavaScript 개별 페이지에 인덱스로 거쳐 들어오게 하기 입니다.
20330
JavaScript 랜덤으로 이미지 출력 되기 입니다.
20329
JavaScript 사용자 해상도 알아내기 입니다.
20328
JavaScript 붙여넣기 금지하기 입니다.
20327
MySQL 대소문자 데이터 조회하기
20326
JavaScript 퇴장시 팝업창 한번한 띄우기 입니다.
20325
PHP www 주소 리다이렉션 시켜주기 입니다.
20324
PHP 신문 기사를 긁어오기 입니다. 1
20323
JavaScript 시도, 구군, 동 주소 select
20322
MySQL 커리로 DB 테이블 명세서 출력하기
20321
JavaScript 브라우저 해상도 구분없는 절대 x,y 좌표 값 구하기 입니다
20320
PHP rss 읽어오기 입니다.
20319
JavaScript 자바스크립트로 Ajax 효과내기 입니다.
이전 다음
전체 목록