CSS 탭메뉴 만들기 css, html 만으로 Tab Menu 만들기

 

 

 

 

CSS / HTML 만으로 탭메뉴 (Tab Menu) 만들기 간단한 버전 정리합니다

다른 분이 공유하신 내용을 제가 참고하기 쉽게 간단하게만 정리했습니다

 

 

    <style>
 
        .main {
            min-width: 320px;
            max-width: 800px;
            padding: 10px;    
            border-radius: 7px;;        
            background: #ffffff;}
 
        section {
            display: none;
            padding: 20px 0 0;
            border-top: 1px solid #ddd;}
 
        input {
              display: none;}
 
        label {
            display: inline-block;
            padding: 15px 25px;
            font-weight: 600;
            color: #bbb;
            border: 1px solid transparent;}
 
        label:hover {
            color: #2e9cdf;
            cursor: pointer;}
 
        /*input 클릭시, label 스타일*/
        input:checked + label {
              color: #555;
              border: 1px solid #ddd;
              border-top: 2px solid #2e9cdf;
              border-bottom: 1px solid #ffffff;}
 
        #tab1:checked ~ #content1,
        #tab2:checked ~ #content2,
        #tab3:checked ~ #content3,
        #tab4:checked ~ #content4 {
            display: block;}
    </style>
 
<div class="main" style="text-align:left">
 
    <input id="tab1" type="radio" name="tabs" checked> 
    <label for="tab1">첫번째 탭</label>
 
    <input id="tab2" type="radio" name="tabs">
    <label for="tab2">두번째 탭</label>
 
 
    <section id="content1" style="margin-bottom:20px;">
        tab menu1의 내용
    </section>
 
    <section id="content2" style="margin-bottom:20px;">
        tab menu2의 내용
    </section>
 

 

 

참고로 저 동해둘리가 직접 운영하는 '성공하는 중이다'  카페를 소개드립니다. 

각자의 분야에서 성공을 향해 가는 과정에서 힘이되는 이야기, 힘이되는 사진, 성공스토리, 실패스토리 등을 나누고자 합니다. 많은 참여 부탁드려요

 

https://cafe.naver.com/ingsuccess

성공하는 중이다 : 네이버 카페

 

 

 

 

 

아래 블로그 내용을 참고했습니다

 

http://blog.naver.com/PostView.nhn?blogId=qkrchgml4&logNo=220869883245&redirect=Dlog&widgetTypeCall=true&directAccess=false