<![CDATA[
<div class="figure-html" data-ke-type="html" data-source="<div id="article" class="tx-content-container">
<p style="text-align: left;"></p><div class="figure-html" data-ke-type="html" data-source="<style>
.element { pointer-events: none; touch-action: none;}
</style>
<div class=element><img src=&quot;https://t1.daumcdn.net/cafeattach/1IHuH/d89be4b1a9b07c49e7c454e43ca4798504a16f5b&quot; width=&quot;auto&quot;></div>"><div data-ke-class="article"><style>
.element { pointer-events: none; touch-action: none;}
</style>
<div class="element"><img src="https://t1.daumcdn.net/cafeattach/1IHuH/d89be4b1a9b07c49e7c454e43ca4798504a16f5b" width="auto" data-phocus-index="0"></div></div></div><div class="figure-html" data-ke-type="html" data-source="<marquee behavior=&quot;alternate&quot;> 🍣 산리오 캐릭터를 좋아하는 여시들의 달글 🍣 </marquee>
<style>
* {font-family: 'Cafe24Ssurround'
font-family: 'Cafe24Ssurround', serif;color: #; font-size: 50;}
</style>
"><div data-ke-class="article"><marquee behavior="alternate"> 🍣 산리오 캐릭터를 좋아하는 여시들의 달글 🍣 </marquee>
<style>
* {font-family: 'Cafe24Ssurround'
font-family: 'Cafe24Ssurround', serif;color: #; font-size: 50;}
</style>
</div></div><div class="figure-html" data-ke-type="html" data-source="<style>
</style>
<div class="element"><img src="" width="auto" data-phocus-index="5"></div></div></div><p style="text-align: left;"><br><span style="color: #666666;"><span style="font-family: 'Noto Sans KR';"><br></span></span><span style="color: #666666;"><br></span><br>&nbsp;<br>&nbsp;</p><div class="figure-html" data-ke-type="html" data-source="<style>
div, li { background-color: #f8e6e9;}
div > .bg {
z-index: -3;
}
</style>
<div class="bg"></div></div></div><p style="text-align: left;">&nbsp;</p><div class="figure-html" data-ke-type="html" data-source="<style>
#mArticle>div:nth-child(7){display: none;}
ins div {display: none;}
</style>"><div data-ke-class="article"><style>
#mArticle>div:nth-child(7){display: none;}
ins div {display: none;}
</style></div></div><p style="text-align: left;">&nbsp;</p><div class="figure-html" data-ke-type="html" data-source="<style>
h3{display:none !important;}
.cafeview_info {
display:none;
}
</style>"><div data-ke-class="article"><style>
h3{display:none !important;}
.cafeview_info {
display:none;
}
</style></div></div><p style="text-align: left;">&nbsp;</p><div class="figure-html" data-ke-type="html" data-source="<!DOCTYPE html>
<html>
<head>
<link href=&quot;./style.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;>
<style type=&quot;text/css&quot;>
@font-face {
font-family: 'Cafe24Ssurround';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/Cafe24Ssurround.woff') format('woff');
font-weight: normal;
font-style: normal;
}
p{font-family: 'Cafe24Ssurround';}
p{font-size: 14px;}
br{font-family: 'Cafe24Ssurround';}
br{font-size: 14px;}
body{font-family: 'Cafe24Ssurround';}
body{font-size: 14px;}
table{font-family: 'Cafe24Ssurround';}
table{font-size: 14px;}
td{font-family: 'Cafe24Ssurround';}
td{font-size: 14px;}
input{font-family: 'Cafe24Ssurround';}
input{font-size: 14px;}
form{font-family: 'Cafe24Ssurround';}
form{font-size: 14px;}
textarea{font-family: 'Cafe24Ssurround';}
teexarea{font-size: 14px;}
p,br,body,table,td,input,form,textarea {color:#ffffff; text-shadow:-1px 0 #fdd9f2, 0 1px #fdd9f2,1px 0 #fdd9f2, 0 -1px #fdd9f2,-1px 0px 10px #fdd9f2, 0 1px #fdd9f2,1px 0 #fdd9f2, 0 -1px #fdd9f2;}
</style>
</head>
<body>
</body>
</html>"><div data-ke-class="article">
<xhtml>
<link href="./style.css" rel="stylesheet" type="text/css">
<style type="text/css">
@font-face {
font-family: 'Cafe24Ssurround';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/Cafe24Ssurround.woff') format('woff');
font-weight: normal;
font-style: normal;
}
p{font-family: 'Cafe24Ssurround';}
p{font-size: 14px;}
br{font-family: 'Cafe24Ssurround';}
br{font-size: 14px;}
body{font-family: 'Cafe24Ssurround';}
body{font-size: 14px;}
table{font-family: 'Cafe24Ssurround';}
table{font-size: 14px;}
td{font-family: 'Cafe24Ssurround';}
td{font-size: 14px;}
input{font-family: 'Cafe24Ssurround';}
input{font-size: 14px;}
form{font-family: 'Cafe24Ssurround';}
form{font-size: 14px;}
textarea{font-family: 'Cafe24Ssurround';}
teexarea{font-size: 14px;}
p,br,body,table,td,input,form,textarea {color:#ffffff; text-shadow:-1px 0 #eb9977, 0 1px #eb9977,1px 0 #eb9977, 0 -1px #eb9977,-1px 0px 10px #eb9977, 0 1px #eb9977,1px 0 #eb9977, 0 -1px #eb9977;}
</style>
<xbody>
</xbody>
</xhtml></div></div><div class="figure-html" data-ke-type="html" data-source="<style>
nav {position: fixed; left:0; width:100%;display:grid;
grid-template-columns:repeat(3,1fr);background:;color:#000000;}
nav:first-of-type {top:0;height:30px;align-items:center;}
nav:last-of-type {top:30px;height:0;overflow:hidden;transition:.5s;}
nav > div > a {text-decoration: none !important; color: lavender !important;}
nav:first-of-type:hover ~ nav {height:130px;background:#fdf5ea;}
</style>
<nav>
<p>🍣산리오🍣</p>
<p>🍥클릭🍥</p>
<p>🍙부속달글🍙</p>
</nav>
<nav>
<div>
<a href=&quot;https://www.sanrio.co.jp/&quot;><p>💕산리오공홈💕</p></a>
<a href=&quot;https://shop.sanrio.co.jp/&quot;><p>🍳산리오상점🍳</p></a>
<a href=&quot;https://www.rakuten.ne.jp/gold/sanrio/&quot;><p>🔪라쿠텐📦</p></a>
</div>
<div>
<a href=&quot;https://m.cafe.daum.net/subdued20club/VrjL/708750?svc=cafeapp&quot;><p>🎀국샵리스트🎀</p></a>
<a href=&quot;https://m.cafe.daum.net/subdued20club/VrjL/711250?svc=cafeapp&quot;><p>🆕️신상카탈로그🆕️</p></a>
<a href=&quot;https://m.cafe.daum.net/subdued20club/VrjL/703882?svc=cafeapp&quot;><p>❄️이전차수모음❄️</p></a>
<a href=&quot;https://m.cafe.daum.net/subdued20club/VrjL/705352?svc=cafeapp&quot;><p>⚡️번장공지예시⚡️</p></a>
</div>
<div>
<a href=&quot;https://m.cafe.daum.net/subdued20club/VrjL/645552?svc=cafeapp&quot;><p>💰거래달글💰</p></a>
<a href=&quot;https://m.cafe.daum.net/subdued20club/VrjL/700462?svc=cafeapp&quot;><p>🎵달웃달글🎵</p></a>
<a href=&quot;https://m.cafe.daum.net/subdued20club/VrjL/666130?svc=cafeapp&quot;><p>🥄신입가이드🥄</p></a>
<a href=&quot;https://m.cafe.daum.net/subdued20club/VrjL/660852?svc=cafeapp&quot;><p>📮건의달글📮</p></a>
</div>
</nav>"><div data-ke-class="article"><style>
nav {position: fixed; left:0; width:100%;display:grid;
grid-template-columns:repeat(3,1fr);background:;color:#000000;}
nav:first-of-type {top:0;height:30px;align-items:center;}
nav:last-of-type {top:30px;height:0;overflow:hidden;transition:.5s;}
nav > div > a {text-decoration: none !important; color: lavender !important;}
nav:first-of-type:hover ~ nav {height:130px;background:#fdf5ea;}
</style>
<nav>
<p>🍙부속달글🍙</p>
</nav>
<nav>
<div>
<a href="https://m.cafe.daum.net/subdued20club/VrjL/645552?svc=cafeapp"><p>💰거래달글💰</p></a>
<a href="https://m.cafe.daum.net/subdued20club/VrjL/700462?svc=cafeapp"><p>🎵달웃달글🎵</p></a>
<a href="https://m.cafe.daum.net/subdued20club/VrjL/666130?svc=cafeapp"><p>🥄신입가이드🥄</p></a>
<a href="https://m.cafe.daum.net/subdued20club/VrjL/660852?svc=cafeapp"><p>📮건의달글📮</p></a>
</div>
</nav></div></div><p style="text-align: left;">&nbsp;</p><div class="figure-html" data-ke-type="html" data-source="<style>
div >.dung {
position: fixed;
z-index: 99;
width: 130px;
height: 130px;
background: url('https://t1.daumcdn.net/cafeattach/1IHuH/af243d27a7854629b8225a3d4df5662f374f32a4') no-repeat center / contain;
animation: dung 20s infinite linear;
}
@keyframes dung {
0% {top:0; left:100%;}
25% {top:25%; left:0;}
50% {top:50%; left:85%;}
75% {top:75%; left:0;}
100% {top:100%; left:100%;}
}
</style>
<p class=&quot;dung&quot;></p>"><div data-ke-class="article"><style>
div >.dung {
position: fixed;
z-index: 99;
width: 130px;
height: 130px;
background: url('https://t1.daumcdn.net/cafeattach/1IHuH/af243d27a7854629b8225a3d4df5662f374f32a4') no-repeat center / contain;
animation: dung 20s infinite linear;
}
@keyframes dung {
0% {top:0; left:100%;}
25% {top:25%; left:0;}
50% {top:50%; left:85%;}
75% {top:75%; left:0;}
100% {top:100%; left:100%;}
}
</style>
<p class="dung"></p></div></div><p style="text-align: left;">&nbsp;<br><br>&nbsp;서치용: 헬로키티 마이멜로디 쿠로미 시나모롤 폼폼푸린 포차코 리틀트윈스타 턱시도샘 위시미멜 마론크림 케로케로케로피 코기뮹 한교동 구데타마 우사하나 배드바츠마루 키리미 오사루노몽키치 초코캣&nbsp;어그레츠코 퓨로랜드 꿈꾸는 엔젤</p>
<script>
(function () {
var sumOfWidth = 100;
var gridImages = Array.prototype.slice.call(document.querySelectorAll('[data-ke-type="imageGrid"] .image-container span'));
gridImages.reverse().forEach(function (img) { // 행이 넘어가는지 명확하게 확인하기 위해 역순으로 순회
var width = Number(img.style.width.replace('%', ''));
sumOfWidth += width;
img.style.flexGrow = width;
img.style.minWidth = 'calc(' + img.style.width + ' - 1.2% - 1px)';
var isRightmost = Math.floor(sumOfWidth) > 100; // width 합이 100이 초과하면 다음 행으로 넘어감
if (isRightmost) {
sumOfWidth = width;
img.classList.add('rightmost');
}
});
})();
</script>
</div>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Jua&family=Noto+Sans+KR:wght@100..900&display=swap" rel="stylesheet">
<style>
.jua-regular {
font-family: "Jua", sans-serif;
font-weight: 400;
font-style: normal;
}
</style>
<style>
* {margin: 0; padding: 0; box-sizing: border-box; list-style: none; text-decoration: none; color: inherit;}
input {display: none;}
.openBtn {border: 0; background: unset;}
.openBtn label {display:block;width: 30px;height: 30px;background: url('https://t1.daumcdn.net/cafeattach/1XKJt/5d270afc6f658bc6d65fccb5b306bce39a7e8b48') no-repeat center / cover; margin: 8px 12px;}
.content {display:none;position: fixed;top:50%;left: 50%;transform: translate(-50%, -50%);z-index:99999;width:80%;height:80vw;max-width: 500px; max-height: 500px;border:1px solid rgba(0, 0, 0, .3);background: #fff;border-radius: 5px;overflow: hidden;}
.content .btns-row {position: absolute;top:0;left: 0;width: 100%;display:flex;justify-content: space-between;background:rgb(192, 212, 230);}
.content .btns-row > div {display: flex;}
.content .btns-row .left-btn {margin-top: 10px;}
.content .btns-row .left-btn label {padding:2.5px 10px;border-radius: 10px 10px 0 0;background: rgb(103, 126, 151);margin-right: 0;color: #fff;}
.content .btns-row .right-btn {margin-top: 5px;}
.content .btns-row .right-btn label {margin: 0 8px;color:rgba(0, 0, 0, .3);}
.content .btns-row .right-btn label[for="min"] {display:none;}
.content .btns-row .right-btn label:hover {color: #000;}
.content .tab-item {display: none;height:100%;overflow-y: scroll;margin-top: 32px;padding-bottom:32px;}
.content .tab-item::-webkit-scrollbar {display: none;}
.content .tabCon1 > p {padding:5px 10px;text-align: left;}
.content .tabCon2 img {margin: 0 !important;}
.bars {display:none;position:fixed; bottom: 0; left: 0; z-index:9999;width: 100%;height: 45px; background: rgba(255,255,255,.75);backdrop-filter: blur(10px);box-shadow: 0 -2px 3px rgba(0, 0, 0, .3);}
.bars .bar-open {position:absolute;top:5px;left: 5px;width:35px;height: 35px;background-image:url('https://t1.daumcdn.net/cafeattach/1XKJt/5d270afc6f658bc6d65fccb5b306bce39a7e8b48');background-position:center;background-repeat: no-repeat;background-size: 25px;background-color: rgba(255,255,255,.3);border-radius: 3px;box-shadow: 0 0 2px rgba(0, 0, 0, .1);}
.bars .bar-open::after {content:'';position: absolute;bottom: 0;left: 50%;transform:translateX(-50%);width: 15px;height:3px;background:rgb(77, 77, 77);border-radius: 5px;transition: width .2s;}
#open:checked ~ .content {display: block;}
#open:checked ~ .bars {display: block;}
#open:checked ~ .bars .bar-open {animation: up .3s alternate ease-in;}
#down:checked ~ .openBtn {pointer-events: none;}
#down:checked ~ .bars {display: block;}
#down:checked ~ .bars .bar-open {background-color: unset;box-shadow: unset;animation: down .3s alternate ease-in;}
#down:checked ~ .bars .bar-open::after {width: 10px;background: #888;}
#max:checked ~ .content {top:0;transform: translate(-50%, 0);width:100%; height:100%;max-width: 100%;max-height: calc(100% - 45px);border-radius: unset;}
#max:checked ~ .content .btns-row label[for="min"] {display: inline;}
#max:checked ~ .content .btns-row label[for="max"] {display: none;}
#tabBtn1:checked ~ div label[for="tabBtn1"] {background:#fff;color: #000;}
#tabBtn1:checked ~ .tabCon1 {display:block;}
#tabBtn2:checked ~ div label[for="tabBtn2"] {background:#fff;color:#000;}
#tabBtn2:checked ~ .tabCon2 {display:block;}
@keyframes down {
0% {background-position: center -2px;}
50% {background-position: center 8px;}
}
@keyframes up {
50% {background-position: center -2px;}
}
</style>
[ html 코드 ]
<input type="radio" name="btns" id="open">
<input type="radio" name="btns" id="down">
<input type="radio" name="btns" id="close">
<input type="radio" name="sizeBtns" id="min">
<input type="radio" name="sizeBtns" id="max">
<button type="button" class="openBtn"><label for="open"></label></button>
<div class="content">
<input type="radio" name="tab" id="tabBtn1" checked>
<input type="radio" name="tab" id="tabBtn2">
<div class="btns-row">
<div class="left-btn">
<label for="tabBtn1">공지</label>
<label for="tabBtn2">이미지</label>
</div><!--left-btn-->
<div class="right-btn">
<label for="down">-</label>
<label for="max">ㅁ</label>
<label for="min">=</label>
<label for="close">x</label>
</div><!--right-btn-->
</div><!--btns-row-->
<div class="tabCon1 tab-item">
<p>
1. 목적<p>
디자인 계열(관련) 디지털로 먹고사는 현직 여시들 + 꿈꾸는 여시들 달글입니다. 또는 위의 키워드에 관심있는 여시들의 경우 추천드려요. 궁극적으로 이 달글의 운영 목적은 하고 싶은 디자인을 하면서 목표 수익을 달성하고, 비슷한 관심사를 가진 여시들과 일상을 나누며 편하게 소통할 수 있는 공간이에요. 열정적인 여시 환영! 관련직 또는 관심있는 여시들이라면 누구나 참여할 수 있으며 서로의 존재로 하여금 힘을 얻고 수다떠는 소통 달글입니다. 일반적으로 포털에 서치 시 쉽게 답이 나오는 핑거 프린세스 행동은 금지하나, 답변 가능 시 둥글게 답변해주세요. 디자인 계열의 폭이 넓은 만큼 다양한 여시들의 의견을 존중해주세요. 기타 필요한 규칙은 달글 운영 시 필요에따라 그때그때 공지에 업데이트할 예정입니다.
2. 입문하기<p>
아래의 키워드(추가될 수 있음)에 10개 이상 흥미를 느끼는 여시라면 참여하세요!
디지털 크리에이터, 그림, 일러스트 작가, 웹툰 작가, 사진, 영상, 모션, 디자인, 폰트, 일러스트, 굿즈, 판매, 스토어, 사진, 영상편집, 상세페이지, PPT, 로고, 캐릭터, 2D, 3D, 모델링, 모션그래픽, 도트, 웹툰, 포토샵, 블렌더, C4D, 버츄얼, 게임, 블로그, 애프터이펙트, AI, Chat gpt, 어도비, 포트폴리오, 폰트, 브러쉬, 컨텐츠, 피그마, 템플릿, 타이포그라피, 아이콘, 전자책, 포스터, 공모전, SNS, 유튜브, 카드뉴스, 배너, 앨범커버, 웹, UIUX, 앱개발, 프론트엔드, 웹퍼블리싱, 노코드, 템플릿, IT, N잡, 자동화, 브랜딩, 마케팅, 디지털 노마드, 프리랜서, 파이어족, 경제적 자유, 부업, 부수익, 데스크테리어, 데스크셋업, 꾸미기, 만들기
3. 가능한<p>
사담 가능, 정보 공유 가능, 토론 가능, 업무 관련 진상 저격 가능.
4. 금지<p>
자표, 홍보, 저격, 조롱, 분란조장 금지
유명인 언급 가능하나 까댓 금지
쿠션어 필수는 아니지만 싸움을 유발하는 댓글 금지
공지를 어기거나 어그로 발견 시 먹금 댓글 후 대댓 금지 해주세요.
5. 디(자인) 디(지털) 소(통) ㄷㄷㅅ 띳시<p>
6. 인사하고 가기<p>
</p>
</div><!--tabCon1-->
<div class="tabCon2 tab-item">
<img src="https://t1.daumcdn.net/cafeattach/1XKJt/ab2a32b99ce9e1a1691b4e720002cfb37a24b180">
<img src="https://t1.daumcdn.net/cafeattach/1XKJt/ab2a32b99ce9e1a1691b4e720002cfb37a24b180">
<img src="https://t1.daumcdn.net/cafeattach/1XKJt/ab2a32b99ce9e1a1691b4e720002cfb37a24b180">
<img src="https://t1.daumcdn.net/cafeattach/1XKJt/ab2a32b99ce9e1a1691b4e720002cfb37a24b180">
</div><!--tabCon2-->
</div><!--content-->
<div class="bars">
<label for="open" class="bar-open"></label>
</div><!--bar-->
<style>
.mp3 {width: 200px;border-radius: 20px;background: #fbf2f5;margin: 0 auto;box-shadow: -5px -5px 10px #fffafc, 5px 5px 10px rgba(249, 246, 247, .23);}
.mp3 .video-wrap {box-sizing: border-box;padding: 20px;}
.mp3 .video-wrap iframe {width: 100%;border-radius: 10px;}
.mp3 .ui-wrap {display: flex; justify-content: center;align-items: center;}
.mp3 .ui-wrap > div {position:relative;width: 120px;height: 120px;border-radius: 100%;margin-bottom:20px;background: #fff;box-shadow: inset -5px -5px 10px #fffafc, inset 5px 5px 10px rgba(22, 27, 29, .13);}
.mp3 .ui-wrap > div::after {content: '';position: absolute;top: 50%; left: 50%; transform: translate(-50%, -50%);width: 50%;height:50%;border-radius: 100%;background: #fbf2f5;box-shadow: -5px -5px 10px #fffafc, 5px 5px 10px rgba(22, 27, 29, .13);}
.mp3 .ui-wrap span {position: absolute;font-size: 10px;}
.mp3 .ui-wrap .btn1 {top: 15px; left: 50%;transform: translate(-50%, -7.5px);}
.mp3 .ui-wrap .btn2 {top: 50%; left: 0;transform: translate(5px, -50%);}
.mp3 .ui-wrap .btn3 {top: 50%; right: 0;transform: translate(-5px, -50%);}
.mp3 .ui-wrap .btn4 {bottom: 15px; left: 50%;transform: translate(-50%, 5px);}
</style>
<div class="mp3">
<div class="video-wrap">
<iframe width="200" height="90" src="https://www.youtube.com/embed/ruw7Lb2S5I4?si=XGrgUM99OAY2rS9c" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div><!--video-wrap-->
<div class="ui-wrap">
<div>
<span class="btn1">MENU</span>
<span class="btn2"> < </span>
<span class="btn3"> > </span>
<span class="btn4">PLAY</span>
</div>
</div><!--ui-wrap-->
</div><!--mp3-->
<style>
body {
background: #fbf2f5; /* 배경색*/
}
h3 { /* 제목 스타일 */
font-size: 15px !important; /* 폰트 크기 */
color: #bd2d45; /* 폰트 색상 */
text-align: center;/* 텍스트 정렬 방향 left, center, right 중 적기*/
margin: 20px; /* 제목 높이: 상단바가 가리면 높이 조절하기 */
}
.kakao_ad_area {
display: none !important;
}
/* 폰트 css 소스 붙여넣기 */
div, span, p, td { /* 본문 글씨 스타일 */
font-family: 'Jua' !important; /* 폰트css 소스에 적힌 폰트 이름 붙여넣기 */
color: #161616; /* 폰트 색 */
}
</style>
"><div data-ke-class="article"><div id="article" class="tx-content-container">
<p style="text-align: left;"></p><div class="figure-html" data-ke-type="html" data-source="<style>
.element { pointer-events: none; touch-action: none;}
</style>
<div class=element><img src="https://t1.daumcdn.net/cafeattach/1IHuH/d89be4b1a9b07c49e7c454e43ca4798504a16f5b" width="auto"></div>"><div data-ke-class="article"><style>
.element { pointer-events: none; touch-action: none;}
</style>
<div class="element"><img src="https://t1.daumcdn.net/cafeattach/1IHuH/d89be4b1a9b07c49e7c454e43ca4798504a16f5b" width="auto" data-phocus-index="0"></div></div></div><div class="figure-html" data-ke-type="html" data-source="<marquee behavior="alternate"> 🍣 산리오 캐릭터를 좋아하는 여시들의 달글 🍣 </marquee>
<style>
* {font-family: 'Cafe24Ssurround'
font-family: 'Cafe24Ssurround', serif;color: #; font-size: 50;}
</style>
"><div data-ke-class="article"><marquee behavior="alternate"> 🍣 산리오 캐릭터를 좋아하는 여시들의 달글 🍣 </marquee>
<style>
* {font-family: 'Cafe24Ssurround'
font-family: 'Cafe24Ssurround', serif;color: #; font-size: 50;}
</style>
</div></div><div class="figure-html" data-ke-type="html" data-source="<style>
</style>
<div class="element"><img src="" width="auto" data-phocus-index="5"></div></div></div><p style="text-align: left;"><br><span style="color: #666666;"><span style="font-family: 'Noto Sans KR';"><br></span></span><span style="color: #666666;"><br></span><br> <br> </p><div class="figure-html" data-ke-type="html" data-source="<style>
div, li { background-color: #f8e6e9;}
div > .bg {
z-index: -3;
}
</style>
<div class="bg"></div></div></div><p style="text-align: left;"> </p><div class="figure-html" data-ke-type="html" data-source="<style>
#mArticle>div:nth-child(7){display: none;}
ins div {display: none;}
</style>"><div data-ke-class="article"><style>
#mArticle>div:nth-child(7){display: none;}
ins div {display: none;}
</style></div></div><p style="text-align: left;"> </p><div class="figure-html" data-ke-type="html" data-source="<style>
h3{display:none !important;}
.cafeview_info {
display:none;
}
</style>"><div data-ke-class="article"><style>
h3{display:none !important;}
.cafeview_info {
display:none;
}
</style></div></div><p style="text-align: left;"> </p><div class="figure-html" data-ke-type="html" data-source="<!DOCTYPE html>
<xhtml>
<head>
<link href="./style.css" rel="stylesheet" type="text/css">
<style type="text/css">
@font-face {
font-family: 'Cafe24Ssurround';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/Cafe24Ssurround.woff') format('woff');
font-weight: normal;
font-style: normal;
}
p{font-family: 'Cafe24Ssurround';}
p{font-size: 14px;}
br{font-family: 'Cafe24Ssurround';}
br{font-size: 14px;}
body{font-family: 'Cafe24Ssurround';}
body{font-size: 14px;}
table{font-family: 'Cafe24Ssurround';}
table{font-size: 14px;}
td{font-family: 'Cafe24Ssurround';}
td{font-size: 14px;}
input{font-family: 'Cafe24Ssurround';}
input{font-size: 14px;}
form{font-family: 'Cafe24Ssurround';}
form{font-size: 14px;}
textarea{font-family: 'Cafe24Ssurround';}
teexarea{font-size: 14px;}
p,br,body,table,td,input,form,textarea {color:#ffffff; text-shadow:-1px 0 #fdd9f2, 0 1px #fdd9f2,1px 0 #fdd9f2, 0 -1px #fdd9f2,-1px 0px 10px #fdd9f2, 0 1px #fdd9f2,1px 0 #fdd9f2, 0 -1px #fdd9f2;}
</style>
</head>
<xbody>
</xbody>
</xhtml>"><div data-ke-class="article">
<xhtml>
<link href="./style.css" rel="stylesheet" type="text/css">
<style type="text/css">
@font-face {
font-family: 'Cafe24Ssurround';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/Cafe24Ssurround.woff') format('woff');
font-weight: normal;
font-style: normal;
}
p{font-family: 'Cafe24Ssurround';}
p{font-size: 14px;}
br{font-family: 'Cafe24Ssurround';}
br{font-size: 14px;}
body{font-family: 'Cafe24Ssurround';}
body{font-size: 14px;}
table{font-family: 'Cafe24Ssurround';}
table{font-size: 14px;}
td{font-family: 'Cafe24Ssurround';}
td{font-size: 14px;}
input{font-family: 'Cafe24Ssurround';}
input{font-size: 14px;}
form{font-family: 'Cafe24Ssurround';}
form{font-size: 14px;}
textarea{font-family: 'Cafe24Ssurround';}
teexarea{font-size: 14px;}
p,br,body,table,td,input,form,textarea {color:#ffffff; text-shadow:-1px 0 #eb9977, 0 1px #eb9977,1px 0 #eb9977, 0 -1px #eb9977,-1px 0px 10px #eb9977, 0 1px #eb9977,1px 0 #eb9977, 0 -1px #eb9977;}
</style>
<xbody>
</xbody>
</xhtml></div></div><div class="figure-html" data-ke-type="html" data-source="<style>
nav {position: fixed; left:0; width:100%;display:grid;
grid-template-columns:repeat(3,1fr);background:;color:#000000;}
nav:first-of-type {top:0;height:30px;align-items:center;}
nav:last-of-type {top:30px;height:0;overflow:hidden;transition:.5s;}
nav > div > a {text-decoration: none !important; color: lavender !important;}
nav:first-of-type:hover ~ nav {height:130px;background:#fdf5ea;}
</style>
<nav>
<p>🍣산리오🍣</p>
<p>🍥클릭🍥</p>
<p>🍙부속달글🍙</p>
</nav>
<nav>
<div>
<a href="https://www.sanrio.co.jp/"><p>💕산리오공홈💕</p></a>
<a href="https://shop.sanrio.co.jp/"><p>🍳산리오상점🍳</p></a>
<a href="https://www.rakuten.ne.jp/gold/sanrio/"><p>🔪라쿠텐📦</p></a>
</div>
<div>
<a href="https://m.cafe.daum.net/subdued20club/VrjL/708750?svc=cafeapp"><p>🎀국샵리스트🎀</p></a>
<a href="https://m.cafe.daum.net/subdued20club/VrjL/711250?svc=cafeapp"><p>🆕️신상카탈로그🆕️</p></a>
<a href="https://m.cafe.daum.net/subdued20club/VrjL/703882?svc=cafeapp"><p>❄️이전차수모음❄️</p></a>
<a href="https://m.cafe.daum.net/subdued20club/VrjL/705352?svc=cafeapp"><p>⚡️번장공지예시⚡️</p></a>
</div>
<div>
<a href="https://m.cafe.daum.net/subdued20club/VrjL/645552?svc=cafeapp"><p>💰거래달글💰</p></a>
<a href="https://m.cafe.daum.net/subdued20club/VrjL/700462?svc=cafeapp"><p>🎵달웃달글🎵</p></a>
<a href="https://m.cafe.daum.net/subdued20club/VrjL/666130?svc=cafeapp"><p>🥄신입가이드🥄</p></a>
<a href="https://m.cafe.daum.net/subdued20club/VrjL/660852?svc=cafeapp"><p>📮건의달글📮</p></a>
</div>
</nav>"><div data-ke-class="article"><style>
nav {position: fixed; left:0; width:100%;display:grid;
grid-template-columns:repeat(3,1fr);background:;color:#000000;}
nav:first-of-type {top:0;height:30px;align-items:center;}
nav:last-of-type {top:30px;height:0;overflow:hidden;transition:.5s;}
nav > div > a {text-decoration: none !important; color: lavender !important;}
nav:first-of-type:hover ~ nav {height:130px;background:#fdf5ea;}
</style>
<nav>
<p>🍙부속달글🍙</p>
</nav>
<nav>
<div>
<a href="https://m.cafe.daum.net/subdued20club/VrjL/645552?svc=cafeapp"><p>💰거래달글💰</p></a>
<a href="https://m.cafe.daum.net/subdued20club/VrjL/700462?svc=cafeapp"><p>🎵달웃달글🎵</p></a>
<a href="https://m.cafe.daum.net/subdued20club/VrjL/666130?svc=cafeapp"><p>🥄신입가이드🥄</p></a>
<a href="https://m.cafe.daum.net/subdued20club/VrjL/660852?svc=cafeapp"><p>📮건의달글📮</p></a>
</div>
</nav></div></div><p style="text-align: left;"> </p><div class="figure-html" data-ke-type="html" data-source="<style>
div >.dung {
position: fixed;
z-index: 99;
width: 130px;
height: 130px;
background: url('https://t1.daumcdn.net/cafeattach/1IHuH/af243d27a7854629b8225a3d4df5662f374f32a4') no-repeat center / contain;
animation: dung 20s infinite linear;
}
@keyframes dung {
0% {top:0; left:100%;}
25% {top:25%; left:0;}
50% {top:50%; left:85%;}
75% {top:75%; left:0;}
100% {top:100%; left:100%;}
}
</style>
<p class="dung"></p>"><div data-ke-class="article"><style>
div >.dung {
position: fixed;
z-index: 99;
width: 130px;
height: 130px;
background: url('https://t1.daumcdn.net/cafeattach/1IHuH/af243d27a7854629b8225a3d4df5662f374f32a4') no-repeat center / contain;
animation: dung 20s infinite linear;
}
@keyframes dung {
0% {top:0; left:100%;}
25% {top:25%; left:0;}
50% {top:50%; left:85%;}
75% {top:75%; left:0;}
100% {top:100%; left:100%;}
}
</style>
<p class="dung"></p></div></div><p style="text-align: left;"> <br><br> 서치용: 헬로키티 마이멜로디 쿠로미 시나모롤 폼폼푸린 포차코 리틀트윈스타 턱시도샘 위시미멜 마론크림 케로케로케로피 코기뮹 한교동 구데타마 우사하나 배드바츠마루 키리미 오사루노몽키치 초코캣 어그레츠코 퓨로랜드 꿈꾸는 엔젤</p>
<xscript>
(function () {
var sumOfWidth = 100;
var gridImages = Array.prototype.slice.call(document.querySelectorAll('[data-ke-type="imageGrid"] .image-container span'));
gridImages.reverse().forEach(function (img) { // 행이 넘어가는지 명확하게 확인하기 위해 역순으로 순회
var width = Number(img.style.width.replace('%', ''));
sumOfWidth += width;
img.style.flexGrow = width;
img.style.minWidth = 'calc(' + img.style.width + ' - 1.2% - 1px)';
var isRightmost = Math.floor(sumOfWidth) > 100; // width 합이 100이 초과하면 다음 행으로 넘어감
if (isRightmost) {
sumOfWidth = width;
img.classList.add('rightmost');
}
});
})();
</xscript>
</div>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Jua&family=Noto+Sans+KR:wght@100..900&display=swap" rel="stylesheet">
<style>
.jua-regular {
font-family: "Jua", sans-serif;
font-weight: 400;
font-style: normal;
}
</style>
<style>
* {margin: 0; padding: 0; box-sizing: border-box; list-style: none; text-decoration: none; color: inherit;}
input {display: none;}
.openBtn {border: 0; background: unset;}
.openBtn label {display:block;width: 30px;height: 30px;background: url('https://t1.daumcdn.net/cafeattach/1XKJt/5d270afc6f658bc6d65fccb5b306bce39a7e8b48') no-repeat center / cover; margin: 8px 12px;}
.content {display:none;position: fixed;top:50%;left: 50%;transform: translate(-50%, -50%);z-index:99999;width:80%;height:80vw;max-width: 500px; max-height: 500px;border:1px solid rgba(0, 0, 0, .3);background: #fff;border-radius: 5px;overflow: hidden;}
.content .btns-row {position: absolute;top:0;left: 0;width: 100%;display:flex;justify-content: space-between;background:rgb(192, 212, 230);}
.content .btns-row > div {display: flex;}
.content .btns-row .left-btn {margin-top: 10px;}
.content .btns-row .left-btn label {padding:2.5px 10px;border-radius: 10px 10px 0 0;background: rgb(103, 126, 151);margin-right: 0;color: #fff;}
.content .btns-row .right-btn {margin-top: 5px;}
.content .btns-row .right-btn label {margin: 0 8px;color:rgba(0, 0, 0, .3);}
.content .btns-row .right-btn label[for="min"] {display:none;}
.content .btns-row .right-btn label:hover {color: #000;}
.content .tab-item {display: none;height:100%;overflow-y: scroll;margin-top: 32px;padding-bottom:32px;}
.content .tab-item::-webkit-scrollbar {display: none;}
.content .tabCon1 > p {padding:5px 10px;text-align: left;}
.content .tabCon2 img {margin: 0 !important;}
.bars {display:none;position:fixed; bottom: 0; left: 0; z-index:9999;width: 100%;height: 45px; background: rgba(255,255,255,.75);backdrop-filter: blur(10px);box-shadow: 0 -2px 3px rgba(0, 0, 0, .3);}
.bars .bar-open {position:absolute;top:5px;left: 5px;width:35px;height: 35px;background-image:url('https://t1.daumcdn.net/cafeattach/1XKJt/5d270afc6f658bc6d65fccb5b306bce39a7e8b48');background-position:center;background-repeat: no-repeat;background-size: 25px;background-color: rgba(255,255,255,.3);border-radius: 3px;box-shadow: 0 0 2px rgba(0, 0, 0, .1);}
.bars .bar-open::after {content:'';position: absolute;bottom: 0;left: 50%;transform:translateX(-50%);width: 15px;height:3px;background:rgb(77, 77, 77);border-radius: 5px;transition: width .2s;}
#open:checked ~ .content {display: block;}
#open:checked ~ .bars {display: block;}
#open:checked ~ .bars .bar-open {animation: up .3s alternate ease-in;}
#down:checked ~ .openBtn {pointer-events: none;}
#down:checked ~ .bars {display: block;}
#down:checked ~ .bars .bar-open {background-color: unset;box-shadow: unset;animation: down .3s alternate ease-in;}
#down:checked ~ .bars .bar-open::after {width: 10px;background: #888;}
#max:checked ~ .content {top:0;transform: translate(-50%, 0);width:100%; height:100%;max-width: 100%;max-height: calc(100% - 45px);border-radius: unset;}
#max:checked ~ .content .btns-row label[for="min"] {display: inline;}
#max:checked ~ .content .btns-row label[for="max"] {display: none;}
#tabBtn1:checked ~ div label[for="tabBtn1"] {background:#fff;color: #000;}
#tabBtn1:checked ~ .tabCon1 {display:block;}
#tabBtn2:checked ~ div label[for="tabBtn2"] {background:#fff;color:#000;}
#tabBtn2:checked ~ .tabCon2 {display:block;}
@keyframes down {
0% {background-position: center -2px;}
50% {background-position: center 8px;}
}
@keyframes up {
50% {background-position: center -2px;}
}
</style>
[ html 코드 ]
<input type="radio" name="btns" id="open">
<input type="radio" name="btns" id="down">
<input type="radio" name="btns" id="close">
<input type="radio" name="sizeBtns" id="min">
<input type="radio" name="sizeBtns" id="max">
<button type="button" class="openBtn"><label for="open"></label></button>
<div class="content">
<input type="radio" name="tab" id="tabBtn1" checked>
<input type="radio" name="tab" id="tabBtn2">
<div class="btns-row">
<div class="left-btn">
<label for="tabBtn1">공지</label>
<label for="tabBtn2">이미지</label>
</div><!--left-btn-->
<div class="right-btn">
<label for="down">-</label>
<label for="max">ㅁ</label>
<label for="min">=</label>
<label for="close">x</label>
</div><!--right-btn-->
</div><!--btns-row-->
<div class="tabCon1 tab-item">
<p>
1. 목적<p>
디자인 계열(관련) 디지털로 먹고사는 현직 여시들 + 꿈꾸는 여시들 달글입니다. 또는 위의 키워드에 관심있는 여시들의 경우 추천드려요. 궁극적으로 이 달글의 운영 목적은 하고 싶은 디자인을 하면서 목표 수익을 달성하고, 비슷한 관심사를 가진 여시들과 일상을 나누며 편하게 소통할 수 있는 공간이에요. 열정적인 여시 환영! 관련직 또는 관심있는 여시들이라면 누구나 참여할 수 있으며 서로의 존재로 하여금 힘을 얻고 수다떠는 소통 달글입니다. 일반적으로 포털에 서치 시 쉽게 답이 나오는 핑거 프린세스 행동은 금지하나, 답변 가능 시 둥글게 답변해주세요. 디자인 계열의 폭이 넓은 만큼 다양한 여시들의 의견을 존중해주세요. 기타 필요한 규칙은 달글 운영 시 필요에따라 그때그때 공지에 업데이트할 예정입니다.
2. 입문하기<p>
아래의 키워드(추가될 수 있음)에 10개 이상 흥미를 느끼는 여시라면 참여하세요!
디지털 크리에이터, 그림, 일러스트 작가, 웹툰 작가, 사진, 영상, 모션, 디자인, 폰트, 일러스트, 굿즈, 판매, 스토어, 사진, 영상편집, 상세페이지, PPT, 로고, 캐릭터, 2D, 3D, 모델링, 모션그래픽, 도트, 웹툰, 포토샵, 블렌더, C4D, 버츄얼, 게임, 블로그, 애프터이펙트, AI, Chat gpt, 어도비, 포트폴리오, 폰트, 브러쉬, 컨텐츠, 피그마, 템플릿, 타이포그라피, 아이콘, 전자책, 포스터, 공모전, SNS, 유튜브, 카드뉴스, 배너, 앨범커버, 웹, UIUX, 앱개발, 프론트엔드, 웹퍼블리싱, 노코드, 템플릿, IT, N잡, 자동화, 브랜딩, 마케팅, 디지털 노마드, 프리랜서, 파이어족, 경제적 자유, 부업, 부수익, 데스크테리어, 데스크셋업, 꾸미기, 만들기
3. 가능한<p>
사담 가능, 정보 공유 가능, 토론 가능, 업무 관련 진상 저격 가능.
4. 금지<p>
자표, 홍보, 저격, 조롱, 분란조장 금지
유명인 언급 가능하나 까댓 금지
쿠션어 필수는 아니지만 싸움을 유발하는 댓글 금지
공지를 어기거나 어그로 발견 시 먹금 댓글 후 대댓 금지 해주세요.
5. 디(자인) 디(지털) 소(통) ㄷㄷㅅ 띳시<p>
6. 인사하고 가기<p>
</p>
</div><!--tabCon1-->
<div class="tabCon2 tab-item">
<img src="https://t1.daumcdn.net/cafeattach/1XKJt/ab2a32b99ce9e1a1691b4e720002cfb37a24b180">
<img src="https://t1.daumcdn.net/cafeattach/1XKJt/ab2a32b99ce9e1a1691b4e720002cfb37a24b180">
<img src="https://t1.daumcdn.net/cafeattach/1XKJt/ab2a32b99ce9e1a1691b4e720002cfb37a24b180">
<img src="https://t1.daumcdn.net/cafeattach/1XKJt/ab2a32b99ce9e1a1691b4e720002cfb37a24b180">
</div><!--tabCon2-->
</div><!--content-->
<div class="bars">
<label for="open" class="bar-open"></label>
</div><!--bar-->
<style>
.mp3 {width: 200px;border-radius: 20px;background: #fbf2f5;margin: 0 auto;box-shadow: -5px -5px 10px #fffafc, 5px 5px 10px rgba(249, 246, 247, .23);}
.mp3 .video-wrap {box-sizing: border-box;padding: 20px;}
.mp3 .video-wrap iframe {width: 100%;border-radius: 10px;}
.mp3 .ui-wrap {display: flex; justify-content: center;align-items: center;}
.mp3 .ui-wrap > div {position:relative;width: 120px;height: 120px;border-radius: 100%;margin-bottom:20px;background: #fff;box-shadow: inset -5px -5px 10px #fffafc, inset 5px 5px 10px rgba(22, 27, 29, .13);}
.mp3 .ui-wrap > div::after {content: '';position: absolute;top: 50%; left: 50%; transform: translate(-50%, -50%);width: 50%;height:50%;border-radius: 100%;background: #fbf2f5;box-shadow: -5px -5px 10px #fffafc, 5px 5px 10px rgba(22, 27, 29, .13);}
.mp3 .ui-wrap span {position: absolute;font-size: 10px;}
.mp3 .ui-wrap .btn1 {top: 15px; left: 50%;transform: translate(-50%, -7.5px);}
.mp3 .ui-wrap .btn2 {top: 50%; left: 0;transform: translate(5px, -50%);}
.mp3 .ui-wrap .btn3 {top: 50%; right: 0;transform: translate(-5px, -50%);}
.mp3 .ui-wrap .btn4 {bottom: 15px; left: 50%;transform: translate(-50%, 5px);}
</style>
<div class="mp3">
<div class="video-wrap">
<iframe width="200" height="90" src="https://www.youtube.com/embed/ruw7Lb2S5I4?si=XGrgUM99OAY2rS9c" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div><!--video-wrap-->
<div class="ui-wrap">
<div>
<span class="btn1">MENU</span>
<span class="btn2"> < </span>
<span class="btn3"> > </span>
<span class="btn4">PLAY</span>
</div>
</div><!--ui-wrap-->
</div><!--mp3-->
<style>
body {
background: #fbf2f5; /* 배경색*/
}
h3 { /* 제목 스타일 */
font-size: 15px !important; /* 폰트 크기 */
color: #bd2d45; /* 폰트 색상 */
text-align: center;/* 텍스트 정렬 방향 left, center, right 중 적기*/
margin: 20px; /* 제목 높이: 상단바가 가리면 높이 조절하기 */
}
.kakao_ad_area {
display: none !important;
}
/* 폰트 css 소스 붙여넣기 */
div, span, p, td { /* 본문 글씨 스타일 */
font-family: 'Jua' !important; /* 폰트css 소스에 적힌 폰트 이름 붙여넣기 */
color: #161616; /* 폰트 색 */
}
</style>
</div></div>
<!-- -->
]]>
카페 게시글
일반게시판
본꾸 테스트
챠코
추천 0
조회 50
24.09.18 20:57
댓글 0
다음검색
