모바일 2줄
모바일 1줄
3월 25일 최종
<!--현황판-->
<div class="top_block">
<div class="top_slide">
<button type="utton" onclick="location.href='<https://wannago.oopy.io/why/rodlsdugod>' " class="card_list">
<div class="top_item_box_list">
<div class="item_box_list">
<div class="tag_box_list"><a class="bottom_list">모집중</a><br></div>
<div class="container_list1 container_list">
<!-- 아이템들이 추가될 곳입니다. -->
</div>
<div class="card_text_list">
<div class="middle_box_list">
<a class="middle_list purple"><b>3/12 - 3/14</b></a>
<a class="middle_list">여자만, 홉스골, 2030, 3박4일여정 </b></a><br>
</div>
</div>
</div>
<div class="list_bottom_btn">
<a class="seemore">자세히보기</a>
</div>
</button>
<button type="utton" onclick="location.href='<https://wannago.oopy.io/why/rodlsdugod>' " class="card_list">
<div class="top_item_box_list">
<div class="item_box_list">
<div class="tag_box_list"><a class="bottom_list">모집중</a><br></div>
<div class="container_list2 container_list">
<!-- 아이템들이 추가될 곳입니다. -->
</div>
<div class="card_text_list">
<div class="middle_box_list">
<a class="middle_list purple"><b>3/12 - 3/14</b></a>
<a class="middle_list">여자만, 홉스골, 2030, 3박4일여정 </b></a><br>
</div>
</div>
</div>
<div class="list_bottom_btn">
<a class="seemore">자세히보기</a>
</div>
</button>
<button type="utton" onclick="location.href='<https://wannago.oopy.io/why/rodlsdugod>' " class="card_list">
<div class="top_item_box_list">
<div class="item_box_list">
<div class="tag_box_list"><a class="bottom_list">모집중</a><br></div>
<div class="container_list3 container_list">
<!-- 아이템들이 추가될 곳입니다. -->
</div>
<div class="card_text_list">
<div class="middle_box_list">
<a class="middle_list purple"><b>3/12 - 3/14</b></a>
<a class="middle_list">여자만, 홉스골, 2030, 3박4일여정 </b></a><br>
</div>
</div>
</div>
<div class="list_bottom_btn">
<a class="seemore">자세히보기</a>
</div>
</button>
<button type="utton" onclick="location.href='<https://wannago.oopy.io/why/rodlsdugod>' " class="card_list">
<div class="top_item_box_list">
<div class="item_box_list">
<div class="tag_box_list"><a class="bottom_list">모집중</a><br></div>
<div class="container_list4 container_list">
<!-- 아이템들이 추가될 곳입니다. -->
</div>
<div class="card_text_list">
<div class="middle_box_list">
<a class="middle_list purple"><b>3/12 - 3/14</b></a>
<a class="middle_list">여자만, 홉스골, 2030, 3박4일여정 </b></a><br>
</div>
</div>
</div>
<div class="list_bottom_btn">
<a class="seemore">자세히보기</a>
</div>
</button>
</div>
</div>
HTML
복사
<!--현황판-->
<style>
/*전체*/
.top_block{
display: flex;
}
/*1줄*/
.top_slide{
display: grid;
font-family: "Gmarket Sans";
position: relative;
width: 100%;
height: 100%;
/*한 줄에 노출될 카드의 개수 repeat(노출될 카드 개수,비율(고정)) */
grid-template-columns: repeat(1, 1fr);
gap: 12px;
padding: 16px 0 4px;
margin: 0 auto;
}
/*텍스트박스*/
.card_list {
display: flex; /* 자식 요소를 가로로 정렬 */
justify-content: space-between; /* 각 자식 요소 사이의 여백을 최대로 설정하여 오른쪽 정렬 */
width: 100%;
height: auto;
flex-direction: row; /* 추가: 열 방향으로 정렬 */
align-items: left; /* 추가: 왼쪽 정렬 */
text-align: left; /* 추가: 글자 좌측 정렬 */
background-color: #F8F8F8; /* 배경 색상을 흰색으로 설정 */
border-radius: 7px; /* 테두리를 둥글게 만듭니다. */
border: 1px solid #F8F8F8; /* 테두리 스타일 설정 */
cursor: pointer; /* 마우스 커서를 포인터로 변경하여 클릭 가능함을 나타냄 */
line-height: 1.2;
}
.card_list:hover{
filter: brightness(0.94);
}
.top_item_box_list{
display: flex;
width: 100%;
flex-direction: row; /* 아이템들을 가로로 나열 */
justify-content: space-between; /* 각 자식 요소 사이의 여백을 최대로 설정하여 오른쪽 정렬 */
}
.item_box_list{
display: flex;
width: 100%;
align-items: center; /* 추가: 왼쪽 정렬 */
text-align: center; /* 추가: 글자 좌측 정렬 */
}
.tag_box_list{
align-items: center; /* 추가: 왼쪽 정렬 */
text-align: center; /* 추가: 글자 좌측 정렬 */
margin-bottom: 6px;
margin-right: 4px;
white-space: nowrap;
}
.bottom_list{
height: 19px;
font-size: 8px;
align-items: center; /* 추가: 왼쪽 정렬 */
text-align: center; /* 추가: 글자 좌측 정렬 */
background-color:#FFDED9;
color: #FF4F4B;
border-radius: 2px;
padding: 3px 6px;
}
.list_bottom_btn{
text-align: center;
justify-content: center; /* 가로 중앙 정렬 */
display: flex;
align-items: center; /* 세로 중앙 정렬 */
font-size: 8px;
background-color: #7E6BF4;
color: #white;
border-radius: 2px;
padding: 2px 8px;
width:14%;
justify-content: center;
}
.seemore{
align-items: center; /* 추가: 왼쪽 정렬 */
text-align: center; /* 추가: 글자 좌측 정렬 */
justify-content: center; /* 가로 중앙 정렬 */
color: white;
}
.container_list {
align-items: center; /* 추가: 왼쪽 정렬 */
text-align: center; /* 추가: 글자 좌측 정렬 */
display: flex;
flex-direction: row; /* 아이템들을 가로로 나열 */
flex-wrap: wrap; /* 아이템들이 넘칠 경우 다음 줄로 넘어갈 수 있게 함 */
}
.add_text_list{
font-size: 9px;
color: #626262;
text-align: center; /* 텍스트 가운데 정렬 */
align-items: center; /* 추가: 왼쪽 정렬 */
}
.card_text_list{
margin: 9px;
padding: 0;
display: flex;
flex-direction: row; /* 아이템들을 가로로 나열 */
}
.middle_box_list{
display: flex;
flex-direction: row; /* 아이템들을 가로로 나열 */
text-align: center; /* 텍스트 가운데 정렬 */
align-items: center; /* 추가: 왼쪽 정렬 */
}
.middle_list{
font-size: 9px;
font-weight: medium;
}
.purple{
color:#7123F2;
margin-right: 3px;
}
@media screen and (max-width: 800px) {
.card_list {
width: 100%;
height: auto;
line-height: 1.0;
padding: 6px 4px;
}
.middle_list{
font-size: 9px;
}
.bottom_list{
font-size: 8px;
}
.add_text_list{
font-size: 9px;
}
}
@media screen and (max-width: 660px) {
.card_list {
line-height: 0.9;
height: auto;
line-height: 1.0;
padding: 4px 4px;
}
.middle_list{
font-size: 8px;
}
.bottom_list{
font-size: 7px;
font-weight: bold;
}
.add_text_list{
font-size: 8px;
}
}
</style>
HTML
복사
<script>
const dataBlockIdList = [
"b2a073f4-429c-4115-a3aa-a07a9dc3e673",
"df058420-97a6-4d58-adc6-de90fde56479",
"df058420-97a6-4d58-adc6-de90fde56479",
"df058420-97a6-4d58-adc6-de90fde56479"
];
const buttonContainerLists = [];
function addButtonContainerList(dataBlockId) {
const buttonList = document.querySelector(`[data-block-id="${dataBlockId}"]`);
const containerList = document.querySelector(`.container_list${buttonContainerLists.length + 1}`);
const itemLists = Array.from(buttonList.querySelectorAll(".notion-collection-item"));
const countList = itemLists.length;
if (buttonList && containerList) {
let item1CountList = 0;
let item2CountList = 0;
itemLists.forEach((itemList, index) => {
if (itemList.textContent.includes("남자")) {
item1CountList++;
} else {
item2CountList++;
}
});
const excessCountList = countList - 1;
const excessTextList = excessCountList > 0 ? `<div class="add_text_list"><b>(남${item1CountList}/ 여${item2CountList})</b></div>` : '';
containerList.insertAdjacentHTML('beforeend', excessTextList);
buttonContainerLists.push({ buttonList, containerList, countList, item1CountList, item2CountList });
}
}
dataBlockIdList.forEach(addButtonContainerList);
</script>
HTML
복사
<style>
[data-block-id= "99413c14-9d1f-4a7c-984c-925d516b76ce"],{
display: none;
}
</style>
<script>
// 데이터 블록 아이디 목록
const dataBlockIds = [
"b2a073f4-429c-4115-a3aa-a07a9dc3e673",
"df058420-97a6-4d58-adc6-de90fde56479",
"df058420-97a6-4d58-adc6-de90fde56479",
"b2a073f4-429c-4115-a3aa-a07a9dc3e673",
"b2a073f4-429c-4115-a3aa-a07a9dc3e673",
"b2a073f4-429c-4115-a3aa-a07a9dc3e673"
];
</script>
HTML
복사
<!--하단 월 -->
<div class="tab_wrap tab_area subtab1">
<div class="btn_area clearfix">
<button class="btn btn_tab act" id="btn1" onclick="toggleBtn1()" data-depth="0" data-idx="0">2월</button>
<button class="btn btn_tab" id="btn2" onclick="toggleBtn2()" data-depth="0" data-idx="1">3월</button>
<button class="btn btn_tab" id="btn3" onclick="toggleBtn3()" data-depth="0" data-idx="2">4월</button>
<button class="btn btn_tab" id="btn4" onclick="toggleBtn4()" data-depth="0" data-idx="3">5월</button>
<button class="btn btn_tab" id="btn5" onclick="toggleBtn5()" data-depth="0" data-idx="4">6월</button>
<button class="btn btn_tab" id="btn6" onclick="toggleBtn6()" data-depth="0" data-idx="5">7월</button>
<button class="btn btn_tab" id="btn7" onclick="toggleBtn7()" data-depth="0" data-idx="6">8월</button>
<button class="btn btn_tab" id="btn8" onclick="toggleBtn8()" data-depth="0" data-idx="7">9월</button>
<button class="btn btn_tab" id="btn9" onclick="toggleBtn9()" data-depth="0" data-idx="8">10월</button>
<button class="btn btn_tab" id="btn10" onclick="toggleBtn10()" data-depth="0" data-idx="9">11월</button>
<button class="btn btn_tab" id="btn11" onclick="toggleBtn11()" data-depth="0" data-idx="10">12월</button>
</div>
</div>
<style>
.css-1jvi05l, .tab_wrap .btn_tab, .tab_wrap *[data-depth="1"] {
background-color: whitesmoke;
font-weight: 500;
cursor: pointer;
padding: 6px 16px;
margin: 6px;
position: relative;
font-size: 12px;
color: #696969;
border-radius: 4px;
border: 0 solid #5841D7;
float: left;
list-style: none;
}
.tab_wrap .btn_tab.act {
background-color: #7123F2;
color: white;
font-weight: bold;
}
.btn_tab:hover {
background-color: #7062E1;
color: white;
font-weight: bold;
}
@media screen and (max-width: 1024px) {
.tab_wrap .btn_tab {
padding: 4px 12px;
width: 48px;
font-size: 11px;
}
}
@media screen and (max-width: 600px) {
.tab_wrap .btn_tab {
padding: 5px 6px;
width: 42px;
margin: 1 auto;
font-size: 11px;
}
}
#mar, #apl, #may, #jun, #jly, #aug, #sep, #oct, #nov, #dec #jun1 {
display: none;
}
</style>
HTML
복사
<div class="collection_block feb" id="feb">
<div class="slide">
<button type="button" onclick="location.href='<https://wannago.oopy.io/why/rodlsdugod>'" class="card">
<div class="tag_txt"><a class="tag1">모집중</a></div>
<div class="card_text">
<a class="head">홉스골, 20대 여자만, 2030</b></a><br>
<div class="middle_box">
<a class="middle">여자만 참여할 수 있는 모임이에요 가보자고!</a><br>
</div>
<div class="container container4">
<!-- 아이템들이 추가될 곳입니다. -->
</div>
</div>
<div class="botton_btn_container">
<div class="bottom_btn">
<a class="bottom_btn_txt">자세히보기</a>
</div></div>
</button>
<button type="button" onclick="location.href='<https://wannago.oopy.io/why/rodlsdugod>'" class="card">
<div class="tag_txt"><a class="tag1">모집중</a></div>
<div class="card_text">
<a class="head">홉스골, 20대 여자만, 2030</b></a><br>
<div class="middle_box">
<a class="middle">여자만 참여할 수 있는 모임이에요 가보자고!</a><br>
</div>
<div class="container container5">
<!-- 아이템들이 추가될 곳입니다. -->
</div>
</div>
<div class="botton_btn_container">
<div class="bottom_btn">
<a class="bottom_btn_txt">자세히보기</a>
</div></div>
</button>
<button type="button" onclick="location.href='<https://wannago.oopy.io/why/rodlsdugod>'" class="card">
<div class="tag_txt"><a class="tag2">마감</a></div>
<div class="card_text">
<a class="head">홉스골, 20대 여자만, 2030</b></a><br>
<div class="middle_box">
<a class="middle">여자만 참여할 수 있는 모임이에요 가보자고!</a><br>
</div>
<div class="container container6">
<!-- 아이템들이 추가될 곳입니다. -->
</div>
</div>
<div class="botton_btn_container">
<div class="bottom_btn_end">
<a class="bottom_btn_txt">마감</a>
</div></div>
</button>
</div>
</div>
HTML
복사
<div class="collection_block mar" id="mar">
<div class="slide">
<button type="button" onclick="location.href='<https://wannago.oopy.io/why/rodlsdugod>'" class="card">
<div class="tag_txt"><a class="tag1">모집중</a></div>
<div class="card_text">
<a class="head">홉스골, 20대 여자만, 2030</b></a><br>
<div class="middle_box">
<a class="middle">여자만 참여할 수 있는 모임이에요 가보자고!</a><br>
</div>
<div class="container container1">
<!-- 아이템들이 추가될 곳입니다. -->
</div>
</div>
<div class="botton_btn_container">
<div class="bottom_btn">
<a class="bottom_btn_txt">자세히보기</a>
</div></div>
</button>
<button type="button" onclick="location.href='<https://wannago.oopy.io/why/rodlsdugod>'" class="card">
<div class="tag_txt"><a class="tag2">마감</a></div>
<div class="card_text">
<a class="head">홉스골, 20대 여자만, 2030</b></a><br>
<div class="middle_box">
<a class="middle">여자만 참여할 수 있는 모임이에요 가보자고!</a><br>
</div>
<div class="container container2">
<!-- 아이템들이 추가될 곳입니다. -->
</div>
</div>
<div class="botton_btn_container">
<div class="bottom_btn_end">
<a class="bottom_btn_txt">마감</a>
</div></div>
</button>
<button type="button" onclick="location.href='<https://wannago.oopy.io/why/rodlsdugod>'" class="card">
<div class="tag_txt"><a class="tag2">마감</a></div>
<div class="card_text">
<a class="head">홉스골, 20대 여자만, 2030</b></a><br>
<div class="middle_box">
<a class="middle">여자만 참여할 수 있는 모임이에요 가보자고!</a><br>
</div>
<div class="container container3">
<!-- 아이템들이 추가될 곳입니다. -->
</div>
</div>
<div class="botton_btn_container">
<div class="bottom_btn_end">
<a class="bottom_btn_txt">마감</a>
</div></div>
</button>
</div>
</div>
HTML
복사
<div class="collection_block apl" id="apl">
<div class="slide">
</div>
</div>
HTML
복사
<div class="collection_block may" id="may">
<div class="slide">
<button type="button" onclick="location.href='<https://wannago.oopy.io/why/rodlsdugod>'" class="card">
<div class="tag_txt"><a class="tag1">모집중</a></div>
<div class="card_text">
<a class="head">홉스골, 20대 여자만, 2030</b></a><br>
<div class="middle_box">
<a class="middle">여자만 참여할 수 있는 모임이에요 가보자고!</a><br>
</div>
<div class="container container7">
<!-- 아이템들이 추가될 곳입니다. -->
</div>
</div>
<div class="botton_btn_container">
<div class="bottom_btn">
<a class="bottom_btn_txt">자세히보기</a>
</div></div>
</button>
<button type="button" onclick="location.href='<https://wannago.oopy.io/why/rodlsdugod>'" class="card">
<div class="tag_txt"><a class="tag2">마감</a></div>
<div class="card_text">
<a class="head">홉스골, 20대 여자만, 2030</b></a><br>
<div class="middle_box">
<a class="middle">여자만 참여할 수 있는 모임이에요 가보자고!</a><br>
</div>
<div class="container container8">
<!-- 아이템들이 추가될 곳입니다. -->
</div>
</div>
<div class="botton_btn_container">
<div class="bottom_btn">
<a class="bottom_btn_txt">자세히보기</a>
</div></div>
</button>
<button type="button" onclick="location.href='<https://wannago.oopy.io/why/rodlsdugod>'" class="card">
<div class="tag_txt"><a class="tag2">마감</a></div>
<div class="card_text">
<a class="head">홉스골, 20대 여자만, 2030</b></a><br>
<div class="middle_box">
<a class="middle">여자만 참여할 수 있는 모임이에요 가보자고!</a><br>
</div>
<div class="container container9">
<!-- 아이템들이 추가될 곳입니다. -->
</div>
</div>
<div class="botton_btn_container">
<div class="bottom_btn_end">
<a class="bottom_btn_txt">마감</a>
</div></div>
</button>
</div>
</div>
HTML
복사
<div class="collection_block jun" id="jun">
<div class="slide">
</div>
</div>
HTML
복사
<div class="collection_block jun" id="jun1">
<div class="slide">
</div>
</div>
HTML
복사
<div class="collection_block jly" id="jly">
<div class="slide">
</div></div>
HTML
복사
<div class="collection_block aug" id="aug">
<div class="slide">
</div></div>
HTML
복사
<div class="collection_block sep" id="sep">
<div class="slide">
</div></div>
HTML
복사
<div class="collection_block auc" id="oct">
<div class="slide">
</div></div>
HTML
복사
<div class="collection_block nov" id="nov">
<div class="slide">
</div>
</div>
HTML
복사
<div class="collection_block nov" id="dec">
<div class="slide">
</div></div>
HTML
복사
<style>
/*전체*/
.collection_block{
display: flex;
}
.tag_box{
display: flex;
margin-top: 8px;
margin-bottom: 6px;
margin-left: 12px;
}
/*1줄*/
.slide{
display: grid;
font-family: "Gmarket Sans";
position: relative;
width: 100%;
height: 100%;
/*한 줄에 노출될 카드의 개수 repeat(노출될 카드 개수,비율(고정)) */
grid-template-columns: repeat(2, 1fr);
gap: 12px;
padding: 16px 0 4px;
margin: 0 auto;
}
.middle_box{
line-height: 0.9;
}
.card:hover{
filter: brightness(0.94);
}
/*텍스트박스*/
.card {
width: 100%;
display: flex;
padding: 10px 0 3px 0;
margin-bottom: 10px;
flex-direction: column; /* 추가: 열 방향으로 정렬 */
align-items: left; /* 추가: 왼쪽 정렬 */
text-align: left; /* 추가: 글자 좌측 정렬 */
background-color: white; /* 배경 색상을 흰색으로 설정 */
border-radius: 4px; /* 테두리를 둥글게 만듭니다. */
border: 1px solid #ccc; /* 테두리 스타일 설정 */
cursor: pointer; /* 마우스 커서를 포인터로 변경하여 클릭 가능함을 나타냄 */
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* 외부 그림자 추가 */
line-height: 1.6;
}
.container {
display: flex;
flex-direction: row; /* 아이템들을 가로로 나열 */
margin-left: 4px;
margin-top: 8px;
margin-bottom: 8px;
flex-wrap: wrap; /* 아이템들이 넘칠 경우 다음 줄로 넘어갈 수 있게 함 */
align-items: flex-end; /* 세로 아래 정렬 */
}
.img_container{
width: 100%;
height: 100px;
max-height: 100px;
overflow: hidden; /* 카드 내부의 내용물이 넘칠 경우 숨깁니다. */
}
.img_item{
border-radius: 10px 10px 0 0;
width: 100%;
max-height: 100px;
min-height: 100px;
}
.item1 {
width: 30px;
height: 30px;
margin-right: 8px;
margin-bottom: 2px; /* 아이템들의 아래쪽 간격을 추가 */
background-image: url('<https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2F2fd71088-fb8c-45a6-b5ae-4c1b92b2a680%2FGroup_260.png&blockId=e9e1ec96-3886-40e4-9ad7-3cd7a77ad7ab>');
background-size: cover;
}
.item2 {
width: 30px;
height: 30px;
margin-right: 8px;
margin-bottom: 2px; /* 아이템들의 아래쪽 간격을 추가 */
background-image: url('<https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2Ff8c67a1b-bb3e-4c30-9af4-e8ab73d7458c%2FGroup_261.png&blockId=9ab06d89-c75c-4824-bbcb-d397449b8d8a>');
background-size: cover;
}
.head{
font-size: 17px;
font-weight: bold;
margin-bottom: 4px;
}
.middle{
font-size: 10px;
font-weight: medium;
}
.bottom{
background-color:#7062E1;
color: #ffffff;
font-size: 8px;
border-radius: 2px;
padding: 4px 8px;
margin: 3px;
align-items: center; /* 추가: 왼쪽 정렬 */
text-align: center; /* 추가: 글자 좌측 정렬 */
}
.card_text{
margin: 0;
margin-left: 10px;
margin-top:2px;
padding: 4px 0 0 10px;
}
.add-text{
font-size: 8px;
color: #626262;
text-align: center; /* 텍스트 가운데 정렬 */
margin-top: 10px; /* 아이템들의 아래쪽 간격을 추가 */
}
.botton_btn_container {
width: 100%;
display: flex;
justify-content: center; /* 가로 중앙 정렬 */
margin-bottom: 14px;
margin-top: 10px;
}
.bottom_btn {
width: 93%;
height: 40px;
background-color: #7E6BF4;
text-align: center;
justify-content: center; /* 가로 중앙 정렬 */
display: flex;
align-items: center; /* 세로 중앙 정렬 */
border-radius: 3px; /* 테두리를 둥글게 만듭니다. */
border: 1px solid #ccc; /* 테두리 스타일 설정 */
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* 외부 그림자 추가 */
color: white;
margin: auto; /* 텍스트를 세로로 중앙에 정렬 */
font-size: 12px;
}
.bottom_btn_end{
width: 93%;
height: 40px;
background-color:#C8C8C8;
color: #EEEEEE;
text-align: center;
justify-content: center; /* 가로 중앙 정렬 */
display: flex;
align-items: center; /* 세로 중앙 정렬 */
border-radius: 3px; /* 테두리를 둥글게 만듭니다. */
border: 1px solid #EEEEEE; /* 테두리 스타일 설정 */
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1); /* 외부 그림자 추가 */
margin: auto; /* 텍스트를 세로로 중앙에 정렬 */
font-size: 12px;
}
/*텍스트박스*/
.tag_txt {
width: 100%;
margin-left: 13px;
white-space: pre-line;
overflow: hidden;
text-overflow: ellipsis;
font-size:10px;
line-height: 20px;
font-family: "Gmarket Sans";
}
/*마감임박*/
.tag1{
white-space:nowrap;
background-color:#FFDED9;
color: #FF4F4B;
border-radius: 2px;
padding: 3px 6px;
}
/*마감 회색 */
.tag2{
background-color:#ECECEC;
color: #777777;
border-radius: 2px;
padding: 3px 6px;
}
@media screen and (max-width: 800px) {
.card {
line-height: 1.3;
}
.head{
font-size: 14px;
}
.middle{
font-size: 7px;
}
.bottom{
font-size: 6px;
}
.item1 {
width: 14px;
height: 14px;
margin-right: 2px;
margin-bottom: 4px; /* 아이템들의 아래쪽 간격을 추가 */
}
.item2 {
width: 14px;
height: 14px;
margin-right: 2px;
margin-bottom: 4px; /* 아이템들의 아래쪽 간격을 추가 */
}
.add-text{
font-size: 7px;
margin-top: 7px; /* 아이템들의 아래쪽 간격을 추가 */
}
}
@media screen and (max-width: 660px) {
.slide{
/*한 줄에 노출될 카드의 개수 repeat(노출될 카드 개수,비율(고정)) */
grid-template-columns: repeat(1, 1fr);
}
.card {
line-height: 1.2;
}
.head{
font-size: 13px;
}
.middle{
font-size: 9px;
}
.bottom{
font-size: 6px;
}
.item1 {
width: 17px;
height: 17px;
margin-right: 2px;
margin-bottom: 4px; /* 아이템들의 아래쪽 간격을 추가 */
}
.item2 {
width: 17px;
height: 17px;
margin-right: 2px;
margin-bottom: 4px; /* 아이템들의 아래쪽 간격을 추가 */
}
.add-text{
font-size: 7px;
margin-top: 7px; /* 아이템들의 아래쪽 간격을 추가 */
}
}
</style>
HTML
복사
<script>
const buttonContainers = [];
function addButtonContainer(dataBlockId) {
const button = document.querySelector(`[data-block-id="${dataBlockId}"]`);
const container = document.querySelector(`.container${buttonContainers.length + 1}`);
const items = Array.from(button.querySelectorAll(".notion-collection-item"));
const count = items.length;
if (button && container) {
let item1Count = 0;
let item2Count = 0;
items.forEach((item, index) => {
if (item.textContent.includes("남자")) {
item1Count++;
addItem(container, 1, true);
} else {
item2Count++;
addItem(container, 1, false);
}
});
const itemsInContainer = container.querySelectorAll('.item');
if (itemsInContainer.length > 5) {
for (let i = 5; i < itemsInContainer.length; i++) {
itemsInContainer[i].remove();
}
}
buttonContainers.push({ button, container, count, item1Count, item2Count });
}
}
dataBlockIds.forEach(addButtonContainer);
function addItem(container, count, isItem1) {
const maxItemCount = 5;
const itemCount = Math.min(count, maxItemCount);
for (let i = 0; i < itemCount; i++) {
const item = document.createElement('div');
item.classList.add('item');
if (isItem1) {
item.classList.add('item1');
} else {
item.classList.add('item2');
}
container.appendChild(item);
}
}
function addExcessText(container, count, item1Count, item2Count) {
const maxItemCount = 0;
if (count > maxItemCount) {
const excessCount = count - maxItemCount;
container.insertAdjacentHTML('beforeend', `<div class="add-text"><b>. . . ${excessCount}명</b>이 함께하는 중! <b>(남${item1Count}/여${item2Count})</b></div>`);
}
}
buttonContainers.forEach(info => {
addExcessText(info.container, info.count, info.item1Count, info.item2Count);
});
</script>
HTML
복사
<script>
function findParent(el, className){
let check = el.parentNode.classList.contains(className);
if(check === true){
return el.parentNode;
} else {
return findParent(el.parentNode, className);
}
}
function bindingTabEvent(wrap){
let wrapEl = document.querySelectorAll(wrap);
wrapEl.forEach(function(tabArea){
let btn = tabArea.querySelectorAll('.btn_tab');
btn.forEach(function(item){
item.addEventListener('click', function(){
let parent = findParent(this, 'tab_area');
let idx = this.dataset['idx'];
let depth = this.dataset['depth'];
let btnArr = parent.querySelectorAll('.btn_tab[data-depth="'+ depth +'"]');
let contentArr = parent.querySelectorAll('.content_area[data-depth="'+ depth +'"]');
btnArr.forEach(function(btn){ btn.classList.remove('act'); });
this.classList.add('act');
});
});
});
}
bindingTabEvent('.tab_wrap');
</script>
HTML
복사
<script>
/*지도 우피 퍼블리시로 보기 > 데이터블록 아이디 확인> 각각 img queryselector 에 넣어주기 웹 / 모바일*/
const button_1_img = document.querySelector('#feb');
const button_2_img = document.querySelector('#mar');
const button_3_img = document.querySelector('#apl');
const button_4_img = document.querySelector('#may');
const button_5_img = document.querySelector('#jun');
const button_5_1img = document.querySelector('#jun1');
const button_6_img = document.querySelector('#jly');
const button_7_img = document.querySelector('#aug');
const button_8_img = document.querySelector('#sep');
const button_9_img = document.querySelector('#oct');
const button_10_img = document.querySelector('#nov');
const button_11_img = document.querySelector('#dec');
function toggleBtn1() {
// btn1 숨기기 (display: none)
button_1_img.style.display = 'block';
button_2_img.style.display = 'none';
button_3_img.style.display = 'none';
button_4_img.style.display = 'none';
button_5_img.style.display = 'none';
button_5_1img.style.display = 'none';
button_6_img.style.display = 'none';
button_7_img.style.display = 'none';
button_8_img.style.display = 'none';
button_9_img.style.display = 'none';
button_10_img.style.display = 'none';
button_11_img.style.display = 'none';
button_1.style.display = 'block';
button_2.style.display = 'none';
button_3.style.display = 'none';
button_4.style.display = 'none';
button_5.style.display = 'none';
button_5_1.style.display = 'none';
button_6.style.display = 'none';
button_7.style.display = 'none';
button_8.style.display = 'none';
button_9.style.display = 'none';
button_10.style.display = 'none';
button_11.style.display = 'none';
}
function toggleBtn2() {
button_2_img.style.display = 'block';
button_1_img.style.display = 'none';
button_3_img.style.display = 'none';
button_4_img.style.display = 'none';
button_5_img.style.display = 'none';
button_6_img.style.display = 'none';
button_7_img.style.display = 'none';
button_8_img.style.display = 'none';
button_9_img.style.display = 'none';
button_10_img.style.display = 'none';
button_11_img.style.display = 'none';
button_2.style.display = 'block';
button_1.style.display = 'none';
button_3.style.display = 'none';
button_4.style.display = 'none';
button_5.style.display = 'none';
button_5_1.style.display = 'none';
button_6.style.display = 'none';
button_7.style.display = 'none';
button_8.style.display = 'none';
button_9.style.display = 'none';
button_10.style.display = 'none';
button_11.style.display = 'none';
}
function toggleBtn3() {
button_3_img.style.display = 'block';
button_1_img.style.display = 'none';
button_2_img.style.display = 'none';
button_4_img.style.display = 'none';
button_5_img.style.display = 'none';
button_5_1img.style.display = 'none';
button_6_img.style.display = 'none';
button_7_img.style.display = 'none';
button_8_img.style.display = 'none';
button_9_img.style.display = 'none';
button_10_img.style.display = 'none';
button_11_img.style.display = 'none';
button_3.style.display = 'block';
button_2.style.display = 'none';
button_1.style.display = 'none';
button_4.style.display = 'none';
button_5.style.display = 'none';
button_5_1.style.display = 'none';
button_6.style.display = 'none';
button_7.style.display = 'none';
button_8.style.display = 'none';
button_9.style.display = 'none';
button_10.style.display = 'none';
button_11.style.display = 'none';
}
function toggleBtn4() {
button_4_img.style.display = 'block';
button_1_img.style.display = 'none';
button_2_img.style.display = 'none';
button_3_img.style.display = 'none';
button_5_img.style.display = 'none';
button_5_1img.style.display = 'none';
button_6_img.style.display = 'none';
button_7_img.style.display = 'none';
button_8_img.style.display = 'none';
button_9_img.style.display = 'none';
button_10_img.style.display = 'none';
button_11_img.style.display = 'none';
button_4.style.display = 'block';
button_2.style.display = 'none';
button_3.style.display = 'none';
button_1.style.display = 'none';
button_5.style.display = 'none';
button_5_1.style.display = 'none';
button_6.style.display = 'none';
button_7.style.display = 'none';
button_8.style.display = 'none';
button_9.style.display = 'none';
button_10.style.display = 'none';
button_11.style.display = 'none';
}
function toggleBtn5() {
button_5_img.style.display = 'block';
button_5_1img.style.display = 'block';
button_1_img.style.display = 'none';
button_2_img.style.display = 'none';
button_3_img.style.display = 'none';
button_4_img.style.display = 'none';
button_6_img.style.display = 'none';
button_7_img.style.display = 'none';
button_8_img.style.display = 'none';
button_9_img.style.display = 'none';
button_10_img.style.display = 'none';
button_11_img.style.display = 'none';
button_5.style.display = 'block';
button_2.style.display = 'none';
button_3.style.display = 'none';
button_4.style.display = 'none';
button_1.style.display = 'none';
button_5_1.style.display = 'block';
button_6.style.display = 'none';
button_7.style.display = 'none';
button_8.style.display = 'none';
button_9.style.display = 'none';
button_10.style.display = 'none';
button_11.style.display = 'none';
}
function toggleBtn6() {
button_6_img.style.display = 'block';
button_1_img.style.display = 'none';
button_2_img.style.display = 'none';
button_3_img.style.display = 'none';
button_4_img.style.display = 'none';
button_5_img.style.display = 'none';
button_5_1img.style.display = 'none';
button_7_img.style.display = 'none';
button_8_img.style.display = 'none';
button_9_img.style.display = 'none';
button_10_img.style.display = 'none';
button_11_img.style.display = 'none';
button_6.style.display = 'block';
button_2.style.display = 'none';
button_3.style.display = 'none';
button_4.style.display = 'none';
button_5.style.display = 'none';
button_5_1.style.display = 'none';
button_1.style.display = 'none';
button_7.style.display = 'none';
button_8.style.display = 'none';
button_9.style.display = 'none';
button_10.style.display = 'none';
button_11.style.display = 'none';
}
function toggleBtn7() {
button_7_img.style.display = 'block';
button_1_img.style.display = 'none';
button_2_img.style.display = 'none';
button_3_img.style.display = 'none';
button_4_img.style.display = 'none';
button_5_img.style.display = 'none';
button_5_1img.style.display = 'none';
button_6_img.style.display = 'none';
button_8_img.style.display = 'none';
button_9_img.style.display = 'none';
button_10_img.style.display = 'none';
button_11_img.style.display = 'none';
button_7.style.display = 'block';
button_2.style.display = 'none';
button_3.style.display = 'none';
button_4.style.display = 'none';
button_5.style.display = 'none';
button_5_1.style.display = 'none';
button_6.style.display = 'none';
button_1.style.display = 'none';
button_8.style.display = 'none';
button_9.style.display = 'none';
button_10.style.display = 'none';
button_11.style.display = 'none';
}
</script>
HTML
복사
<script>
function toggleBtn8() {
button_8_img.style.display = 'block';
button_1_img.style.display = 'none';
button_2_img.style.display = 'none';
button_3_img.style.display = 'none';
button_4_img.style.display = 'none';
button_5_img.style.display = 'none';
button_5_1img.style.display = 'none';
button_6_img.style.display = 'none';
button_7_img.style.display = 'none';
button_9_img.style.display = 'none';
button_10_img.style.display = 'none';
button_11_img.style.display = 'none';
button_8.style.display = 'block';
button_2.style.display = 'none';
button_3.style.display = 'none';
button_4.style.display = 'none';
button_5.style.display = 'none';
button_5_1.style.display = 'none';
button_6.style.display = 'none';
button_1.style.display = 'none';
button_7.style.display = 'none';
button_9.style.display = 'none';
button_10.style.display = 'none';
button_11.style.display = 'none';
}
function toggleBtn9() {
button_9_img.style.display = 'block';
button_1_img.style.display = 'none';
button_2_img.style.display = 'none';
button_3_img.style.display = 'none';
button_4_img.style.display = 'none';
button_5_img.style.display = 'none';
button_5_1img.style.display = 'none';
button_6_img.style.display = 'none';
button_7_img.style.display = 'none';
button_8_img.style.display = 'none';
button_10_img.style.display = 'none';
button_11_img.style.display = 'none';
button_9.style.display = 'block';
button_2.style.display = 'none';
button_3.style.display = 'none';
button_4.style.display = 'none';
button_5.style.display = 'none';
button_5_1.style.display = 'none';
button_6.style.display = 'none';
button_1.style.display = 'none';
button_7.style.display = 'none';
button_8.style.display = 'none';
button_10.style.display = 'none';
button_11.style.display = 'none';
}
function toggleBtn10() {
button_10_img.style.display = 'block';
button_1_img.style.display = 'none';
button_2_img.style.display = 'none';
button_3_img.style.display = 'none';
button_4_img.style.display = 'none';
button_5_img.style.display = 'none';
button_5_1img.style.display = 'none';
button_6_img.style.display = 'none';
button_7_img.style.display = 'none';
button_8_img.style.display = 'none';
button_9_img.style.display = 'none';
button_11_img.style.display = 'none';
button_10.style.display = 'block';
button_2.style.display = 'none';
button_3.style.display = 'none';
button_4.style.display = 'none';
button_5.style.display = 'none';
button_5_1.style.display = 'none';
button_6.style.display = 'none';
button_1.style.display = 'none';
button_7.style.display = 'none';
button_1.style.display = 'none';
button_10.style.display = 'none';
button_11.style.display = 'none';
}
function toggleBtn11() {
button_11_img.style.display = 'block';
button_1_img.style.display = 'none';
button_2_img.style.display = 'none';
button_3_img.style.display = 'none';
button_4_img.style.display = 'none';
button_5_img.style.display = 'none';
button_5_1img.style.display = 'none';
button_6_img.style.display = 'none';
button_7_img.style.display = 'none';
button_8_img.style.display = 'none';
button_9_img.style.display = 'none';
button_10_img.style.display = 'none';
button_11.style.display = 'block';
button_2.style.display = 'none';
button_3.style.display = 'none';
button_4.style.display = 'none';
button_5.style.display = 'none';
button_5_1.style.display = 'none';
button_6.style.display = 'none';
button_1.style.display = 'none';
button_7.style.display = 'none';
button_9.style.display = 'none';
button_10.style.display = 'none';
button_1.style.display = 'none';
}
toggleBtn2();
toggleBtn1();
</script>
HTML
복사
