•  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
더 보기

엔트리위키:연습장(비교)

r67 vs r68
11[[분류:엔트리위키]]
22[include(틀:엔트리위키 연습장)]
33[include(틀:연습장/엔트리위키:연습장)]
44## 밑에서부터 연습장입니다.
5{{{#!style
6/* 기본적으로 모든 표 숨김 */
7.ntab-a, .ntab-b, .ntab-c { display: none !important; }
8
9/* 각 버튼이 포커스(클릭)되었을 때 매칭되는 표를 보여줌 */
10.nbtn-a:focus ~ .ntab-container .ntab-a { display: block !important; }
11.nbtn-b:focus ~ .ntab-container .ntab-b { display: block !important; }
12.nbtn-c:focus ~ .ntab-container .ntab-c { display: block !important; }
13
14/* 아무것도 클릭 안 했을 때(기본 상태) 흰색 표가 보이도록 설정 */
15.nbtn-container:not(:focus-within) .ntab-a { display: block !important; }
16
17/* 버튼 디자인 설정 */
18a.nbtn {
19 display: inline-block;
20 padding: 8px 16px;
21 margin-right: 4px;
22 background: #f5f5f5;
23 border: 1px solid #ccc;
24 color: #000;
25 text-decoration: none;
26 font-size: 14px;
27 cursor: pointer;
28 outline: none;
29}
30a.nbtn:focus {
31 font-weight: bold;
32 background: #bbb;
33}
34}}}
35
36{{{#!wiki class="nbtn-container"
37[[#클릭|{{{#!wiki class="nbtn nbtn-a"
38흰색 표 보기}}}]][[#클릭|{{{#!wiki class="nbtn nbtn-b"
39연두색 표 보기}}}]][[#클릭|{{{#!wiki class="nbtn nbtn-c"
40하늘색 표 보기}}}]]
41
42{{{#!wiki class="ntab-container"
43{{{#!wiki class="ntab-a"
44||<tablebgcolor=#ffffff><tablewidth=500px> 흰색 표의 내용 1 || 내용 2 ||
45|| 내용 3 || 내용 4 ||
46}}}
47{{{#!wiki class="ntab-b"
48||<tablebgcolor=#e6ffe6><tablewidth=500px> 연두색 표의 내용 1 || 내용 2 ||
49|| 내용 3 || 내용 4 ||
50}}}
51{{{#!wiki class="ntab-c"
52||<tablebgcolor=#e6f2ff><tablewidth=500px> 하늘색 표의 내용 1 || 내용 2 ||
53|| 내용 3 || 내용 4 ||
54}}}
55}}}
56}}}
57
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
더 보기