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

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

· 9년 전 · 39

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

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

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

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

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>  

댓글 작성

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

로그인하기

게시글 목록

번호 제목
20215
20214
20213
20212
28362
20211
20210
20209
20208
20207
20206
20205
20204
20203
20202
20201
20200
20199
JavaScript 계산기
20198
20197
20196
20195
20194
20193
20192
20191
20190
20189
20188
28361
20187
20186
20185
20184
20183
20182
20181
20180
20179
20177
8183
31027
8181
20176
20175
20174
20173
20172
20171
20170
20169
20168
20156
20154
20153
20152
8177
20151
20149
20148
20147
20146
20145
20144
20143
20142
20141
20140
20139
20137
20135
20134
20133
20129
20128
20126
8172
20123
20122
20121
20117
20116
20115
20114
20113
20112
20111
20110
20109
20108
20107
20106
20104
20103
20102
20101
31024
20100
20099
20098