모바일 메인에 Tabs넣기

[code]

<style>
/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f2e6ff;
  padding-left: 10px;
  padding-right: 10px;

}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
    width:33.3%;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

/* Style the close button */
.topright {
  float: right;
  cursor: pointer;
  font-size: 28px;
}

.topright:hover {color: red;}
  
#div_kim{ padding: 15px;} 
  .h3_kim{ font-size: 15px;}
</style>

<div id="div_kim">
<h3 class="h3_kim">Here is Kims Work !!</h3>
<p>Click on the x button in the top right corner to close the current tab:</p>
</div>

<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">영상제작</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">홈페이지</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">쇼핑몰</button>
</div>

<div id="London" class="tabcontent">
  <span onclick="this.parentElement.style.display='none'" class="topright">&times</span>
  <h3 class="h3_kim">Make Video</h3>
  <p>London is the capital city of England.</p>
  <img src="../zz/images/changduk.jpg" style="width:100%;">
</div>

<div id="Paris" class="tabcontent">
  <span onclick="this.parentElement.style.display='none'" class="topright">&times</span>
  <h3 class="h3_kim">Make Homepage</h3>
  <p>Paris is the capital of France.</p> <br>
  
<style>
    #mediaPlayer { position:relative; padding-bottom:56.25%; height:0px; overflow:hidden; max-width:100%; }
    .normalPlayer { position:absolute; top:0px; left:0px; width:100%; height:100%; display:block; }
</style>
<div id=mediaPlayer><iframe class=normalPlayer src=https://www.youtube.com/embed/zhhEY86_ZXA?autoplay=1 frameborder=0 allowfullscreen></iframe></div>
</div>

<div id="Tokyo" class="tabcontent">
  <span onclick="this.parentElement.style.display='none'" class="topright">&times</span>
  <h3>Make Shoppingmall</h3>
    <script>
    img_1= "http://egis.kr/zz/images/square/333_1.png";
    img_2= "http://egis.kr/zz/images/square/333_2.png";
    img_3= "http://egis.kr/zz/images/square/333_3.png";
    for(imgTotal=0; this['img_'+(imgTotal+1)]; imgTotal++);
    n=1;
    function imgGo(){
      imgBtn.src= this["img_"+(n= n== imgTotal ? 1 : n+1)];
      imgOrder.innerText=n;
    }
  </script>
  <img id=imgBtn style=cursor:pointer;width:100% src=http://egis.kr/zz/images/square/333_1.png onclick=imgGo()>
  <div id=imgOrder style=text-align:center;font-size:20px>1</div>
</div>

<script>
function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
<!-- tabs end -->

[/code]

원소스는 How To Create Tabs (w3schools.com)이며 css를 약간 추가하였습니다.

mobile index.php에 넣으시면 됩니다

감사합니다.