메인화면에 이미지처럼 카테고리 구현하고 싶은데
소스부탁드립니다.
답변 4개 / 댓글 5개
채택된 답변
+20 포인트
Poter
========================
미리보기 > https://ysmoto.kr/ys2/
아래에 말씀드린 자동으로 뽑는 겁니다.
분류명이 바뀌면 같이 바뀌겠죠?
========================
질문이 어렵네요.
뭘 시도해 보셨다는 이야기도 없으시고
이미 만들어진 게시판의 분류를 자동 으로 뽑아
오시겠다고 하시는건지 디자인을 입혀서 ....
단순히 디자인만 입혀 수동 입력 후 노출을 하시고 싶어 하시는건지.
변경 사항이 생기면 또 손을 대야 합니다. 차후 ....
둘중 어느걸 원하시는 건가요? 제 질문에 답을 주시면
고기를 잡아 드리지 않고 쉽게 잡는 방법을 알려 드리겠습니다.
잡는법을 알려드려도 아~ 몰랑 하시는 분도 가끔 계시기는 하시더군요.
https://sir.kr/questions/howto
https://sir.kr/questions/guide
참고삼아 읽어 보시기 바랍니다.
미리보기 > https://ysmoto.kr/ys2/
아래에 말씀드린 자동으로 뽑는 겁니다.
분류명이 바뀌면 같이 바뀌겠죠?
========================
질문이 어렵네요.
뭘 시도해 보셨다는 이야기도 없으시고
이미 만들어진 게시판의 분류를 자동 으로 뽑아
오시겠다고 하시는건지 디자인을 입혀서 ....
단순히 디자인만 입혀 수동 입력 후 노출을 하시고 싶어 하시는건지.
변경 사항이 생기면 또 손을 대야 합니다. 차후 ....
둘중 어느걸 원하시는 건가요? 제 질문에 답을 주시면
고기를 잡아 드리지 않고 쉽게 잡는 방법을 알려 드리겠습니다.
잡는법을 알려드려도 아~ 몰랑 하시는 분도 가끔 계시기는 하시더군요.
https://sir.kr/questions/howto
https://sir.kr/questions/guide
참고삼아 읽어 보시기 바랍니다.
답변에 대한 댓글 5개
2026-05-11 (월) 19:21:37
미리보기처럼 구현하고 싶은 것입니다. 분류 말고 테이블이 나타나게 하고 싶은 것입니다.
andor
2026-05-11 (월) 21:05:27
글자 수 땜시 짜증나서 못 쓰겠네요.
링크 드릴테니 오셔서 보시고 참고 하세요.
https://ysmoto.kr/ys2/bbs/board.php?bo_table=basict1000&wr_id=229
링크 드릴테니 오셔서 보시고 참고 하세요.
https://ysmoto.kr/ys2/bbs/board.php?bo_table=basict1000&wr_id=229
andor
2026-05-11 (월) 21:22:11
메인화면에 카테고리 구현 방법
분류 = 카테고리 .... 입니다. 제목을 헷갈리게 해 놓으신듯 ....
전체실적 .... 인테리어 라는 문구 까지(이미지 포함) 넣고 싶으신건지 ....
문구는 필요 없이 따로 이미지 4개만 불러오고 싶으신건지 ....
전체실적 .... 인테리어 < - 이걸 보통 카테고리 분류라 합니다.
지금 보여지는 형태로 봐서는 말이죠. 그냥 수동 으로 넣을수도
있겠죠. 아래 플로우랩님이 주신 소스를 활용 해서요.
이미지를 메인에 불러오는 걸 보통 최신글 불러 온다고 합니다.
이건 ... 포함된 기본 최신글 스킨을 사용 하시던가 스킨 자료실 에서
맘에 드는걸 고르신 후 업로드 하시고 원하시는 위치에 소스 한줄
뿌리기만 하시면 표현 됩니다. 보통 업로드 하시는 분들이 내용에
설명을 해 놓으십니다.
둘중 어느건지 명확 하게 해 주세요. 제목에 카테고리 라는 표현을
쓰셔서 저도 그렇고 다른분들도 헷갈리실듯 ....
분류 = 카테고리 .... 입니다. 제목을 헷갈리게 해 놓으신듯 ....
전체실적 .... 인테리어 라는 문구 까지(이미지 포함) 넣고 싶으신건지 ....
문구는 필요 없이 따로 이미지 4개만 불러오고 싶으신건지 ....
전체실적 .... 인테리어 < - 이걸 보통 카테고리 분류라 합니다.
지금 보여지는 형태로 봐서는 말이죠. 그냥 수동 으로 넣을수도
있겠죠. 아래 플로우랩님이 주신 소스를 활용 해서요.
이미지를 메인에 불러오는 걸 보통 최신글 불러 온다고 합니다.
이건 ... 포함된 기본 최신글 스킨을 사용 하시던가 스킨 자료실 에서
맘에 드는걸 고르신 후 업로드 하시고 원하시는 위치에 소스 한줄
뿌리기만 하시면 표현 됩니다. 보통 업로드 하시는 분들이 내용에
설명을 해 놓으십니다.
둘중 어느건지 명확 하게 해 주세요. 제목에 카테고리 라는 표현을
쓰셔서 저도 그렇고 다른분들도 헷갈리실듯 ....
andor
2026-05-12 (화) 04:39:43
2026-05-11 (월) 19:15:14
2026-05-11 (월) 13:55:33
비슷한 기능을 가진 자료가 이미 있습니다.
아래중에서 마음에 드시는걸로 적용해보세요.
https://sir.kr/boards/g5_skin/54657?search_type=subject_content&keyword=%EB%B6%84%EB%A5%98&category=%EC%B5%9C%EC%8B%A0%EA%B8%80
https://sir.kr/boards/g5_skin/31275?search_type=subject_content&keyword=%EB%B6%84%EB%A5%98&category=%EC%B5%9C%EC%8B%A0%EA%B8%80
아래중에서 마음에 드시는걸로 적용해보세요.
https://sir.kr/boards/g5_skin/54657?search_type=subject_content&keyword=%EB%B6%84%EB%A5%98&category=%EC%B5%9C%EC%8B%A0%EA%B8%80
https://sir.kr/boards/g5_skin/31275?search_type=subject_content&keyword=%EB%B6%84%EB%A5%98&category=%EC%B5%9C%EC%8B%A0%EA%B8%80
2026-05-11 (월) 12:17:29
Copy
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>탭 필터 버튼</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
background: #f5f5f5;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
/* ── 탭 필터 래퍼 ── */
.tab-filter {
display: inline-flex;
align-items: center;
gap: 8px;
background: #ffffff;
border-radius: 12px;
padding: 12px 16px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
/* ── 공통 버튼 ── */
.tab-filter .tab-btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 44px;
padding: 0 24px;
border: none;
border-radius: 8px;
font-size: 15px;
font-weight: 500;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease;
white-space: nowrap;
outline: none;
-webkit-tap-highlight-color: transparent;
}
/* ── 비활성(기본) 상태 ── */
.tab-filter .tab-btn.inactive {
background: transparent;
color: #555555;
}
.tab-filter .tab-btn.inactive:hover {
background: #f5f5f5;
color: #222222;
}
/* ── 활성 상태 ── */
.tab-filter .tab-btn.active {
background: #e84c6a;
color: #ffffff;
font-weight: 600;
}
</style>
</head>
<body>
<div class="tab-filter">
<button class="tab-btn active" data-tab="all">전체 실적</button>
<button class="tab-btn inactive" data-tab="construction">건설</button>
<button class="tab-btn inactive" data-tab="civil">토목</button>
<button class="tab-btn inactive" data-tab="interior">인테리어</button>
</div>
<script>
$(function () {
$('.tab-filter').on('click', '.tab-btn', function () {
// 모든 버튼 비활성화
$('.tab-filter .tab-btn')
.removeClass('active')
.addClass('inactive');
// 클릭된 버튼 활성화
$(this)
.removeClass('inactive')
.addClass('active');
// 선택된 탭 값 확인 (필요 시 활용)
const selectedTab = $(this).data('tab');
console.log('선택된 탭:', selectedTab);
});
});
</script>
</body>
</html>해당 소스로 하시면 될거 같습니다.
답변을 작성하려면 로그인이 필요합니다.