상세 컨텐츠

본문 제목

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

카테고리 없음

by 동해둘리 2020. 8. 25. 16:32

본문

반응형

 

 

 

 

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

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

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
    <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>
 
cs

 

 

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

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

 

https://cafe.naver.com/ingsuccess

 

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

성공을 위해 실패를 두려워하지 않는 분들의 이야기를 나누고 싶습니다. 우리는 성공하는 중이니까요!

cafe.naver.com

 

 

 

 

 

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

 

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






반응형

댓글 영역