Search

[위젯 레이아웃] 1줄 2아이템 | 1줄 4아이템

담당자
사용부서
선택
솔루션
확인 필요

1)1줄 2아이템

<!--버튼 2줄 노출 --> <style> .collection_block_button{ display: flex; } .slide_button{ display: grid; position: relative; width: 100%; /*한 줄에 노출될 카드의 개수 repeat(노출될 카드 개수,비율(고정)) */ grid-template-columns: repeat(2, 1fr); padding-top: 16px; padding-bottom: 4px; margin: 0 auto; /* 중앙 정렬 */ } .img_item:hover{ filter: brightness(0.8); } .collection_item_button{ display: block; overflow: hidden; transition: background 100ms ease-out; position: static; width: 100%; height: 100%; background-color: white; border: none; } </style>
HTML
복사
<div class="collection_block_button"> <div class="slide_button"> <button type="button" onclick="location.href='https://wannago.oopy.io/why/rodlsdugod' " class="collection_item_button"> <img class="img_item" loading="lazy" src="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%2F4b5a1344-97af-45c5-906f-ea5417e9ed9e%2FFrame_514809.png&blockId=a81b3393-52c7-4176-9b92-1ad25514049a" style="width: 100%; height: 100%;"></button> <button type="button" onclick="location.href='https://wannago.oopy.io/qlry' " class="collection_item_button"> <img class="img_item" loading="lazy" src="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%2F8bd29f6b-0031-47f3-82f6-295996517cd3%2FFrame_514810.png&blockId=a1942a01-3904-4890-a7aa-6e4d392352e7" style="width: 100%; height: 100%;"></button> </div> </div> </div>
HTML
복사

2) 1줄 2아이템

3) 1줄 4아이템

<div class="collection_block feb"> <div class="slide"> <!--3월베스트유럽3주(0315-0404) 02-28업뎃--> <div class="collection_card_list"> <button type="button" onclick="location.href='https://wannago.oopy.io/96123ea4-ad98-4966-ad86-456153b641b2' " class="collection_item_bottom"><img class="img_item" loading="lazy" style="width: 100%; height: 100%;" src="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%2Fa6c66cc6-0fb0-44e6-9848-3fe1cff15759%2F031.jpg&blockId=15463518-7ad4-4452-8383-dfd9922e135a"></button> <div class="card_text"><a class="tag1">유럽3주</a> <a class="tag3">마감임박</a><br><b>[21일]베스트유럽21일</b><br>따뜻한 유럽의 봄</div> </div> <!--3월베스트유럽3주(0329-0418) 02-28 업뎃--> <div class="collection_card_list"> <button type="button" onclick="location.href='https://wannago.oopy.io/f9c9dbb7-b58f-4f8a-8641-fccb714b686a' " class="collection_item_bottom"><img class="img_item" loading="lazy" style="width: 100%; height: 100%;" src="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%2F4028b52c-a766-4471-a1b8-12b6b8caa82f%2F032.jpg&blockId=9feb0f2c-051d-4cf9-8394-a7fb4bf2df82"></button> <div class="card_text"><a class="tag1">유럽3주</a> <a class="tag3">마감임박</a><br><b>[21일]베스트유럽21일</b><br>따뜻한 유럽의 봄</div> </div> <!--3월스테이런파9일--> <div class="collection_card_list"> <button type="button" onclick="location.href='https://wannago.oopy.io/868b89ee-4b84-445c-ae4b-fae1cd2c043a' " class="collection_item_bottom"><img class="img_item" loading="lazy" style="width: 100%; height: 100%;" src="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%2F9589439e-aa7b-454e-8270-8795073915de%2F3%25E1%2584%2589%25E1%2585%25B3_%25E1%2584%2585%25E1%2585%25A5%25E1%2586%25AB%25E1%2584%2591%25E1%2585%25A1%25E1%2584%2589%25E1%2585%25A6-min.jpg&blockId=c4f9a46f-228d-4dba-8611-a3da5adb5780"></button> <div class="card_text"><a class="tag1">유럽1주</a> <a class="tag3">마감임박</a><br><b>[9일]런던파리</b><br>가볍게 유럽 일주일</div> </div> <!--몽골사전신청--> <div class="collection_card_list"> <button type="button" onclick="location.href='https://wannago.oopy.io/mongolia' " class="collection_item_bottom"><img class="img_item" loading="lazy" style="width: 100%; height: 100%;" src="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%2Fe743ab07-fb0f-4eac-a835-1044ed82c092%2F%25EC%25A0%259C%25EB%25AA%25A9%25EC%259D%2584_%25EC%259E%2585%25EB%25A0%25A5%25ED%2595%25B4%25EC%25A3%25BC%25EC%2584%25B8%25EC%259A%2594_-037.jpg&blockId=0881ea9c-7b3c-482b-81ee-385d52d91caa"></button> <div class="card_text"><a class="tag1">몽골</a> <a class="tag3">사전신청</a><br><b>[사전신청]몽골</b><br>새로운 여행지로 떠나봐요</div> </div> </div> </div>
HTML
복사
<!-- 이미지 갤러리 --> <style> /*전체*/ .collection_block{ display: flex; } .tag1{ background-color:#ffffff; border: solid #4096FF 1px; color: #4096FF; border-radius: 4px; padding: 2px 8px; } .tag2{ background-color:#ECECEC; color: #5841D7; border-radius: 4px; padding: 2px 8px; } /*마감임박*/ .tag3{ white-space:nowrap; background-color:#FFDED9; color: #FF4F4B; border-radius: 4px; padding: 2px 8px; } .tag4{ background-color:#856EFF; color: #FFD058; border-radius: 4px; padding: 4px 8px; } .tag5{ background-color:#ECECEC; color: #5841D7; border-radius: 4px; padding: 3px 8px; } /*1줄*/ .slide{ display: grid; position: relative; width: 100%; height: 100%; /*한 줄에 노출될 카드의 개수 repeat(노출될 카드 개수,비율(고정)) */ grid-template-columns: repeat(4, 1fr); row-gap: 12px; column-gap: 12px; padding-top: 16px; padding-bottom: 4px; margin: 0 auto; /* 중앙 정렬 */ } .img_item:hover{ filter: brightness(0.8); } /*카드 세로 안적으면 이미지 크기 고정됨*/ .collection_card_list{ width: 100%; height: 100%; display: flex; flex-direction: column; /* 추가: 열 방향으로 정렬 */ align-items: center; /* 추가: 가운데 정렬 */ } /*이미지*/ .collection_item_bottom{ display: block; overflow: hidden; transition: background 100ms ease-out; position: static; width: 100%; background-color: white; border: none; } /*텍스트박스*/ .card_text { width: 100%; padding: 6px; white-space: pre-line; overflow: hidden; text-overflow: ellipsis; font-size:12px; line-height: 20px; heihgt: 50px; font-family: "Gmarket Sans"; } @media screen and (max-width: 800px) { .slide{ /*한 줄에 노출될 카드의 개수 repeat(노출될 카드 개수,비율(고정)) */ grid-template-columns: repeat(3, 1fr); } } @media screen and (max-width: 600px) { .slide{ /*한 줄에 노출될 카드의 개수 repeat(노출될 카드 개수,비율(고정)) */ grid-template-columns: repeat(2, 1fr); } } </style>
HTML
복사

4) 1줄 4아이템

4) 1줄 가로스크롤

<div class="button_gallery_main"> <div class="collection_block_main"> <div class="slide_main"> <!--EU24W1127BLR16EK--><div class="collection_card_list"><div onclick="location.href='https://wannago.oopy.io/29059c2d-2eb4-49ef-9612-190e5fd9822f'" class="collection_item_bottom"><img class="img_item" loading="lazy" src="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%2F9accaab6-aec5-4f33-a0a2-b834647beb7e%2F2%25E1%2584%258C%25E1%2585%25AE(11.27-12.12).jpg&blockId=94160397-657e-4c40-a64d-2a0c5eaedaf8"></div><div class="card_text"><b class="text_name">[16일]베스트유럽 2주</b><br>유럽의 겨울을 가장 먼저 만나보자<div class="tag_box_inner"><a class="tag_1">NEW</a> <a class="tag_3">지원증가</a> </div></div></div> <!--EU24W1108BLB28--><div class="collection_card_list"><div class="lb-wrap"><div class="end_soon"><h1 class="end_soon_txt">마감<br>임박</h1></div><div onclick="location.href='https://wannago.oopy.io/7ee7a966-7bb6-4d84-bb2a-08cce265da41'"class="collection_item_bottom" ><img class="img_item" loading="lazy" src='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%2F9283462b-71dd-4518-a5be-def8334e4017%2F4%25E1%2584%258C%25E1%2585%25AE(11.8-12.5).jpg&blockId=c141902b-8671-4fc2-b3ed-4c5e5b64dab1'></div></div><div class="card_text"><b class="text_name">[28일]베스트유럽 4주</b><br>미리 즐기는 크리스마스 분위기<div class="tag_box_inner"><a class="tag_4">출발확정</a> <a class="tag_5">마감임박</a> </div></div></div> <!--EU24W1121BLR20LH--><div class="collection_card_list"><div class="lb-wrap"><div class="end_soon"><h1 class="end_soon_txt">마감<br>임박</h1></div><div onclick="location.href='https://wannago.oopy.io/058a8ce6-7efe-4927-b792-085cd69c3c2e'" class="collection_item_bottom"><img class="img_item" loading="lazy" src='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%2F3dad7487-9a5c-49d0-a033-d39fb3a4ef9c%2F3%25E1%2584%258C%25E1%2585%25AE(11.21-12.10).jpg&blockId=e7bf6fe0-6ea8-4c04-950d-1423e4db5e3e'></div></div><div class="card_text"><b class="text_name">[20일]베스트유럽 3주</b><br>고민 없이 미리 즐기는 크리스마스 분위기<div class="tag_box_inner"><a class="tag_4">출발확정</a> <a class="tag_5">마감임박</a> </div></div></div> <!--EU24W1222BLR20LH--><div class="collection_card_list"><div onclick="location.href='https://wannago.oopy.io/ad4bad00-4c4a-46fa-b5f6-dc4dbcbd8fe8'" class="collection_item_bottom"><img class="img_item" loading="lazy" src="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%2Fc8c9f799-dbd6-4126-85eb-368bee518fd4%2F3%25E1%2584%258C%25E1%2585%25AE(12.22-1.10.jpg&blockId=3cc1be44-d074-4295-b43b-877bbc36613b"></div><div class="card_text"><b class="text_name">[20일]베스트유럽 3주</b><br>서유럽부터 동유럽까지 유럽 제대로 부수기<div class="tag_box_inner"><a class="tag_4">출발확정</a> <a class="tag_3">지원증가</a> </div></div></div> <!--EU24W1223BLR20LH--><div class="collection_card_list"><div onclick="location.href='https://wannago.oopy.io/162e08eb-050e-4416-9b3b-2f3ab81aa7bd'" class="collection_item_bottom"><img class="img_item" loading="lazy" src="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%2F07061048-f9fe-4748-bb37-71b299c5094c%2F3%25E1%2584%258C%25E1%2585%25AE(12.23-1.11).jpg&blockId=fd8be205-080b-4cfa-bb47-bc1c8e5cd20c"></div><div class="card_text"><b class="text_name">[20일]베스트유럽 3주</b><br>서유럽부터 동유럽까지 유럽 제대로 부수기<div class="tag_box_inner"><a class="tag_1">NEW</a> </div></div></div> <!--EU24W1224BLR15LH--><div class="collection_card_list"><div onclick="location.href='https://wannago.oopy.io/f5cd6f8e-33df-42a8-939b-11d652e9d987'" class="collection_item_bottom"><img class="img_item" loading="lazy" src="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%2F1e2ed713-e12f-42f3-830c-77b21ec96d0c%2F2%25E1%2584%258C%25E1%2585%25AE(12.24-1.7).jpg&blockId=26d0a2aa-89fc-40e4-9a57-50753e6f9b7a"></div><div class="card_text"><b class="text_name">[15일]베스트유럽 2주</b><br>2주 유럽 여행으로 짧고 굷게 그리고 알차게!<div class="tag_box_inner"><a class="tag_4">출발확정</a> <a class="tag_3">지원증가</a> </div></div></div> <!--EU24W1225BLR21EK--><div class="collection_card_list"><div onclick="location.href='https://wannago.oopy.io/4f9f1556-f0ee-46a6-82f5-d489bf2fcf93'" class="collection_item_bottom"><img class="img_item" loading="lazy" src="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%2Fb19dd7e2-e42b-45ac-ae21-3af8e4d2bae3%2F3%25E1%2584%258C%25E1%2585%25AE(12.25-1.14).jpg&blockId=6b82d771-8454-4069-8fc8-7c11eaca70c9"></div><div class="card_text"><b class="text_name">[21일]베스트유럽 3주</b><br>서유럽부터 동유럽까지 유럽 제대로 부수기<div class="tag_box_inner"><a class="tag_1">NEW</a> </div></div></div> <!--EU24W1226BLR21EK--><div class="collection_card_list"><div onclick="location.href='https://wannago.oopy.io/7f1d2841-5f18-4dd2-8922-bf6611bf5fb1'" class="collection_item_bottom"><img class="img_item" loading="lazy" src="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%2Fad3f91df-a2f5-4f19-b464-52196c0d84fb%2F3%25E1%2584%258C%25E1%2585%25AE(12.26-1.15).jpg&blockId=2a37007f-1910-419b-9009-1b8584e7734c"></div><div class="card_text"><b class="text_name">[21일]베스트유럽 3주</b><br>서유럽부터 동유럽까지 유럽 제대로 부수기<div class="tag_box_inner"><a class="tag_1">NEW</a> </div></div></div> <!--EU24W1228BLR15LH--><div class="collection_card_list"><div onclick="location.href='https://wannago.oopy.io/8cedd64e-3d2a-423f-a728-78b22b5fd861'" class="collection_item_bottom"><img class="img_item" loading="lazy" src="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%2F2efe1ddf-8473-4c3d-9578-88205e8a89fe%2F2%25E1%2584%258C%25E1%2585%25AE(12.28-1.11).jpg&blockId=c91c549f-c462-41f5-b175-1f45ecb79df8"></div><div class="card_text"><b class="text_name">[15일]베스트유럽 2주</b><br>2주 유럽 여행으로 짧고 굷게 그리고 알차게!<div class="tag_box_inner"><a class="tag_4">출발확정</a> </div></div></div> <!--EU24W1228BLR21EK--><div class="collection_card_list"><div onclick="location.href='https://wannago.oopy.io/8615ebd4-c80b-421b-9f5d-3a39dcb14792'" class="collection_item_bottom"><img class="img_item" loading="lazy" src="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%2F9dd19812-5b2b-4176-80e0-7110e09710ba%2F3%25E1%2584%258C%25E1%2585%25AE(12.28-1.17).jpg&blockId=3faa30eb-48ba-4980-9b14-5b8741ce9aac"></div><div class="card_text"><b class="text_name">[21일]베스트유럽 3주</b><br>서유럽부터 동유럽까지 유럽 제대로 부수기<div class="tag_box_inner"><a class="tag_4">출발확정</a> </div></div></div> <!--EU24W1229BLB27LH--><div class="collection_card_list"><div onclick="location.href='https://wannago.oopy.io/70288941-948f-4165-b63b-a4c2f05e595d'" class="collection_item_bottom"><img class="img_item" loading="lazy" src="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%2F3474a042-4ff1-4f66-af17-cba847a166f1%2F4%25E1%2584%258C%25E1%2585%25AE(12.29-1.24).jpg&blockId=f1be0a04-bd66-4eb8-b279-aafa9d4f08d9"></div><div class="card_text"><b class="text_name">[28일]베스트유럽 4주</b><br>유럽에서 맞이하는 2025년!<div class="tag_box_inner"><a class="tag_4">출발확정</a> </div></div></div> <!--EU24W1230BLR15LH--><div class="collection_card_list"><div onclick="location.href='https://wannago.oopy.io/73db9c37-5b5a-412d-8026-b3f0f276acd9'" class="collection_item_bottom"><img class="img_item" loading="lazy" src="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%2Fc6982588-4894-4b8d-967b-4ae3d94c906f%2F2%25E1%2584%258C%25E1%2585%25AE(12.30-1.13).jpg&blockId=eba9c3d6-fdfe-47ed-bee0-45c1d11da112"></div><div class="card_text"><b class="text_name">[15일]베스트유럽 2주</b><br>2주 유럽 여행으로 짧고 굷게 그리고 알차게!<div class="tag_box_inner"><a class="tag_1">NEW</a> </div></div></div> </div> </div> </div>
HTML
복사
<script src="https://kit.fontawesome.com/3a115195d8.js" crossorigin="anonymous"></script> <!--이미지 프로그램 버튼--> <style> .collection_block_main{ flex-wrap: nowrap; flex-grow: 1; flex-shrink: 0; z-index: 1; margin-right: 0px; margin-bottom: 0px; } .slide_main{ display: grid; position: relative; /*한 줄에 노출될 카드의 개수 repeat(n,1fr) */ grid-template-columns: repeat(20, 1fr); row-gap: 16px; column-gap: 2px; padding-top: 16px; padding-bottom: 4px; overflow-x: auto; /* 가로 스크롤 가능하도록 설정 */ max-width: 2000%; /* 최대 너비 설정 */ margin: 0 auto; /* 중앙 정렬 */ } .collection_item_bottom{ display: block; overflow: hidden; border: none; background: white; transition: background 100ms ease-out; position: static; /*카드 위젯 크기 height:npx; width: npx; */ height: 240px; width: 180px; flex-shrink: 0; /* 크기 변경 방지 */ margin: 0 8px; /* 간격 설정 */ } .collection_card_list{ width: 100%; height: 100%; display: flex; flex-direction: column; /* 추가: 열 방향으로 정렬 */ align-items: top; /* 추가: 가운데 정렬 */ } /*텍스트박스*/ .card_text { width: 100%; padding: 10px; margin-top: 2px; white-space: pre-line; overflow: hidden; text-overflow: ellipsis; font-size:10px; line-height: 20px; heihgt: auto; font-family: "Gmarket Sans"; } .tag1{ background-color:#856EFF; color: #FFD058; border-radius: 4px; padding: 4px 8px; } .tag2{ background-color:#ECECEC; color: #5841D7; border-radius: 4px; padding: 3px 8px; } /*마감임박*/ .tag3{ white-space:nowrap; border: solid #6247F7 1px; background-color:#ffffff; color: #6247F7; border-radius: 4px; padding: 3px 8px; } /* 마감 */ .end_soon { padding: 0px 13px 0px 13px; border: 2px solid black; border-radius: 100px; position: absolute; top: 84%; left: 80%; transform: translate(-50%, -50%); color: white; background-color:#ED5742; font-size: 7px !important; /* 버튼 텍스트 크기 */ font-weight: bold; /* 버튼 텍스트 굵기 */ text-align: center; /* 텍스트 가운데 정렬 */ z-index: 1; /* 이미지 위에 텍스트 표시 */ line-height: 16px; font-weight: bold; text-align: center; z-index: 1; } </style> <style> .tag_1 { font-family: 'Pretendard', sans-serif; background-color: #FFFBD7; color: #DBAB00; margin: 0 4px 0 0 !important; padding: 5px 11px !important; font-size:10px !important; white-space: nowrap !important; line-height:32px; } .tag_2 { font-family: 'Pretendard', sans-serif; background-color: #EBFFDB; color: #007F05; margin: 0 4px 0 0 !important; padding: 5px 11px !important; font-size:10px !important; white-space: nowrap !important; line-height:32px; } .tag_3 { font-family: 'Pretendard', sans-serif; background-color: #F2E2FF; color: #8F00FF; margin: 0 4px 0 0 !important; padding: 5px 11px !important; font-size:10px !important; white-space: nowrap !important; line-height:32px; } .tag_4 { font-family: 'Pretendard', sans-serif; background-color: #E8EDFF; color: #0038FF; margin: 0 4px 0 0 !important; padding: 5px 11px !important; font-size:10px !important; white-space: nowrap !important; line-height:32px; } .tag_5 { font-family: 'Pretendard', sans-serif; background-color: #FFE5E5; color: #FF0000; margin: 0 4px 0 0 !important; padding: 5px 11px !important; font-size:10px !important; white-space: nowrap !important; line-height:32px; } .tag_6 { font-family: 'Pretendard', sans-serif; background-color: #DFDFDF; color: #4C4C4C; margin: 0 4px 0 0 !important; padding: 5px 11px !important; font-size:10px !important; white-space: nowrap !important; line-height:32px; } .tag_7 { font-family: 'Pretendard', sans-serif; background-color: #E8EDFF; color: #0038FF; margin: 0 4px 0 0 !important; padding: 5px 11px !important; font-size:10px !important; white-space: nowrap !important; line-height:32px; } .tag_8 { font-family: 'Pretendard', sans-serif; background-color: #FFE5E5; color: #FF0000; margin: 0 4px 0 0 !important; padding: 5px 11px !important; font-size:10px !important; white-space: nowrap !important; line-height:32px; } .tag_9 { font-family: 'Pretendard', sans-serif; background-color: #EBFFDB; color: #007F05; margin: 0 4px 0 0 !important; padding: 5px 11px !important; font-size:10px !important; white-space: nowrap !important; line-height:32px; } .tag_10 { font-family: 'Pretendard', sans-serif; background-color: #FFFBD7; color: #DBAB00; margin: 0 4px 0 0 !important; padding: 5px 11px !important; font-size:10px !important; white-space: nowrap !important; line-height:32px; } .tag_11 { font-family: 'Pretendard', sans-serif; background-color: #FFF3DB; color: #FF8A00; margin: 0 4px 0 0 !important; padding: 5px 11px !important; font-size:10px !important; white-space: nowrap !important; line-height:32px; } .tag_12 { font-family: 'Pretendard', sans-serif; background-color: #FFF4EC; color: #FF5C00; margin: 0 4px 0 0 !important; padding: 5px 11px !important; font-size:10px !important; white-space: nowrap !important; line-height:32px; } </style>
HTML
복사

 베스트 프로그램

런던부터 로마까지! 첫 유럽 여행을 위해 핵심 유럽만 쏙쏙 베스트 2주, 3주, 4주 프로그램을 확인해보세요!

스테이위드 프로그램

바쁘고 힘든 여행은 자신없어요..🤦🏻‍♀ 도시마다 더 여유로운 일정으로 유유자적

5) 1줄 2아이템 버튼

6) 1줄 4아이템

7)테스트