특수 기능

엔트리위키

:

연습장

(r66 Blame)

		r66
r2 spesef	1	[[분류:엔트리위키]]
r2 spesef	2	[include(틀:엔트리위키 연습장)]
r62 RealErato	3	[include(틀:연습장/엔트리위키:연습장)]
r63 RealErato	4	## 밑에서부터 연습장입니다.
r66 RealErato	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	/* 단, 다른 버튼을 누르는 순간 숨겨짐 */
	16	.nbtn-container:not(:focus-within) .ntab-a { display: block !important; }
	17
	18	/* 버튼 디자인 설정 */
	19	a.nbtn {
	20	display: inline-block;
	21	padding: 8px 16px;
	22	margin-right: 4px;
	23	background: #f5f5f5;
	24	border: 1px solid #ccc;
	25	color: #000;
	26	text-decoration: none;
	27	font-size: 14px;
	28	cursor: pointer;
	29	outline: none;
	30	}
	31	a.nbtn:focus {
	32	font-weight: bold;
	33	background: #bbb;
	34	}
	35	}}}
	36
	37	{{{#!wiki class="nbtn-container"
	38	[[#\|{{{#!wiki class="nbtn nbtn-a"
	39	흰색 표 보기}}}]][[#\|{{{#!wiki class="nbtn nbtn-b"
	40	연두색 표 보기}}}]][[#\|{{{#!wiki class="nbtn nbtn-c"
	41	하늘색 표 보기}}}}}
	42
	43	{{{#!wiki class="ntab-container"
	44	{{{#!wiki class="ntab-a"
	45	\|\|<tablebgcolor=#ffffff><tablewidth=500px> 흰색 표의 내용 1 \|\| 내용 2 \|\|
	46	\|\| 내용 3 \|\| 내용 4 \|\|
	47	}}}
	48	{{{#!wiki class="ntab-b"
	49	\|\|<tablebgcolor=#e6ffe6><tablewidth=500px> 연두색 표의 내용 1 \|\| 내용 2 \|\|
	50	\|\| 내용 3 \|\| 내용 4 \|\|
	51	}}}
	52	{{{#!wiki class="ntab-c"
	53	\|\|<tablebgcolor=#e6f2ff><tablewidth=500px> 하늘색 표의 내용 1 \|\| 내용 2 \|\|
	54	\|\| 내용 3 \|\| 내용 4 \|\|
	55	}}}
	56	}}}
	57	}}}
	58

별도로 명시하지 않은 경우, 내용은 CC0에 따라 사용할 수 있습니다.