"테스트"의 두 판 사이의 차이

my9univ
이동: 둘러보기, 검색
 
60번째 줄: 60번째 줄:
  
 
== 위키문법 ==
 
== 위키문법 ==
 +
 
{{#categorytree:독립운동가|mode=pages|depth=5|hideroot="on"|}}
 
{{#categorytree:독립운동가|mode=pages|depth=5|hideroot="on"|}}
  
83번째 줄: 84번째 줄:
 
{{숨김 시작|독립운동가}}
 
{{숨김 시작|독립운동가}}
 
<categorytree mode="pages" depth="5" ...>독립운동가</categorytree>
 
<categorytree mode="pages" depth="5" ...>독립운동가</categorytree>
 +
 +
== 아아 ==
 +
{{#tag:html|
 +
<script type="text/javascript" src="https://dh.aks.ac.kr/Graph/vis/dist/vis.js"></script>
 +
<style>
 +
#mynetwork {
 +
width: 90%;
 +
height: 70vh;
 +
background-color: #ffffff;
 +
border: 1px solid lightgray;
 +
margin: 0 auto;
 +
display: flex;
 +
justify-content: center;
 +
align-items: center;
 +
}
 +
#designGuide {
 +
width: 100%;
 +
margin-top: 60px;
 +
}
 +
#designGuide >h2{
 +
font-size:28px;
 +
font-weight:700;
 +
}
 +
#designGuide >h2 + p{
 +
font-size:16px;
 +
}
 +
.design-section {
 +
margin-top:40px;
 +
}
 +
.design-section h3 {
 +
font-size:20px;
 +
font-weight:bold;
 +
margin:0;
 +
}
 +
.design-section h3 + p{
 +
margin-top:8px;
 +
font-size:16px;
 +
margin-bottom:0;
 +
 +
}
 +
.example-grid {
 +
display: grid;
 +
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
 +
gap: 28px;
 +
margin-top: 24px;
 +
padding-top:22px;
 +
border-top:1px solid #eee;
 +
}
 +
.example-item {
 +
border: 1px solid #eee;
 +
border-radius: 12px;
 +
text-align: center;
 +
min-height:240px;
 +
padding:20px;
 +
display:flex;
 +
flex-direction: column;
 +
justify-content: center;
 +
align-items: center;
 +
}
 +
.example-item >div{
 +
width:100%;
 +
flex:1;
 +
max-height:240px;
 +
}
 +
.example-item h4 {
 +
font-size: 16px;
 +
margin-top: 0;
 +
margin-bottom: 12px;
 +
}
 +
.example-item pre {
 +
background-color: #f5f5f5;
 +
padding: 15px;
 +
border-radius: 6px;
 +
overflow-x: auto;
 +
text-align: left;
 +
font-size: 16px;
 +
margin-top: 15px;
 +
border: 1px solid #e0e0e0;
 +
line-height: 1.5;
 +
max-height: 300px;
 +
overflow-y: auto;
 +
}
 +
.color-box {
 +
width: 40px;
 +
height: 40px;
 +
border-radius: 4px;
 +
display: inline-block;
 +
margin-right: 10px;
 +
vertical-align: middle;
 +
}
 +
.edge-example {
 +
width: 100%;
 +
height: 80px;
 +
background-color: white;
 +
position: relative;
 +
margin-bottom: 15px;
 +
}
 +
.tab-container {
 +
display: flex;
 +
margin-top: 40px;
 +
background-color:#f9f9f9;
 +
border:1px solid #ddd;
 +
}
 +
.tab {
 +
flex:1;
 +
text-align:center;
 +
padding: 12px 0;
 +
cursor: pointer;
 +
border: 1px solid transparent;
 +
border-bottom: none;
 +
font-family: Pretendard;
 +
font-weight: 700;
 +
font-size: 16px;
 +
line-height: 26px;
 +
letter-spacing: 0%;
 +
}
 +
.tab + .tab{
 +
border-left:1px solid #eee;
 +
}
 +
.tab.active {
 +
background-color: #181818;
 +
color: #fff;
 +
}
 +
.tab-content {
 +
display: none;
 +
}
 +
.tab-content.active {
 +
display: block;
 +
}
 +
@media screen and (max-width: 991px) {
 +
#designGuide{
 +
margin-top:40px;
 +
}
 +
#designGuide >h2{
 +
font-size:20px;
 +
}
 +
.tab-container{
 +
flex-wrap:wrap;margin-top:24px;
 +
}
 +
.tab{
 +
flex:1 0 auto;
 +
width:50%;
 +
}
 +
.tab:nth-child(1n-2){
 +
border-bottom:1px solid #eee;
 +
}
 +
.design-section{
 +
margin-top:24px;
 +
}
 +
.design-section h3{
 +
margin-bottom:4px;
 +
}
 +
}
 +
</style>
 +
 +
<iframe width="100%" height="800px" src="https://dh.aks.ac.kr/~sandbox/cgi-bin/GuestQuery.py?db=gwangju&project=gwangju&key=우일선선교사사택"></iframe>
 +
 +
<div id="designGuide">
 +
<h2>vis.js 디자인 가이드</h2>
 +
<p>이 가이드는 vis.js 라이브러리를 사용한 네트워크 그래프 디자인 옵션을 보여줍니다.</p>
 +
 +
<div class="tab-container">
 +
<div class="tab active" onclick="showTab('nodeShapes')">노드 모양</div>
 +
<div class="tab" onclick="showTab('nodeStyles')">노드 스타일</div>
 +
<div class="tab" onclick="showTab('edgeStyles')">엣지 스타일</div>
 +
<div class="tab" onclick="showTab('layouts')">레이아웃</div>
 +
</div>
 +
 +
<div id="nodeShapes" class="tab-content active">
 +
<div class="design-section">
 +
<h3>1. 노드 모양 (Shape)</h3>
 +
<p>vis.js는 다양한 노드 모양을 제공합니다:</p>
 +
<div class="example-grid" id="shapeExamples">
 +
<!-- 여기에 노드 모양 예시가 동적으로 추가됩니다 -->
 +
</div>
 +
</div>
 +
</div>
 +
 +
<div id="nodeStyles" class="tab-content">
 +
<div class="design-section">
 +
<h3>2. 노드 스타일링</h3>
 +
<p>노드의 색상, 테두리, 폰트 등을 커스터마이징할 수 있습니다:</p>
 +
<div class="example-grid" id="styleExamples">
 +
<!-- 여기에 노드 스타일 예시가 동적으로 추가됩니다 -->
 +
</div>
 +
</div>
 +
</div>
 +
 +
<div id="edgeStyles" class="tab-content">
 +
<div class="design-section">
 +
<h3>3. 엣지(간선) 스타일링</h3>
 +
<p>엣지의 색상, 두께, 화살표 등을 설정할 수 있습니다:</p>
 +
<div class="example-grid" id="edgeExamples">
 +
<!-- 여기에 엣지 스타일 예시가 동적으로 추가됩니다 -->
 +
</div>
 +
</div>
 +
</div>
 +
 +
<div id="layouts" class="tab-content">
 +
<div class="design-section">
 +
<h3>4. 네트워크 레이아웃</h3>
 +
<p>그래프의 전체 레이아웃과 물리 효과를 설정할 수 있습니다:</p>
 +
<div class="example-grid" id="layoutExamples">
 +
<!-- 여기에 레이아웃 예시가 동적으로 추가됩니다 -->
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
 +
<script>
 +
// 디자인 가이드 예시 생성 함수
 +
function createDesignExamples() {
 +
// 1. 노드 모양 예시
 +
const shapeTypes = [
 +
{ shape: 'ellipse', label: 'ellipse' },
 +
{ shape: 'circle', label: 'circle' },
 +
{ shape: 'box', label: 'box' },
 +
{ shape: 'text', label: 'text' },
 +
{ shape: 'diamond', label: 'diamond' },
 +
{ shape: 'dot', label: 'dot' },
 +
{ shape: 'star', label: 'star' },
 +
{ shape: 'triangle', label: 'triangle' },
 +
{ shape: 'triangleDown', label: 'triangleDown' },
 +
{ shape: 'hexagon', label: 'hexagon' },
 +
{ shape: 'square', label: 'square' },
 +
{ shape: 'image', label: 'image', image: 'https://dh.aks.ac.kr/~gwangju/icon/photo/icon-Orchestra.jpg' },
 +
{ shape: 'circularImage', label: 'circularImage', image: 'https://dh.aks.ac.kr/~gwangju/icon/photo/icon-Orchestra.jpg' }
 +
];
 +
 +
const shapeContainer = document.getElementById('shapeExamples');
 +
shapeTypes.forEach(shapeInfo => {
 +
const exampleItem = document.createElement('div');
 +
exampleItem.className = 'example-item';
 +
 +
// 작은 네트워크 컨테이너 생성
 +
const networkContainer = document.createElement('div');
 +
networkContainer.style.margin = '0 auto';
 +
networkContainer.style.display = 'flex';
 +
networkContainer.style.justifyContent = 'center';
 +
networkContainer.style.alignItems = 'center';
 +
 +
exampleItem.appendChild(networkContainer);
 +
shapeContainer.appendChild(exampleItem);
 +
 +
// 노드 생성
 +
const nodes = new vis.DataSet([{
 +
id: 1,
 +
label: shapeInfo.label,
 +
shape: shapeInfo.shape,
 +
image: shapeInfo.image
 +
}]);
 +
 +
// 네트워크 생성
 +
const network = new vis.Network(networkContainer, { nodes }, {
 +
nodes: {
 +
size: 40,
 +
font: { size: 14 }
 +
},
 +
physics: {
 +
enabled: true,
 +
stabilization: true,
 +
barnesHut: {
 +
gravitationalConstant: -2000,
 +
centralGravity: 0.1,
 +
springLength: 95,
 +
springConstant: 0.04,
 +
damping: 0.09
 +
}
 +
},
 +
interaction: {
 +
dragNodes: true,
 +
dragView: false,
 +
zoomView: false
 +
}
 +
});
 +
 +
// 네트워크 캔버스 중앙 정렬
 +
network.on("afterDrawing", function(ctx) {
 +
network.fit();
 +
});
 +
 +
});
 +
 +
// 2. 노드 스타일 예시
 +
const nodeStyleExamples = [
 +
{
 +
name: '기본 스타일',
 +
options: {
 +
shape: 'circle',
 +
color: {
 +
background: '#97C2FC',
 +
border: '#2B7CE9'
 +
},
 +
borderWidth: 2
 +
}
 +
},
 +
{
 +
name: '아이콘 오버레이',
 +
customRender: true,
 +
options: {
 +
shape: 'circularImage',
 +
image: 'https://img.icons8.com/color/48/church.png',
 +
borderWidth: 3,
 +
borderWidthSelected: 5,
 +
color: {
 +
border: '#03A9F4',
 +
background: '#E1F5FE'
 +
},
 +
size: 40
 +
}
 +
},
 +
{
 +
name: '하이라이트 효과',
 +
options: {
 +
color: {
 +
background: '#97C2FC',
 +
border: '#2B7CE9',
 +
highlight: { background: '#D2E5FF', border: '#2B7CE9' }
 +
},
 +
size: 30
 +
}
 +
},
 +
{
 +
name: '그림자 효과',
 +
options: {
 +
color: { background: '#FFD86E', border: '#EDAA25' },
 +
shadow: { enabled: true, color: 'rgba(0,0,0,0.5)', size: 10, x: 5, y: 5 },
 +
size: 30
 +
}
 +
},
 +
{
 +
name: '검정 배경 흰색 글씨',
 +
options: {
 +
color: { background: 'black', border: '#333' },
 +
font: { color: 'white', size: 14 },
 +
size: 30
 +
}
 +
},
 +
{
 +
name: '둥근 이미지',
 +
options: {
 +
shape: 'circularImage',
 +
image: 'https://dh.aks.ac.kr/~gwangju/icon/photo/icon-Orchestra.jpg',
 +
size: 30
 +
}
 +
},
 +
{
 +
name: '커스텀 폰트',
 +
options: {
 +
font: { face: '함초롬바탕', color: '#772244', size: 16, bold: true },
 +
color: { background: '#FFECB3' },
 +
size: 30
 +
}
 +
}
 +
];
 +
 +
const styleContainer = document.getElementById('styleExamples');
 +
nodeStyleExamples.forEach(example => {
 +
const exampleItem = document.createElement('div');
 +
exampleItem.className = 'example-item';
 +
 +
// 제목 추가
 +
const title = document.createElement('h4');
 +
title.textContent = example.name;
 +
exampleItem.appendChild(title);
 +
 +
 +
// 작은 네트워크 컨테이너 생성
 +
const networkContainer = document.createElement('div');
 +
networkContainer.style.margin = '0 auto';
 +
networkContainer.style.display = 'flex';
 +
networkContainer.style.justifyContent = 'center';
 +
networkContainer.style.alignItems = 'center';
 +
networkContainer.style.position = 'relative';
 +
 +
exampleItem.appendChild(networkContainer);
 +
 +
styleContainer.appendChild(exampleItem);
 +
 +
// 노드 생성
 +
const nodes = new vis.DataSet([{
 +
id: 1,
 +
label: '노드',
 +
...example.options
 +
}]);
 +
 +
// 네트워크 생성
 +
const network = new vis.Network(networkContainer, { nodes }, {
 +
physics: {
 +
enabled: true,
 +
stabilization: true,
 +
barnesHut: {
 +
gravitationalConstant: -2000,
 +
centralGravity: 0.1,
 +
springLength: 95,
 +
springConstant: 0.04,
 +
damping: 0.09
 +
}
 +
},
 +
interaction: {
 +
dragNodes: true,
 +
dragView: false,
 +
zoomView: false
 +
}
 +
});
 +
// 네트워크 캔버스 중앙 정렬
 +
network.on("afterDrawing", function() {
 +
network.fit();
 +
});
 +
 +
// 아이콘 오버레이를 위한 새로운 방식 적용
 +
if(example.customRender){
 +
if (example.name === '아이콘 오버레이'  ) {
 +
// 노드 렌더링 함수 재정의
 +
const originalDrawFunction = network.body.nodes[1].shape.draw;
 +
network.body.nodes[1].shape.draw = function(ctx, x, y, selected, hover, values) {
 +
// 기본 노드 그리기
 +
originalDrawFunction.call(this, ctx, x, y, selected, hover, values);
 +
 +
// 노드 크기 가져오기
 +
const radius = values.size;
 +
 +
// + 아이콘 배경 그리기
 +
ctx.fillStyle = '#FF5722';
 +
ctx.beginPath();
 +
ctx.arc(x + radius*0.7, y - radius*0.7, radius*0.35, 0, 2 * Math.PI);
 +
ctx.fill();
 +
ctx.strokeStyle = 'white';
 +
ctx.lineWidth = 2;
 +
ctx.stroke();
 +
 +
// 플러스 기호 그리기 - 더 굵고 큰 선으로 그리기
 +
const iconX = x + radius*0.7;
 +
const iconY = y - radius*0.7;
 +
const iconSize = radius * 0.5; // 크기 증가
 +
 +
// 흰색 플러스 기호 그리기
 +
ctx.lineWidth = iconSize * 0.3; // 더 굵게
 +
ctx.strokeStyle = 'white';
 +
 +
// 수평선
 +
ctx.beginPath();
 +
ctx.moveTo(iconX - iconSize/2, iconY);
 +
ctx.lineTo(iconX + iconSize/2, iconY);
 +
ctx.stroke();
 +
 +
// 수직선
 +
ctx.beginPath();
 +
ctx.moveTo(iconX, iconY - iconSize/2);
 +
ctx.lineTo(iconX, iconY + iconSize/2);
 +
ctx.stroke();
 +
};
 +
}
 +
 +
}
 +
 +
});
 +
 +
// 3. 엣지 스타일 예시
 +
const edgeExamples = [
 +
{
 +
name: '기본 화살표',
 +
options: {
 +
arrows: { to: { enabled: true } },
 +
color: { color: '#848484' },
 +
width: 2
 +
}
 +
},
 +
{
 +
name: '양방향 화살표',
 +
options: {
 +
arrows: { to: { enabled: true }, from: { enabled: true } },
 +
color: { color: '#848484' },
 +
width: 2
 +
}
 +
},
 +
{
 +
name: '점선',
 +
options: {
 +
dashes: [5, 5],
 +
width: 2,
 +
color: { color: '#434343' }
 +
}
 +
},
 +
{
 +
name: '다양한 화살표 타입',
 +
options: {
 +
arrows: { to: { enabled: true, type: 'circle' } },
 +
color: { color: '#6A1B9A' },
 +
width: 2
 +
}
 +
},
 +
{
 +
name: '곡선 간선',
 +
options: {
 +
smooth: { enabled: true, type: 'curvedCW', roundness: 0.3 },
 +
arrows: { to: { enabled: true } },
 +
color: { color: '#00695C' },
 +
width: 2
 +
}
 +
},
 +
{
 +
name: '라벨 있는 간선',
 +
options: {
 +
label: '관계',
 +
font: { size: 12, align: 'middle' },
 +
color: { color: '#E65100', highlight: '#FF9800' },
 +
width: 2
 +
}
 +
}
 +
];
 +
 +
const edgeContainer = document.getElementById('edgeExamples');
 +
edgeExamples.forEach(example => {
 +
const exampleItem = document.createElement('div');
 +
exampleItem.className = 'example-item';
 +
 +
// 제목 추가
 +
const title = document.createElement('h4');
 +
title.textContent = example.name;
 +
exampleItem.appendChild(title);
 +
 +
// 작은 네트워크 컨테이너 생성
 +
const networkContainer = document.createElement('div');
 +
networkContainer.style.margin = '0 auto';
 +
networkContainer.style.display = 'flex';
 +
networkContainer.style.justifyContent = 'center';
 +
networkContainer.style.alignItems = 'center';
 +
 +
exampleItem.appendChild(networkContainer);
 +
 +
edgeContainer.appendChild(exampleItem);
 +
 +
// 노드와 엣지 생성
 +
const nodes = new vis.DataSet([
 +
{ id: 1, label: 'Node 1', x: -40, y: 0 },
 +
{ id: 2, label: 'Node 2', x: 40, y: 0 }
 +
]);
 +
 +
const edges = new vis.DataSet([{
 +
from: 1,
 +
to: 2,
 +
...example.options
 +
}]);
 +
 +
// 네트워크 생성
 +
const network = new vis.Network(networkContainer, { nodes, edges }, {
 +
physics: {
 +
enabled: true,
 +
stabilization: true,
 +
barnesHut: {
 +
gravitationalConstant: -2000,
 +
centralGravity: 0.1,
 +
springLength: 95,
 +
springConstant: 0.04,
 +
damping: 0.09
 +
}
 +
},
 +
interaction: {
 +
dragNodes: true,
 +
dragView: false,
 +
zoomView: false
 +
}
 +
});
 +
network.on("afterDrawing", function() {
 +
network.fit();
 +
});
 +
 +
});
 +
 +
// 4. 레이아웃 예시
 +
const layoutExamples = [
 +
{
 +
name: '표준 레이아웃',
 +
options: {
 +
layout: { improvedLayout: true },
 +
physics: { enabled: true, solver: 'barnesHut' }
 +
}
 +
},
 +
{
 +
name: '계층형 (위→아래)',
 +
options: {
 +
layout: {
 +
hierarchical: {
 +
enabled: true,
 +
direction: 'UD',
 +
sortMethod: 'directed'
 +
}
 +
},
 +
physics: { enabled: false }
 +
}
 +
},
 +
{
 +
name: '계층형 (좌→우)',
 +
options: {
 +
layout: {
 +
hierarchical: {
 +
enabled: true,
 +
direction: 'LR',
 +
sortMethod: 'directed'
 +
}
 +
},
 +
physics: { enabled: false }
 +
}
 +
},
 +
{
 +
name: 'ForceAtlas2 물리효과',
 +
options: {
 +
layout: { improvedLayout: true },
 +
physics: {
 +
enabled: true,
 +
solver: 'forceAtlas2Based',
 +
forceAtlas2Based: {
 +
gravitationalConstant: -50,
 +
centralGravity: 0.01,
 +
springLength: 100,
 +
springConstant: 0.08
 +
}
 +
}
 +
}
 +
},
 +
{
 +
name: '반발력 기반',
 +
options: {
 +
layout: { improvedLayout: true },
 +
physics: {
 +
enabled: true,
 +
solver: 'repulsion',
 +
repulsion: {
 +
nodeDistance: 120,
 +
centralGravity: 0.2
 +
}
 +
}
 +
}
 +
},
 +
{
 +
name: '물리효과 없음',
 +
options: {
 +
layout: { improvedLayout: true },
 +
physics: { enabled: false }
 +
}
 +
}
 +
];
 +
 +
const layoutContainer = document.getElementById('layoutExamples');
 +
layoutExamples.forEach(example => {
 +
const exampleItem = document.createElement('div');
 +
exampleItem.className = 'example-item';
 +
 +
// 제목 추가
 +
const title = document.createElement('h4');
 +
title.textContent = example.name;
 +
exampleItem.appendChild(title);
 +
 +
// 작은 네트워크 컨테이너 생성
 +
const networkContainer = document.createElement('div');
 +
networkContainer.style.margin = '0 auto';
 +
networkContainer.style.display = 'flex';
 +
networkContainer.style.justifyContent = 'center';
 +
networkContainer.style.alignItems = 'center';
 +
 +
exampleItem.appendChild(networkContainer);
 +
 +
layoutContainer.appendChild(exampleItem);
 +
 +
// 샘플 그래프 데이터 생성
 +
const nodes = new vis.DataSet([
 +
{ id: 1, label: '1' },
 +
{ id: 2, label: '2' },
 +
{ id: 3, label: '3' },
 +
{ id: 4, label: '4' },
 +
{ id: 5, label: '5' }
 +
]);
 +
 +
const edges = new vis.DataSet([
 +
{ from: 1, to: 2 },
 +
{ from: 1, to: 3 },
 +
{ from: 2, to: 4 },
 +
{ from: 2, to: 5 }
 +
]);
 +
 +
// 네트워크 생성
 +
const network = new vis.Network(networkContainer, { nodes, edges }, example.options);
 +
network.on("afterDrawing", function() {
 +
network.fit();
 +
});
 +
});
 +
 +
// 탭 전환 함수
 +
function showTab(tabId) {
 +
// 모든 탭 컨텐츠 숨기기
 +
var tabContents = document.getElementsByClassName("tab-content");
 +
for (var i = 0; i < tabContents.length; i++) {
 +
tabContents[i].classList.remove("active");
 +
}
 +
 +
// 모든 탭 비활성화
 +
var tabs = document.getElementsByClassName("tab");
 +
for (var i = 0; i < tabs.length; i++) {
 +
tabs[i].classList.remove("active");
 +
}
 +
 +
// 선택한 탭 컨텐츠 보이기
 +
document.getElementById(tabId).classList.add("active");
 +
 +
// 선택한 탭 활성화
 +
var selectedTab = document.querySelector(".tab[onclick*='" + tabId + "']");
 +
if (selectedTab) {
 +
selectedTab.classList.add("active");
 +
}
 +
}
 +
 +
// 페이지 로드 시 디자인 예제 생성
 +
window.onload = function() {
 +
createDesignExamples();
 +
};
 +
}
 +
 +
// 탭 전환 함수
 +
function showTab(tabId) {
 +
// 모든 탭 컨텐츠 숨기기
 +
var tabContents = document.getElementsByClassName("tab-content");
 +
for (var i = 0; i < tabContents.length; i++) {
 +
tabContents[i].classList.remove("active");
 +
}
 +
 +
// 모든 탭 비활성화
 +
var tabs = document.getElementsByClassName("tab");
 +
for (var i = 0; i < tabs.length; i++) {
 +
tabs[i].classList.remove("active");
 +
}
 +
 +
// 선택한 탭 컨텐츠 보이기
 +
document.getElementById(tabId).classList.add("active");
 +
 +
// 선택한 탭 활성화
 +
var selectedTab = document.querySelector(".tab[onclick*='" + tabId + "']");
 +
if (selectedTab) {
 +
selectedTab.classList.add("active");
 +
}
 +
}
 +
 +
// 페이지 로드 시 디자인 예제 생성
 +
window.onload = function() {
 +
createDesignExamples();
 +
};
 +
</script>
 +
}}
 +
  
 
[[분류:테스트]]
 
[[분류:테스트]]
  
 
[[Category:테스팅]]
 
[[Category:테스팅]]

2025년 9월 18일 (목) 02:30 기준 최신판

25

과거


설문조사


응답 결과

분류


위키문법



분류 관련

  • 분류 컨텐츠 펼침 + 분류 이름 보이기 + 갯수 셈
  • 분류 컨텐츠 펼침 + 분류 이름 안보이기
독립운동가(8개 문서)
  • 분류 컨텐츠 접음 + 분류 이름 보이기 + 갯수 셈
  • 분류 컨텐츠 접음