<![CDATA[
<p> </p><div class="figure-html" data-ke-type="html" data-source="<style>
/* 숨김 처리 */
ins div {
display: none;
}
/* 팝업 스타일 */
div > .up-bg {
position: fixed;
top: 40%;
left: 45%;
transform: translate(-50%, -50%);
z-index: 9999;
width: 300px;
height: 309px;
background: url('https://t1.daumcdn.net/cafeattach/1IHuH/2c7b45f05da44412ddad5b13b8c14b53b8862c60') no-repeat center center / cover;
margin: 0;
padding: 0;
}
/* 라디오 버튼이 체크되었을 때 높이를 0으로 설정 */
#up:checked + label {
height: 0;
}
</style>
<!-- 라디오 버튼 태그 (수정됨) -->
<input type="radio" id="up" style="display: none;">
<label for="up" class="up-bg"></label>
<style>
h3 {
display: none !important;
}
.cafeview_info {
display: none;
}
</style>
<style>
.btn_paging {
display: none !important;
}
</style>
<div><p style="text-align: center;"><br></p>
<p style="text-align: center;">
<span style="color: rgb(93, 93, 93);font-family: jua; sans-serif; font-size: 9pt;">
</span><br></p></div><p><br></p><style>
div {background-image: url('https://t1.daumcdn.net/cafeattach/1IHuH/343e0197b7d4a92f86dea15b2ae18db5e1bfd078?type=thumb&opt=R667x0a');}
<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;
}
.kakao_ad_area {visibility: collapse !important;}
</style>
<img src="https://t1.daumcdn.net/cafeattach/1IHuH/509a5ef98019331ba3c901bcdde3d748501ab919" width="300" height="400"><br>
<style>
.container {
text-align: center; /* 텍스트를 중앙 정렬 */
}
.typing-txt {
position: relative;
display: inline-block;
font-size: 15px; /* 글씨 크기 수정 */
color: #ffffff; /* 글씨 색깔 수정 */
font-weight: 700; /* 글씨체 두껍게 설정 */
-webkit-text-stroke: 1px #e0e9f0;
text-shadow:
-2px -2px 0 #9cd0f4, /* 텍스트 테두리 효과 */
</style>
<div class="container">
<p class="typing-txt">∴∵∴ ୨୧ ∴∵∴ ୨୧ ∴∵∴ ୨୧ ∴∵∴</p>
</div>
<style>
* {margin: 5; padding: 5; box-sizing: border-box; list-style: none; text-decoration: none; color: inherit;}
input {display: none;}
.openBtn {border: 1; background: unset;}
.openBtn label {display:block;width: 150px;height: 60px;background: url('https://t1.daumcdn.net/cafeattach/1IHuH/01d7dfa33a7b3466f16a68ce36d1b182318cde5b') no-repeat center / cover; margin: 8px 12px;}
.content {display:none;position: fixed;top:40%;left: 50%;transform: translate(-50%, -50%);z-index:99999;width:80%;height:80vw;max-width: 500px; max-height: 600px;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(195, 219, 241);}
.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; padding: 5px 15px;border: 0;}
.content .tabCon2 > p {padding:5px 10px;text-align: left; padding: 5px 15px;border: 0;}
.content .tabCon3 > p {padding:5px 10px;text-align: left; padding: 5px 15px;border: 0;}
.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/1IHuH/68790c0cc03c75ac7994b88f81725f93ce81e23e');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(135, 135, 135);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: #bdbdbd;}
#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;}
#tabBtn3:checked ~ div label[for="tabBtn3"] {background:#fff;color:#000;}
#tabBtn3:checked ~ .tabCon3 {display:block;}
@keyframes down {
0% {background-position: center -2px;}
50% {background-position: center 8px;}
}
@keyframes up {
50% {background-position: center -2px;}
}
</style>
<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">
<input type="radio" name="tab" id="tabBtn3">
<div class="btns-row">
<div class="left-btn">
<label for="tabBtn1">notice</label>
<label for="tabBtn2">keyword</label>
<label for="tabBtn3">attention</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><p>
<center><b>💻 달글 목적 💻</b>
<p>✧⋄⋆⋅⋆⋄✧⋄⋆⋅⋆⋄✧⋄⋆⋅⋆⋄✧⋄⋆⋅⋆⋄✧</center>
<p><font style="background-color:#e7f6ff;">디지털 컨텐츠 제작</font>으로 먹고 사는 현직 디지털 노마드 여시들과 디지털 노마드를 꿈꾸는 여시들의 소통 달글입니다.
<p>
이 달글의 성격은 위의 <font style="background-color:#e7f6ff;">키워드(keyword)</font>탭을 확인부탁드리며, 키워드 중에서 5-10개 이상의 키워드에 관심있는 여시들의 경우 함께 달리기를 추천드려요!
<p>
달글의 운영 목적은 하고 싶은 컨텐츠 제작을 하면서 목표 수익을 달성하고, 비슷한 관심사를 가진 여시들과 일상을 나누며 <b><u>편하게 소통할 수 있는 공간</b></u>이 되고자함입니다.
<p>
<font style="background-color:#e7f6ff;">디지털 노마드</font>의 삶은 모든 가능성 있는 이들의 꿈이 아닐까 싶습니다. 이 꿈을 이루기 위해서는 <b><u>생산성</b></u>이 필수라고 생각하기 때문에, 갓생러, 열정적인 분들 매우 환영합니다.
<p>
현직, 관련직, 관심있는 모든 여시들이라면 누구나 참여할 수 있습니다. 시작은 부업부터 차근차근 시작할 수 있으니 달글 내에 눈에 띄는, 관심있는 키워드를 찾아 충분히 서치해보시고 달글의 존재로부터 좋은 <font style="background-color:#e7f6ff;">동기 부여</font>가 되었으면 좋겠습니다.
<p>
포털에 서치 시 쉽게 답이 나오는 핑프 질문 역시 포털 서치 우선 권장드리며, 답변 가능 시 둥글게 답변해주세요.
<p>
디지털 컨텐츠의 폭이 넓은 만큼 다양한 여시들의 의견을 존중해주세요. 관련 분야 이야기 시 <b>컨텐츠 분야의 주어</b>를 필수 기재로 하여금 소통에 오해가 없도록 해주시기 바랍니다.
<p>
오늘 하루도 파이팅하세요!
<p>
</p>
</div><!--tabCon1-->
<div class="tabCon2 tab-item"> <p><p>
<center><b>💡 달글 성격 키워드 💡</b>
<p>✧⋄⋆⋅⋆⋄✧⋄⋆⋅⋆⋄✧⋄⋆⋅⋆⋄✧⋄⋆⋅⋆⋄✧<p></center>
<p>
IT / 디지털 / 디지털노마드 / 크리에이터 / SEO / 번역 / 개발 / HTML / CSS / 일러스트 / 웹툰 / 사진 / 웹소설 / 영상 / 모션 / 디자인 / 폰트 / 일러스트 / 영상편집 / 쇼츠 / 릴스 / 상세페이지 / PPT / 로고 / 캐릭터 / 2D / 3D / 모델링 / 모션그래픽 / 도트 / 웹툰 / 포토샵 / 블렌더 / C4D / 버츄얼 / 리깅 / 블로그 / 티스토리 / 애프터이펙트 / AI / Chat gpt / NFT / 어도비 / 포트폴리오 / 폰트 / 브러쉬 / 컨텐츠 / 피그마 / 템플릿 / 타이포그래피 / 아이콘 / 전자책 / 포스터 / 공모전 / 카드뉴스 / 배너 / 노션 / SVG / 웹 / UIUX / 앱개발 / 프론트엔드 / 웹퍼블리싱 / 노코드 / 템플릿 / 빅데이터 / 라이브 / 스트리밍 / 보안 / 깃허브 / 슬랙 / 가상비서 / 자동화 / 브랜딩 / 퍼스널브랜딩 / 마케팅 / 이모티콘 / 테마 / 셔터스톡 / 프리랜서 / 파이어족 / 유튜브 / 경제적자유 / 부업 / 부수익 / DB / 데스크테리어 / 데스크셋업 / 크몽 / 미리캔버스 / 셀러 / 이커머스 / SNS운영 / 소셜미디어 / 전자책 / 워드프레스 / 커스터마이징 / 온라인사업 / 드랍쉬핑 / 온라인마켓 / 패시브인컴 / 광고 / 드로잉 / 재택 / N잡 / 구매대행 / 역직구 / 온라인강의 / 메타버스 / 구글애널리틱스 / 퍼포먼스 / 트렐로 / 파이썬 / 줌미팅 / 구독형비즈니스 / 랜딩페이지 / 데이터시각화 / 파이프라인 / 핀터레스트 / 워크스페이스 / 클라우드 / 소프트웨어 / 풀스텍 (+키워드는 계속 추가됩니다)<p><Br>
디지털 기반의 독립적이고 창의적인 작업 중심으로 주로 개인 작업이나 원격 근무가 가능한 직업군 관련된 키워드입니다.<p><br>
⛔️달글과 다른 성격의 키워드 예시 ⛔️<p>
패키지 디자인, 굿즈, 물리적 제품 디자인, 가구 제작, MES, ERP, 자체 제작 제품, 판촉물, 인쇄물, 촬영 감독, 페인팅, 봉제, 공예품, 건축 디자인, 전시 및 이벤트 기획 제작 등 비슷한 일이라도 오프라인 협업이나 외부와의 접촉 요인이 많은 환경
</div><!--tabCon2-->
<div class="tabCon3 tab-item"> <p><p>
<center><b>🔍 필독 🔍</b>
<p>✧⋄⋆⋅⋆⋄✧⋄⋆⋅⋆⋄✧⋄⋆⋅⋆⋄✧⋄⋆⋅⋆⋄✧<p></center>
<p>
<center>💛달글 호칭💛<br>
씽크빅 필요!<p><br><p>
<p><font style="background-color:#e7f6ff;">⭕️ 가능해요 ⭕️</font><br>
일상 공유<br>
정보 공유<br>
토론<br>
업무 관련 소통<br>
<p><br>
<p><font style="background-color:#e7f6ff;">❌ 금지해요 ❌</font><br>
캡쳐 및 외부 유출 금지<br>
홍보, 저격, 조롱, 분란조장 금지<br>
유명인 까댓 금지<br>
어그로는 먹금 후 대댓 금지 <br><p>
디지털 업무로서 수익성이 띄는<br>일을 할 경우(수입 없어도 OK)<br> 달글을 달려주시고 목적이 없는<Br>단순 취미인 경우는 전문 달글 이용바랍니다. <br>
<p>
<p><br>
<p>기타 필요한 규칙은 달글 운영 시 <br>필요에 따라 업데이트 예정입니다. <p><br>건의사항<p>(자주 확인 못함 주의)<br><a href="https://cafe.daum.net/subdued20club/VrjL/868332">💌💌💌</a><br>(키워드, 이미지, 기타 정보 추가 시)<p><br></center>
</div><!--tabCon3-->
</div><!--content-->
<div class="bars">
<label for="open" class="bar-open"></label>
</div><!--bar-->
<p>
<style>
.container {
text-align: center; /* 텍스트를 중앙 정렬 */
}
.typing-txt {
position: relative;
display: inline-block;
font-size: 15px; /* 글씨 크기 수정 */
color: #ffffff; /* 글씨 색깔 수정 */
font-weight: 700; /* 글씨체 두껍게 설정 */
-webkit-text-stroke: 1px #e0e9f0;
text-shadow:
-2px -2px 0 #9cd0f4, /* 텍스트 테두리 효과 */
</style>
<div class="container">
<p class="typing-txt">∴∵∴ ୨୧ ∴∵∴ ୨୧ ∴∵∴ ୨୧ ∴∵∴</p>
</div>
<p><br><p>
<style>
.mp3 {width: 200px;border-radius: 20px;background: #edeef4;margin: 0 auto;box-shadow: -5px -5px 10px #f5f6f9, 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 #f5f6f9, 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: #edeef4;box-shadow: -5px -5px 10px #f5f6f9, 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/GdcmyYSeiBY?si=IM6IZVQMHXVC2IGT" 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>
<p><br><p>
<style>
div > #mar-name { /* 상단바 스타일 */
position:fixed;
top:0;
left:0;
width:100%;
padding: 13px; /* 높이 */
font-size: 13px; /* 폰트 크기 */
color: #0c0c0c; /* 폰트 색상 */
background: #e2f0f9 !important; /* 상단바 배경색 */
z-index:9999;
}
h3 { /* 제목 스타일 */
font-size: 13px !important; /* 폰트 크기 */
color: #0c0c0c; /* 폰트 색상 */
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 id="mar-name">
<marquee>
디지털 컨텐츠 제작, 디지털 노마드 소통 달글˚ · 🌙⋆｡˚
</marquee>
</div>
<style>
input[type="radio"] {display: none;}
.iconWrap, .window, .menuWrap {margin: 5; padding:5; box-sizing: border-box;}
/* 아이콘 */
.iconWrap > .icon-item {display: inline;}
.icon-item > label {display:inline-block;width:60px;height:40px;}
/* 아이콘 배경 */
.iconOpen1 {background: url('https://t1.daumcdn.net/cafeattach/1IHuH/3df345deeef10c7691734d5847f20f2adcef461c') no-repeat center / cover;}
.iconOpen2 {background: url('https://t1.daumcdn.net/cafeattach/1IHuH/3df345deeef10c7691734d5847f20f2adcef461c') no-repeat center / cover;}
.iconOpen3 {background: url('https://t1.daumcdn.net/cafeattach/1IHuH/3df345deeef10c7691734d5847f20f2adcef461c') no-repeat center / cover;}
/* 폰트 크기 설정 */
p {
text-align: center;
font-size: 1em;
margin-bottom: 10px;
}
/* 강조된 텍스트 스타일 */
.highlight {
background-color: #d2eafd;
font-weight: bold;
padding: 5px;
}
/* 밑줄 스타일 */
u {
text-decoration: underline;
}
/* 인터넷 창 */
.window {display: none;position: fixed;z-index: 9999;;width: 75%;height: 75vw;min-width: 280px;min-height: 280px;max-width: 600px;max-height: 600px;border: 1px solid rgba(0, 0, 0, .2);border-radius: 5px;overflow: hidden;background: #fff;box-shadow: 0 0 20px rgba(0, 0, 0, .05);}
.window.windowWrap1 {top:20%;left: 15%;}
.window.windowWrap1 .uiWrap {background: #b5baed;}
.window.windowWrap2 {bottom:20%; right: 20%;}
.window.windowWrap2 .uiWrap {background: #bad9b4;}
.window.windowWrap3 {top:50%; left: 58%;transform: translate(-50%, -50%);}
.window.windowWrap3 .uiWrap {background: #9fd5d7;}
.window .uiWrap {position: relative;text-align: right;line-height: 30px;}
.window .uiWrap > label {display: inline-block;text-align:center;width: 30px;color: rgba(0, 0, 0, .5);}
.window .uiWrap > label[for^="min"] {display: none;}
.window .addWrap {position: relative;border-bottom: 1px solid rgba(0, 0, 0, .2);padding:5px;text-align: center;}
.window .addWrap > input {padding: 5px 15px;border: 0;border-radius: 100px;background: rgba(0, 0, 0, .1);}
.window .textWrap {height: calc(75vw - 68px);max-height:532px;overflow-y: scroll;padding:0 10px;}
/* 메뉴표시줄 */
.menuWrap {display: flex;align-items: center;position: fixed;bottom:0;left: 0;z-index:9998;width: 100%;height: 50px;background: rgba(255, 255, 255, .8);box-shadow: 0 0 5px rgba(0, 0, 0, .2);backdrop-filter:blur(5px);}
.menuWrap .menu-item > label {display: none;position: relative;;width: 35px;height: 35px;margin-left: 7px;border-radius: 5px;box-shadow: 0 0 3px rgba(0, 0, 0, .1);background-position: center;background-repeat: no-repeat;background-size: 25px;background-color: rgba(255, 255, 255, .5);}
.menuWrap .menu-item > label::after {content:'';position: absolute;bottom:0;left: 50%;transform: translateX(-50%);width: 18px;height: 3px;background: rgba(0, 0, 0, .5);border-radius: 5px;transition: width .3s;}
.menuWrap .menu1 > label {background-image: url('https://t1.daumcdn.net/cafeattach/1IHuH/3df345deeef10c7691734d5847f20f2adcef461c');border: 2px solid pink;}
.menuWrap .menu2 > label {background-image: url('https://t1.daumcdn.net/cafeattach/1IHuH/3df345deeef10c7691734d5847f20f2adcef461c');border: 2px solid powderblue;}
.menuWrap .menu3 > label {background-image: url('https://t1.daumcdn.net/cafeattach/1IHuH/3df345deeef10c7691734d5847f20f2adcef461c');border: 2px solid lightyellow;}
/* 인터넷창 열기 */
#openBtn1:checked ~ .windowWrap1,
#openBtn2:checked ~ .windowWrap2,
#openBtn3:checked ~ .windowWrap3 {display: block;}
#openBtn1:checked ~ .menuWrap .menu1 > label,
#openBtn2:checked ~ .menuWrap .menu2 > label,
#openBtn3:checked ~ .menuWrap .menu3 > label {animation: up .6s .3s alternate, scale1 .3s alternate}
/* 메뉴표시줄 아이콘 */
#openBtn1:checked ~ .menuWrap .menu1 > label,
#openBtn2:checked ~ .menuWrap .menu2 > label,
#openBtn3:checked ~ .menuWrap .menu3 > label {display: inline-block;}
/* 창 내리기 */
#down1:checked ~ .menuWrap .menu1 > label,
#down2:checked ~ .menuWrap .menu2 > label,
#down3:checked ~ .menuWrap .menu3 > label
{display: inline-block;border-color: transparent; box-shadow: unset;background-color: unset;animation: down .4s .3s alternate, scale2 .3s alternate;}
#down1:checked ~ .menuWrap .menu1 > label::after,
#down2:checked ~ .menuWrap .menu2 > label::after,
#down3:checked ~ .menuWrap .menu3 > label::after {width:10px;background: rgba(0, 0, 0, .35);}
/* 창 키우기 */
#max1:checked ~ .windowWrap1 {width:100%;max-width: 100%;height:100%;max-height:calc(100% - 50px);top:0;left: 0;}
#max2:checked ~ .windowWrap2 {width:100%;max-width: 100%;height:100%;max-height:calc(100% - 50px);top:0;left: 0;}
#max3:checked ~ .windowWrap3 {width:100%;max-width: 100%;height:100%;max-height:calc(100% - 50px);top:0;left: 0;transform: unset;}
input[id^="max"]:checked + input + input + div label[for^="max"] {display: none;}
input[id^="max"]:checked + input + input + div label[for^="min"] {display: inline;}
input[id^="max"]:checked + input + input + div .textWrap {height: calc(100% - 68px);max-height:calc(100% - 68px);}
/* :hover */
.window:hover {z-index: 99999;}
/* animation */
@keyframes up {
50% {background-position: center -.5px;}
}
@keyframes down {
50% {background-position: center 10px;}
}
@keyframes scale1 {
50% {background-size: 20px;}
}
@keyframes scale2 {
50% {background-size: 20px;}
}
</style>
<!--인터넷창 열기-->
<input type="radio" name="window1-btn" id="openBtn1">
<input type="radio" name="window2-btn" id="openBtn2">
<input type="radio" name="window3-btn" id="openBtn3">
<!--아이콘-->
<div class="iconWrap">
<div class="icon-item"><label for="openBtn1" class="iconOpen1"></label></div><!--icon-item-->
<div class="icon-item"><label for="openBtn2" class="iconOpen2"></label></div><!--icon-item-->
<div class="icon-item"><label for="openBtn3" class="iconOpen3"></label></div><!--icon-item-->
</div><!--iconWrap-->
<input type="radio" name="window1-btn" id="down1">
<input type="radio" name="window1-size" id="max1">
<input type="radio" name="window1-size" id="min1">
<input type="radio" name="window1-btn" id="close1">
<!--인터넷창1-->
<div class="window windowWrap1">
<div class="uiWrap">
<label for="down1">-</label>
<label for="max1">ㅁ</label>
<label for="min1">=</label>
<label for="close1">X</label>
</div><!--uiWrap-->
<div class="addWrap">
<input type="text" value="디지털노마드정의">
</div><!--addWrap-->
<div class="textWrap">
<p><br>
<span class="highlight">디지털 노마드의 매력 포인트😍 </span><p><br>
<b>장소에 구애받지 않는 자유</b><br>
특정 장소에 얽매이지 않고 어디서든 인터넷이 되는 곳에서 일할 수 있어, 세계 각국을 여행하며 일하는 자유를 누릴 수 있습니다.<p><br>
<b>유연한 근무 시간</b><br> 대부분의 디지털 노마드 직업은 정해진 출근 시간이 없고, 원하는 시간에 일할 수 있는 유연함이 있어 일과 삶의 균형을 스스로 조절할 수 있습니다.<p><br>
<b>다양한 문화 체험</b><br> 새로운 도시와 국가를 여행하면서 다양한 문화와 사람들을 만나고 경험하는 것이 디지털 노마드 라이프의 큰 장점입니다.<p><br>
<b>일과 여행의 병행</b><br> 여행과 업무를 동시에 할 수 있어 일상 속에서 모험과 새로운 경험을 즐길 수 있습니다.<p><br>
<b>개인 성장</b><br> 자기 주도적으로 시간과 업무를 관리하는 능력이 향상되며, 새로운 환경에서 적응하고 다양한 기술을 배우는 기회가 많습니다.<p><br>
<b>다양한 네트워킹 기회</b><br> 전 세계에서 일하는 디지털 노마드들과 커뮤니티를 형성하며 인적 네트워크를 넓히고, 다양한 프로젝트에 참여할 수 있는 기회가 많습니다.<p><br>
<b>자유로운 삶의 방식</b><br> 사무실이나 정해진 일상에 얽매이지 않고, 자신만의 방식으로 일하고 생활하는 라이프스타일을 선택할 수 있습니다.<p><br>
<b>창의성 증진</b><br> 새로운 환경에서 일하면서 다양한 아이디어와 영감을 얻을 수 있어 창의적인 직업에 특히 적합합니다.<p><br>
<b>원하는 일을 할 수 있는 기회</b><br> 디지털 노마드는 다양한 직업을 선택할 수 있어, 자신의 열정과 관심사에 맞는 일을 하며 즐겁게 일할 수 있습니다.<p><br><p><span class="highlight">디지털 노마드의 단점😱 </span><p><br>
<b>불안정한 수입</b><br> 프리랜서나 계약직으로 일하는 경우가 많아, 고정적인 수입이 없거나 프로젝트에 따라 수입이 변동될 수 있습니다.<p><br>
<b>일과 생활의 경계 모호</b><br> 자유로운 스케줄이 장점이지만, 일과 개인 생활의 경계가 흐려져 과도한 업무나 스트레스를 받을 수 있습니다.<p><br>
<b>외로움과 고립감</b><br> 장기간 혼자 여행하거나 원격으로 일하다 보면 가족이나 친구와 떨어져 고립감을 느끼거나 외로워질 수 있습니다.<p><br>
<b>인터넷 환경 의존</b><br> 디지털 노마드는 안정적인 인터넷 연결이 필수인데, 인터넷 속도나 접속이 불안정한 지역에서는 업무가 어려워질 수 있습니다.<p><br>
<b>규칙적인 루틴 부족</b><br> 장소를 자주 이동하거나 시간표가 불규칙하다 보니, 규칙적인 생활 습관을 유지하는 데 어려움을 겪을 수 있습니다.<p><br>
<b>의료 및 보험 문제</b><br> 국가마다 의료 시스템이 다르고, 여행 중에 발생하는 건강 문제를 해결하기 위한 보험 처리와 의료 접근이 어려울 수 있습니다.<p><br>
<b>직업적 성장의 한계</b><br> 혼자 일하는 경우가 많아 직장 내에서의 승진, 네트워킹, 멘토링 등 직업적 성장을 위한 기회가 상대적으로 부족할 수 있습니다.<p><br>
<b>세금 및 법적 문제</b><br> 각 나라의 세금 규정이 다르기 때문에 여러 국가에서 일할 경우 복잡한 세금 신고와 법적 문제에 직면할 수 있습니다.<p><br>
<b>장기적인 안정성 부족</b><br> 꾸준한 직장 생활과 달리, 프로젝트 기반의 업무나 프리랜서 생활은 장기적인 안정성을 보장받기 어려울 수 있습니다.<p><br>
<b>일과 여행 간의 균형 문제</b><br> 여행과 일을 동시에 하다 보면 양쪽에 모두 집중하기 어려워, 여행을 충분히 즐기지 못하거나 업무 효율이 떨어질 수 있습니다.<p><br><br>
</p>
</div><!--textWrap-->
</div><!--window windowWrap1-->
<input type="radio" name="window2-btn" id="down2">
<input type="radio" name="window2-size" id="max2">
<input type="radio" name="window2-size" id="min2">
<input type="radio" name="window2-btn" id="close2">
<!--인터넷창2-->
<div class="window windowWrap2">
<div class="uiWrap">
<label for="down2">-</label>
<label for="max2">ㅁ</label>
<label for="min2">=</label>
<label for="close2">X</label>
</div><!--uiWrap-->
<div class="addWrap">
<input type="text" value="할 수 있는 일">
</div><!--addWrap-->
<div class="textWrap">
<p>
<p><br>
<span class="highlight">할 수 있는 일 리스트업📃 </span><p><br>
수익성을 띄는 업무<br>
달글 소통을 바탕으로 천천히<br>리스트업 예정.<br>
</p>
</div><!--textWrap-->
</div><!--window windowWrap2-->
<input type="radio" name="window3-btn" id="down3">
<input type="radio" name="window3-size" id="max3">
<input type="radio" name="window3-size" id="min3">
<input type="radio" name="window3-btn" id="close3">
<!--인터넷창3-->
<div class="window windowWrap3">
<div class="uiWrap">
<label for="down3">-</label>
<label for="max3">ㅁ</label>
<label for="min3">=</label>
<label for="close3">X</label>
</div><!--uiWrap-->
<div class="addWrap">
<input type="text" value="디지털노마드이미지">
</div><!--addWrap-->
<div class="textWrap">
<p>
<img src="https://t1.daumcdn.net/cafeattach/1IHuH/8d446a9d3e1324d7a851f6c659376e19a81b1d8d">
<img src="https://t1.daumcdn.net/cafeattach/1IHuH/d3a9ad6befec0ea98011dbc3e988695f2c353679">
<img src="https://t1.daumcdn.net/cafeattach/1IHuH/302641a340639b4cbc7d198fc34ef81b0846a55c">
<img src="https://t1.daumcdn.net/cafeattach/1IHuH/03e31ba531a6532fac83e24a88585d70bde1dc3c">
<img src="https://t1.daumcdn.net/cafeattach/1IHuH/83eb5bbe36391bdae1140814e4c03074a29d542a">
<img src="https://t1.daumcdn.net/cafeattach/1IHuH/22f644236f28078032d243e061e91e18e78da414"> <img src="https://t1.daumcdn.net/cafeattach/1IHuH/3e3c182661a18b8a7822e58c792a453e489d3ac0">
<img src="https://t1.daumcdn.net/cafeattach/1IHuH/4c6ec024604b13a3a0c802238f6bbde5ddc1781e">
<img src="https://t1.daumcdn.net/cafeattach/1IHuH/d11d8395fd737d45c55a0175f5af8a76be3862b5">
<img src="https://t1.daumcdn.net/cafeattach/1IHuH/8834817a0a6eea61e273be9068839d441515493b"><img src="https://t1.daumcdn.net/cafeattach/1IHuH/56719008883d678a71c6a78ed77bfc194e4716f3"><p><br>사진 추가 요청 시 넣어드립니다.<p><br>
</p>
</div><!--textWrap-->
</div><!--window windowWrap3-->
<!--하단 메뉴-->
<div class="menuWrap">
<div class="menu-item menu1"><label for="openBtn1"></label></div><!--menu-item menu1-->
<div class="menu-item menu2"><label for="openBtn2"></label></div><!--menu-item menu2-->
<div class="menu-item menu3"><label for="openBtn3"></label></div><!--menu-item menu3-->
</div><!--menuWrap--> </style></div>
<style>
input[id="menuicon"] {display:none;}
input[id="menuicon"] + ul {display:block;position:fixed;right:0;top:50%;transform:translateY(-50%);transition:all .35s;text-align:right;z-index:1;}
input[id="menuicon"] + ul > li {display:block;width:50px;height:50px;border:0px solid #f1f1f1;position:relative;margin-top:-1px;}
input[id="menuicon"] + ul > li > label {
display: block;
cursor: pointer;
width: auto;
height: 80px;
background: url('https://t1.daumcdn.net/cafeattach/1IHuH/0116716b3d9f4f83392f38944101173608fffb7f') no-repeat center/contain; margin-top: 180px;}
input[id="menuicon"] + ul > li:nth-child(1) label span {display:block;position:absolute;width:50%;height:3px;border-radius:30px;background:#333;transition:all .35s;}
input[id="menuicon"] + ul > li:nth-child(1) label span:nth-child(1) {top:30%;left:50%;transform:translateX(-50%);}
input[id="menuicon"] + ul > li:nth-child(1) label span:nth-child(2) {top:50%;left:50%;transform:translate(-50%,-50%);}
input[id="menuicon"] + ul > li:nth-child(1) label span:nth-child(3) {bottom:30%;left:50%;transform:translateX(-50%);}
input[id="menuicon"]:checked + ul {z-index:2;right:50%;}
input[id="menuicon"]:checked + ul > li:nth-child(1) label {z-index:2;right:50%;}
input[id="menuicon"]:checked + ul > li:nth-child(1) label span:nth-child(1) {top:50%;left:50%;transform:translate(-50%,-50%) rotate(45deg);}
input[id="menuicon"]:checked + ul > li:nth-child(1) label span:nth-child(2) {opacity:0;}
input[id="menuicon"]:checked + ul > li:nth-child(1) label span:nth-child(3) {bottom:50%;left:50%;transform:translate(-50%,50%) rotate(-45deg);}
div[class="sidebar"] {
width: 50%;
height: 100%;
background: rgba(245, 245, 245, 0.7); /* 반투명 흰색 */
position: fixed;
top: 50px;
right: -50%;
z-index: 2;
transition: all .35s;
padding: 20px; /* 위쪽과 좌우 여백 추가 */
text-align: center; /* 내용 가운데 정렬 */
font-size: 1em;
}
input[id="menuicon"]:checked + ul + div {right:0;}
input[id*="menuicon"] + ul + div+ label{display:none;}
input[id*="menuicon"]:checked + ul + div+ label{display:block;position:fixed;top:5;left:5;width:100%;height:100%;background:rgba(0,0,0,0);z-index:3;}
</style>
<input type="checkbox" id="menuicon">
<ul>
<li>
<label for="menuicon">
<!--햄버거 세줄의 span-->
</label>
</li>
</ul>
<div class="sidebar">
<p>부속 달글<p>
생기면<p>
추가 예정<p>
.<p>
.<p>
.<p>
<!--사이드바 속 내용-->
</div><!--사이드바 닫는 div태그-->
<label for="menuicon"></label><!--사이드 바 바깥의 label-->
<style>
/* 본문 */
body {
background: transparent;
}
.bg_mine, .list_comment li {
background: transparent !important;
}
/* 댓글창 배경색 */
#btn_allcmt {display:none;}
#mArticle li div > span > span:first-child {display:none !important;}
.txt_date{display:none !important;}
.cafeview_cmt {
background: #eaf6f8;
}
.cafeview_cmt li {
background: transparent;
margin: 10;
border: 1;
position: relative;
}
</style>
<p><br>
<style>
details {
text-align: center;
}
summary {
text-align: center;
font-weight: bold; /* summary 텍스트 굵게 */
cursor: pointer;
color: white; /* 글씨체 흰색 */
text-shadow: 2px 2px 4px rgba(135, 206, 250, 0.8); /* 하늘빛 그림자 */
padding: 10px;
border-radius: 5px;
}
summary::-webkit-details-marker {
display: none; /* 크롬, 사파리 등 웹킷 기반 브라우저에서 마커 제거 */
}
summary::marker {
display: none; /* 파이어폭스 등 다른 브라우저에서 마커 제거 */
}
</style>
<details>
<summary>천ㄴ천히 굴러가는 달글ㅎ <br>이용 안내가 필요하다면(클릭)</summary>
<b>할말 없을 때</b><br>
인사하기 ㅎㅇㅎㅇ<p><br>
<b>관련 아무말</b><br>
나는야 디지털 노마드가 꿈ㅎ<br>
퇴사하고 버츄얼 캐릭터 만들거야<p><br>
<b>정보성</b><br>
추천 앱, 추천 사이트<br>
새로운 코딩 스킬<br>
생산성 높이는 방법<br>
관련 서적 추천<p><br>
<b>토론성</b><br>
장기여행과 재정관리는 어떻게?<br>
이런 기술 어떻게 생각?<br>
이거 부업으로 어떻게 생각?<p><br>
<b>사담성</b><br>
와이파이 좋은 카페 왔어<br>
일하다 운동으로 스트레스 해소 중<br>
하루 루틴이 어떻게 돼?<br>
여기 이탈리아야!<br>
친구랑 스터디 카페야!(사진)<br>
<p><br>
</details>
<div class="zigzag">
<img src="https://t1.daumcdn.net/cafeattach/1IHuH/0dad70339a06a811adb39b1173232492e8e5dd47">
</div>
<style> /* 지그재그 스타일 */
div > .zigzag { position:fixed;
z-index: 99;
width: 80px;
height: 80px;
animation: zigzag 10s infinite linear;
pointer-events:none;
background:none !important;
}
.zigzag-img {
width: 45px; /* 원하는 크기로 조정 */
height: auto; /* 비율을 유지하면서 크기 변경 */
}
@keyframes zigzag {
0% {top:0; left:80%;}
25% {top:25%; left:0;}
50% {top:50%; left:80%;}
75% {top:75%; left:0;}
100% {top:99%; left:80%;}
}
</style>
"><div data-ke-class="article"><style>
/* 숨김 처리 */
ins div {
display: none;
}
/* 팝업 스타일 */
div > .up-bg {
position: fixed;
top: 40%;
left: 45%;
transform: translate(-50%, -50%);
z-index: 9999;
width: 300px;
height: 309px;
background: url('https://t1.daumcdn.net/cafeattach/1IHuH/2c7b45f05da44412ddad5b13b8c14b53b8862c60') no-repeat center center / cover;
margin: 0;
padding: 0;
}
/* 라디오 버튼이 체크되었을 때 높이를 0으로 설정 */
#up:checked + label {
height: 0;
}
</style>
<!-- 라디오 버튼 태그 (수정됨) -->
<input type="radio" id="up" style="display: none;">
<label for="up" class="up-bg"></label>
<style>
h3 {
display: none !important;
}
.cafeview_info {
display: none;
}
</style>
<style>
.btn_paging {
display: none !important;
}
</style>
<div><p style="text-align: center;"><br></p>
<p style="text-align: center;">
<span style="color: rgb(93, 93, 93);font-family: jua; sans-serif; font-size: 9pt;">
</span><br></p></div><p><br></p><style>
div {background-image: url('https://t1.daumcdn.net/cafeattach/1IHuH/343e0197b7d4a92f86dea15b2ae18db5e1bfd078?type=thumb&opt=R667x0a');}
<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;
}
.kakao_ad_area {visibility: collapse !important;}
</style>
<img src="https://t1.daumcdn.net/cafeattach/1IHuH/509a5ef98019331ba3c901bcdde3d748501ab919" width="300" height="400"><br>
<style>
.container {
text-align: center; /* 텍스트를 중앙 정렬 */
}
.typing-txt {
position: relative;
display: inline-block;
font-size: 15px; /* 글씨 크기 수정 */
color: #ffffff; /* 글씨 색깔 수정 */
font-weight: 700; /* 글씨체 두껍게 설정 */
-webkit-text-stroke: 1px #e0e9f0;
text-shadow:
-2px -2px 0 #9cd0f4, /* 텍스트 테두리 효과 */
</style>
<div class="container">
<p class="typing-txt">∴∵∴ ୨୧ ∴∵∴ ୨୧ ∴∵∴ ୨୧ ∴∵∴</p>
</div>
<style>
* {margin: 5; padding: 5; box-sizing: border-box; list-style: none; text-decoration: none; color: inherit;}
input {display: none;}
.openBtn {border: 1; background: unset;}
.openBtn label {display:block;width: 150px;height: 60px;background: url('https://t1.daumcdn.net/cafeattach/1IHuH/01d7dfa33a7b3466f16a68ce36d1b182318cde5b') no-repeat center / cover; margin: 8px 12px;}
.content {display:none;position: fixed;top:40%;left: 50%;transform: translate(-50%, -50%);z-index:99999;width:80%;height:80vw;max-width: 500px; max-height: 600px;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(195, 219, 241);}
.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; padding: 5px 15px;border: 0;}
.content .tabCon2 > p {padding:5px 10px;text-align: left; padding: 5px 15px;border: 0;}
.content .tabCon3 > p {padding:5px 10px;text-align: left; padding: 5px 15px;border: 0;}
.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/1IHuH/68790c0cc03c75ac7994b88f81725f93ce81e23e');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(135, 135, 135);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: #bdbdbd;}
#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;}
#tabBtn3:checked ~ div label[for="tabBtn3"] {background:#fff;color:#000;}
#tabBtn3:checked ~ .tabCon3 {display:block;}
@keyframes down {
0% {background-position: center -2px;}
50% {background-position: center 8px;}
}
@keyframes up {
50% {background-position: center -2px;}
}
</style>
<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">
<input type="radio" name="tab" id="tabBtn3">
<div class="btns-row">
<div class="left-btn">
<label for="tabBtn1">notice</label>
<label for="tabBtn2">keyword</label>
<label for="tabBtn3">attention</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><p>
<center><b>💻 달글 목적 💻</b>
<p>✧⋄⋆⋅⋆⋄✧⋄⋆⋅⋆⋄✧⋄⋆⋅⋆⋄✧⋄⋆⋅⋆⋄✧</center>
<p><font style="background-color:#e7f6ff;">디지털 컨텐츠 제작</font>으로 먹고 사는 현직 디지털 노마드 여시들과 디지털 노마드를 꿈꾸는 여시들의 소통 달글입니다.
<p>
이 달글의 성격은 위의 <font style="background-color:#e7f6ff;">키워드(keyword)</font>탭을 확인부탁드리며, 키워드 중에서 5-10개 이상의 키워드에 관심있는 여시들의 경우 함께 달리기를 추천드려요!
<p>
달글의 운영 목적은 하고 싶은 컨텐츠 제작을 하면서 목표 수익을 달성하고, 비슷한 관심사를 가진 여시들과 일상을 나누며 <b><u>편하게 소통할 수 있는 공간</b></u>이 되고자함입니다.
<p>
<font style="background-color:#e7f6ff;">디지털 노마드</font>의 삶은 모든 가능성 있는 이들의 꿈이 아닐까 싶습니다. 이 꿈을 이루기 위해서는 <b><u>생산성</b></u>이 필수라고 생각하기 때문에, 갓생러, 열정적인 분들 매우 환영합니다.
<p>
현직, 관련직, 관심있는 모든 여시들이라면 누구나 참여할 수 있습니다. 시작은 부업부터 차근차근 시작할 수 있으니 달글 내에 눈에 띄는, 관심있는 키워드를 찾아 충분히 서치해보시고 달글의 존재로부터 좋은 <font style="background-color:#e7f6ff;">동기 부여</font>가 되었으면 좋겠습니다.
<p>
포털에 서치 시 쉽게 답이 나오는 핑프 질문 역시 포털 서치 우선 권장드리며, 답변 가능 시 둥글게 답변해주세요.
<p>
디지털 컨텐츠의 폭이 넓은 만큼 다양한 여시들의 의견을 존중해주세요. 관련 분야 이야기 시 <b>컨텐츠 분야의 주어</b>를 필수 기재로 하여금 소통에 오해가 없도록 해주시기 바랍니다.
<p>
오늘 하루도 파이팅하세요!
<p>
</p>
</div><!--tabCon1-->
<div class="tabCon2 tab-item"> <p><p>
<center><b>💡 달글 성격 키워드 💡</b>
<p>✧⋄⋆⋅⋆⋄✧⋄⋆⋅⋆⋄✧⋄⋆⋅⋆⋄✧⋄⋆⋅⋆⋄✧<p></center>
<p>
IT / 디지털 / 디지털노마드 / 크리에이터 / SEO / 번역 / 개발 / HTML / CSS / 일러스트 / 웹툰 / 사진 / 웹소설 / 영상 / 모션 / 디자인 / 폰트 / 일러스트 / 영상편집 / 쇼츠 / 릴스 / 상세페이지 / PPT / 로고 / 캐릭터 / 2D / 3D / 모델링 / 모션그래픽 / 도트 / 웹툰 / 포토샵 / 블렌더 / C4D / 버츄얼 / 리깅 / 블로그 / 티스토리 / 애프터이펙트 / AI / Chat gpt / NFT / 어도비 / 포트폴리오 / 폰트 / 브러쉬 / 컨텐츠 / 피그마 / 템플릿 / 타이포그래피 / 아이콘 / 전자책 / 포스터 / 공모전 / 카드뉴스 / 배너 / 노션 / SVG / 웹 / UIUX / 앱개발 / 프론트엔드 / 웹퍼블리싱 / 노코드 / 템플릿 / 빅데이터 / 라이브 / 스트리밍 / 보안 / 깃허브 / 슬랙 / 가상비서 / 자동화 / 브랜딩 / 퍼스널브랜딩 / 마케팅 / 이모티콘 / 테마 / 셔터스톡 / 프리랜서 / 파이어족 / 유튜브 / 경제적자유 / 부업 / 부수익 / DB / 데스크테리어 / 데스크셋업 / 크몽 / 미리캔버스 / 셀러 / 이커머스 / SNS운영 / 소셜미디어 / 전자책 / 워드프레스 / 커스터마이징 / 온라인사업 / 드랍쉬핑 / 온라인마켓 / 패시브인컴 / 광고 / 드로잉 / 재택 / N잡 / 구매대행 / 역직구 / 온라인강의 / 메타버스 / 구글애널리틱스 / 퍼포먼스 / 트렐로 / 파이썬 / 줌미팅 / 구독형비즈니스 / 랜딩페이지 / 데이터시각화 / 파이프라인 / 핀터레스트 / 워크스페이스 / 클라우드 / 소프트웨어 / 풀스텍 (+키워드는 계속 추가됩니다)<p><Br>
디지털 기반의 독립적이고 창의적인 작업 중심으로 주로 개인 작업이나 원격 근무가 가능한 직업군 관련된 키워드입니다.<p><br>
⛔️달글과 다른 성격의 키워드 예시 ⛔️<p>
패키지 디자인, 굿즈, 물리적 제품 디자인, 가구 제작, MES, ERP, 자체 제작 제품, 판촉물, 인쇄물, 촬영 감독, 페인팅, 봉제, 공예품, 건축 디자인, 전시 및 이벤트 기획 제작 등 비슷한 일이라도 오프라인 협업이나 외부와의 접촉 요인이 많은 환경
</div><!--tabCon2-->
<div class="tabCon3 tab-item"> <p><p>
<center><b>🔍 필독 🔍</b>
<p>✧⋄⋆⋅⋆⋄✧⋄⋆⋅⋆⋄✧⋄⋆⋅⋆⋄✧⋄⋆⋅⋆⋄✧<p></center>
<p>
<center>💛달글 호칭💛<br>
씽크빅 필요!<p><br><p>
<p><font style="background-color:#e7f6ff;">⭕️ 가능해요 ⭕️</font><br>
일상 공유<br>
정보 공유<br>
토론<br>
업무 관련 소통<br>
<p><br>
<p><font style="background-color:#e7f6ff;">❌ 금지해요 ❌</font><br>
캡쳐 및 외부 유출 금지<br>
홍보, 저격, 조롱, 분란조장 금지<br>
유명인 까댓 금지<br>
어그로는 먹금 후 대댓 금지 <br><p>
디지털 업무로서 수익성이 띄는<br>일을 할 경우(수입 없어도 OK)<br> 달글을 달려주시고 목적이 없는<Br>단순 취미인 경우는 전문 달글 이용바랍니다. <br>
<p>
<p><br>
<p>기타 필요한 규칙은 달글 운영 시 <br>필요에 따라 업데이트 예정입니다. <p><br>건의사항<p>(자주 확인 못함 주의)<br><a href="https://cafe.daum.net/subdued20club/VrjL/868332">💌💌💌</a><br>(키워드, 이미지, 기타 정보 추가 시)<p><br></center>
</div><!--tabCon3-->
</div><!--content-->
<div class="bars">
<label for="open" class="bar-open"></label>
</div><!--bar-->
<p>
<style>
.container {
text-align: center; /* 텍스트를 중앙 정렬 */
}
.typing-txt {
position: relative;
display: inline-block;
font-size: 15px; /* 글씨 크기 수정 */
color: #ffffff; /* 글씨 색깔 수정 */
font-weight: 700; /* 글씨체 두껍게 설정 */
-webkit-text-stroke: 1px #e0e9f0;
text-shadow:
-2px -2px 0 #9cd0f4, /* 텍스트 테두리 효과 */
</style>
<div class="container">
<p class="typing-txt">∴∵∴ ୨୧ ∴∵∴ ୨୧ ∴∵∴ ୨୧ ∴∵∴</p>
</div>
<p><br><p>
<style>
.mp3 {width: 200px;border-radius: 20px;background: #edeef4;margin: 0 auto;box-shadow: -5px -5px 10px #f5f6f9, 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 #f5f6f9, 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: #edeef4;box-shadow: -5px -5px 10px #f5f6f9, 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/GdcmyYSeiBY?si=IM6IZVQMHXVC2IGT" 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>
<p><br><p>
<style>
div > #mar-name { /* 상단바 스타일 */
position:fixed;
top:0;
left:0;
width:100%;
padding: 13px; /* 높이 */
font-size: 13px; /* 폰트 크기 */
color: #0c0c0c; /* 폰트 색상 */
background: #e2f0f9 !important; /* 상단바 배경색 */
z-index:9999;
}
h3 { /* 제목 스타일 */
font-size: 13px !important; /* 폰트 크기 */
color: #0c0c0c; /* 폰트 색상 */
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 id="mar-name">
<marquee>
디지털 컨텐츠 제작, 디지털 노마드 소통 달글˚ · 🌙⋆｡˚
</marquee>
</div>
<style>
input[type="radio"] {display: none;}
.iconWrap, .window, .menuWrap {margin: 5; padding:5; box-sizing: border-box;}
/* 아이콘 */
.iconWrap > .icon-item {display: inline;}
.icon-item > label {display:inline-block;width:60px;height:40px;}
/* 아이콘 배경 */
.iconOpen1 {background: url('https://t1.daumcdn.net/cafeattach/1IHuH/3df345deeef10c7691734d5847f20f2adcef461c') no-repeat center / cover;}
.iconOpen2 {background: url('https://t1.daumcdn.net/cafeattach/1IHuH/3df345deeef10c7691734d5847f20f2adcef461c') no-repeat center / cover;}
.iconOpen3 {background: url('https://t1.daumcdn.net/cafeattach/1IHuH/3df345deeef10c7691734d5847f20f2adcef461c') no-repeat center / cover;}
/* 폰트 크기 설정 */
p {
text-align: center;
font-size: 1em;
margin-bottom: 10px;
}
/* 강조된 텍스트 스타일 */
.highlight {
background-color: #d2eafd;
font-weight: bold;
padding: 5px;
}
/* 밑줄 스타일 */
u {
text-decoration: underline;
}
/* 인터넷 창 */
.window {display: none;position: fixed;z-index: 9999;;width: 75%;height: 75vw;min-width: 280px;min-height: 280px;max-width: 600px;max-height: 600px;border: 1px solid rgba(0, 0, 0, .2);border-radius: 5px;overflow: hidden;background: #fff;box-shadow: 0 0 20px rgba(0, 0, 0, .05);}
.window.windowWrap1 {top:20%;left: 15%;}
.window.windowWrap1 .uiWrap {background: #b5baed;}
.window.windowWrap2 {bottom:20%; right: 20%;}
.window.windowWrap2 .uiWrap {background: #bad9b4;}
.window.windowWrap3 {top:50%; left: 58%;transform: translate(-50%, -50%);}
.window.windowWrap3 .uiWrap {background: #9fd5d7;}
.window .uiWrap {position: relative;text-align: right;line-height: 30px;}
.window .uiWrap > label {display: inline-block;text-align:center;width: 30px;color: rgba(0, 0, 0, .5);}
.window .uiWrap > label[for^="min"] {display: none;}
.window .addWrap {position: relative;border-bottom: 1px solid rgba(0, 0, 0, .2);padding:5px;text-align: center;}
.window .addWrap > input {padding: 5px 15px;border: 0;border-radius: 100px;background: rgba(0, 0, 0, .1);}
.window .textWrap {height: calc(75vw - 68px);max-height:532px;overflow-y: scroll;padding:0 10px;}
/* 메뉴표시줄 */
.menuWrap {display: flex;align-items: center;position: fixed;bottom:0;left: 0;z-index:9998;width: 100%;height: 50px;background: rgba(255, 255, 255, .8);box-shadow: 0 0 5px rgba(0, 0, 0, .2);backdrop-filter:blur(5px);}
.menuWrap .menu-item > label {display: none;position: relative;;width: 35px;height: 35px;margin-left: 7px;border-radius: 5px;box-shadow: 0 0 3px rgba(0, 0, 0, .1);background-position: center;background-repeat: no-repeat;background-size: 25px;background-color: rgba(255, 255, 255, .5);}
.menuWrap .menu-item > label::after {content:'';position: absolute;bottom:0;left: 50%;transform: translateX(-50%);width: 18px;height: 3px;background: rgba(0, 0, 0, .5);border-radius: 5px;transition: width .3s;}
.menuWrap .menu1 > label {background-image: url('https://t1.daumcdn.net/cafeattach/1IHuH/3df345deeef10c7691734d5847f20f2adcef461c');border: 2px solid pink;}
.menuWrap .menu2 > label {background-image: url('https://t1.daumcdn.net/cafeattach/1IHuH/3df345deeef10c7691734d5847f20f2adcef461c');border: 2px solid powderblue;}
.menuWrap .menu3 > label {background-image: url('https://t1.daumcdn.net/cafeattach/1IHuH/3df345deeef10c7691734d5847f20f2adcef461c');border: 2px solid lightyellow;}
/* 인터넷창 열기 */
#openBtn1:checked ~ .windowWrap1,
#openBtn2:checked ~ .windowWrap2,
#openBtn3:checked ~ .windowWrap3 {display: block;}
#openBtn1:checked ~ .menuWrap .menu1 > label,
#openBtn2:checked ~ .menuWrap .menu2 > label,
#openBtn3:checked ~ .menuWrap .menu3 > label {animation: up .6s .3s alternate, scale1 .3s alternate}
/* 메뉴표시줄 아이콘 */
#openBtn1:checked ~ .menuWrap .menu1 > label,
#openBtn2:checked ~ .menuWrap .menu2 > label,
#openBtn3:checked ~ .menuWrap .menu3 > label {display: inline-block;}
/* 창 내리기 */
#down1:checked ~ .menuWrap .menu1 > label,
#down2:checked ~ .menuWrap .menu2 > label,
#down3:checked ~ .menuWrap .menu3 > label
{display: inline-block;border-color: transparent; box-shadow: unset;background-color: unset;animation: down .4s .3s alternate, scale2 .3s alternate;}
#down1:checked ~ .menuWrap .menu1 > label::after,
#down2:checked ~ .menuWrap .menu2 > label::after,
#down3:checked ~ .menuWrap .menu3 > label::after {width:10px;background: rgba(0, 0, 0, .35);}
/* 창 키우기 */
#max1:checked ~ .windowWrap1 {width:100%;max-width: 100%;height:100%;max-height:calc(100% - 50px);top:0;left: 0;}
#max2:checked ~ .windowWrap2 {width:100%;max-width: 100%;height:100%;max-height:calc(100% - 50px);top:0;left: 0;}
#max3:checked ~ .windowWrap3 {width:100%;max-width: 100%;height:100%;max-height:calc(100% - 50px);top:0;left: 0;transform: unset;}
input[id^="max"]:checked + input + input + div label[for^="max"] {display: none;}
input[id^="max"]:checked + input + input + div label[for^="min"] {display: inline;}
input[id^="max"]:checked + input + input + div .textWrap {height: calc(100% - 68px);max-height:calc(100% - 68px);}
/* :hover */
.window:hover {z-index: 99999;}
/* animation */
@keyframes up {
50% {background-position: center -.5px;}
}
@keyframes down {
50% {background-position: center 10px;}
}
@keyframes scale1 {
50% {background-size: 20px;}
}
@keyframes scale2 {
50% {background-size: 20px;}
}
</style>
<!--인터넷창 열기-->
<input type="radio" name="window1-btn" id="openBtn1">
<input type="radio" name="window2-btn" id="openBtn2">
<input type="radio" name="window3-btn" id="openBtn3">
<!--아이콘-->
<div class="iconWrap">
<div class="icon-item"><label for="openBtn1" class="iconOpen1"></label></div><!--icon-item-->
<div class="icon-item"><label for="openBtn2" class="iconOpen2"></label></div><!--icon-item-->
<div class="icon-item"><label for="openBtn3" class="iconOpen3"></label></div><!--icon-item-->
</div><!--iconWrap-->
<input type="radio" name="window1-btn" id="down1">
<input type="radio" name="window1-size" id="max1">
<input type="radio" name="window1-size" id="min1">
<input type="radio" name="window1-btn" id="close1">
<!--인터넷창1-->
<div class="window windowWrap1">
<div class="uiWrap">
<label for="down1">-</label>
<label for="max1">ㅁ</label>
<label for="min1">=</label>
<label for="close1">X</label>
</div><!--uiWrap-->
<div class="addWrap">
<input type="text" value="디지털노마드정의">
</div><!--addWrap-->
<div class="textWrap">
<p><br>
<span class="highlight">디지털 노마드의 매력 포인트😍 </span><p><br>
<b>장소에 구애받지 않는 자유</b><br>
특정 장소에 얽매이지 않고 어디서든 인터넷이 되는 곳에서 일할 수 있어, 세계 각국을 여행하며 일하는 자유를 누릴 수 있습니다.<p><br>
<b>유연한 근무 시간</b><br> 대부분의 디지털 노마드 직업은 정해진 출근 시간이 없고, 원하는 시간에 일할 수 있는 유연함이 있어 일과 삶의 균형을 스스로 조절할 수 있습니다.<p><br>
<b>다양한 문화 체험</b><br> 새로운 도시와 국가를 여행하면서 다양한 문화와 사람들을 만나고 경험하는 것이 디지털 노마드 라이프의 큰 장점입니다.<p><br>
<b>일과 여행의 병행</b><br> 여행과 업무를 동시에 할 수 있어 일상 속에서 모험과 새로운 경험을 즐길 수 있습니다.<p><br>
<b>개인 성장</b><br> 자기 주도적으로 시간과 업무를 관리하는 능력이 향상되며, 새로운 환경에서 적응하고 다양한 기술을 배우는 기회가 많습니다.<p><br>
<b>다양한 네트워킹 기회</b><br> 전 세계에서 일하는 디지털 노마드들과 커뮤니티를 형성하며 인적 네트워크를 넓히고, 다양한 프로젝트에 참여할 수 있는 기회가 많습니다.<p><br>
<b>자유로운 삶의 방식</b><br> 사무실이나 정해진 일상에 얽매이지 않고, 자신만의 방식으로 일하고 생활하는 라이프스타일을 선택할 수 있습니다.<p><br>
<b>창의성 증진</b><br> 새로운 환경에서 일하면서 다양한 아이디어와 영감을 얻을 수 있어 창의적인 직업에 특히 적합합니다.<p><br>
<b>원하는 일을 할 수 있는 기회</b><br> 디지털 노마드는 다양한 직업을 선택할 수 있어, 자신의 열정과 관심사에 맞는 일을 하며 즐겁게 일할 수 있습니다.<p><br><p><span class="highlight">디지털 노마드의 단점😱 </span><p><br>
<b>불안정한 수입</b><br> 프리랜서나 계약직으로 일하는 경우가 많아, 고정적인 수입이 없거나 프로젝트에 따라 수입이 변동될 수 있습니다.<p><br>
<b>일과 생활의 경계 모호</b><br> 자유로운 스케줄이 장점이지만, 일과 개인 생활의 경계가 흐려져 과도한 업무나 스트레스를 받을 수 있습니다.<p><br>
<b>외로움과 고립감</b><br> 장기간 혼자 여행하거나 원격으로 일하다 보면 가족이나 친구와 떨어져 고립감을 느끼거나 외로워질 수 있습니다.<p><br>
<b>인터넷 환경 의존</b><br> 디지털 노마드는 안정적인 인터넷 연결이 필수인데, 인터넷 속도나 접속이 불안정한 지역에서는 업무가 어려워질 수 있습니다.<p><br>
<b>규칙적인 루틴 부족</b><br> 장소를 자주 이동하거나 시간표가 불규칙하다 보니, 규칙적인 생활 습관을 유지하는 데 어려움을 겪을 수 있습니다.<p><br>
<b>의료 및 보험 문제</b><br> 국가마다 의료 시스템이 다르고, 여행 중에 발생하는 건강 문제를 해결하기 위한 보험 처리와 의료 접근이 어려울 수 있습니다.<p><br>
<b>직업적 성장의 한계</b><br> 혼자 일하는 경우가 많아 직장 내에서의 승진, 네트워킹, 멘토링 등 직업적 성장을 위한 기회가 상대적으로 부족할 수 있습니다.<p><br>
<b>세금 및 법적 문제</b><br> 각 나라의 세금 규정이 다르기 때문에 여러 국가에서 일할 경우 복잡한 세금 신고와 법적 문제에 직면할 수 있습니다.<p><br>
<b>장기적인 안정성 부족</b><br> 꾸준한 직장 생활과 달리, 프로젝트 기반의 업무나 프리랜서 생활은 장기적인 안정성을 보장받기 어려울 수 있습니다.<p><br>
<b>일과 여행 간의 균형 문제</b><br> 여행과 일을 동시에 하다 보면 양쪽에 모두 집중하기 어려워, 여행을 충분히 즐기지 못하거나 업무 효율이 떨어질 수 있습니다.<p><br><br>
</p>
</div><!--textWrap-->
</div><!--window windowWrap1-->
<input type="radio" name="window2-btn" id="down2">
<input type="radio" name="window2-size" id="max2">
<input type="radio" name="window2-size" id="min2">
<input type="radio" name="window2-btn" id="close2">
<!--인터넷창2-->
<div class="window windowWrap2">
<div class="uiWrap">
<label for="down2">-</label>
<label for="max2">ㅁ</label>
<label for="min2">=</label>
<label for="close2">X</label>
</div><!--uiWrap-->
<div class="addWrap">
<input type="text" value="할 수 있는 일">
</div><!--addWrap-->
<div class="textWrap">
<p>
<p><br>
<span class="highlight">할 수 있는 일 리스트업📃 </span><p><br>
수익성을 띄는 업무<br>
달글 소통을 바탕으로 천천히<br>리스트업 예정.<br>
</p>
</div><!--textWrap-->
</div><!--window windowWrap2-->
<input type="radio" name="window3-btn" id="down3">
<input type="radio" name="window3-size" id="max3">
<input type="radio" name="window3-size" id="min3">
<input type="radio" name="window3-btn" id="close3">
<!--인터넷창3-->
<div class="window windowWrap3">
<div class="uiWrap">
<label for="down3">-</label>
<label for="max3">ㅁ</label>
<label for="min3">=</label>
<label for="close3">X</label>
</div><!--uiWrap-->
<div class="addWrap">
<input type="text" value="디지털노마드이미지">
</div><!--addWrap-->
<div class="textWrap">
<p>
<img src="https://t1.daumcdn.net/cafeattach/1IHuH/8d446a9d3e1324d7a851f6c659376e19a81b1d8d">
<img src="https://t1.daumcdn.net/cafeattach/1IHuH/d3a9ad6befec0ea98011dbc3e988695f2c353679">
<img src="https://t1.daumcdn.net/cafeattach/1IHuH/302641a340639b4cbc7d198fc34ef81b0846a55c">
<img src="https://t1.daumcdn.net/cafeattach/1IHuH/03e31ba531a6532fac83e24a88585d70bde1dc3c">
<img src="https://t1.daumcdn.net/cafeattach/1IHuH/83eb5bbe36391bdae1140814e4c03074a29d542a">
<img src="https://t1.daumcdn.net/cafeattach/1IHuH/22f644236f28078032d243e061e91e18e78da414"> <img src="https://t1.daumcdn.net/cafeattach/1IHuH/3e3c182661a18b8a7822e58c792a453e489d3ac0">
<img src="https://t1.daumcdn.net/cafeattach/1IHuH/4c6ec024604b13a3a0c802238f6bbde5ddc1781e">
<img src="https://t1.daumcdn.net/cafeattach/1IHuH/d11d8395fd737d45c55a0175f5af8a76be3862b5">
<img src="https://t1.daumcdn.net/cafeattach/1IHuH/8834817a0a6eea61e273be9068839d441515493b"><img src="https://t1.daumcdn.net/cafeattach/1IHuH/56719008883d678a71c6a78ed77bfc194e4716f3"><p><br>사진 추가 요청 시 넣어드립니다.<p><br>
</p>
</div><!--textWrap-->
</div><!--window windowWrap3-->
<!--하단 메뉴-->
<div class="menuWrap">
<div class="menu-item menu1"><label for="openBtn1"></label></div><!--menu-item menu1-->
<div class="menu-item menu2"><label for="openBtn2"></label></div><!--menu-item menu2-->
<div class="menu-item menu3"><label for="openBtn3"></label></div><!--menu-item menu3-->
</div><!--menuWrap--> </style></div>
<style>
input[id="menuicon"] {display:none;}
input[id="menuicon"] + ul {display:block;position:fixed;right:0;top:50%;transform:translateY(-50%);transition:all .35s;text-align:right;z-index:1;}
input[id="menuicon"] + ul > li {display:block;width:50px;height:50px;border:0px solid #f1f1f1;position:relative;margin-top:-1px;}
input[id="menuicon"] + ul > li > label {
display: block;
cursor: pointer;
width: auto;
height: 80px;
background: url('https://t1.daumcdn.net/cafeattach/1IHuH/0116716b3d9f4f83392f38944101173608fffb7f') no-repeat center/contain; margin-top: 180px;}
input[id="menuicon"] + ul > li:nth-child(1) label span {display:block;position:absolute;width:50%;height:3px;border-radius:30px;background:#333;transition:all .35s;}
input[id="menuicon"] + ul > li:nth-child(1) label span:nth-child(1) {top:30%;left:50%;transform:translateX(-50%);}
input[id="menuicon"] + ul > li:nth-child(1) label span:nth-child(2) {top:50%;left:50%;transform:translate(-50%,-50%);}
input[id="menuicon"] + ul > li:nth-child(1) label span:nth-child(3) {bottom:30%;left:50%;transform:translateX(-50%);}
input[id="menuicon"]:checked + ul {z-index:2;right:50%;}
input[id="menuicon"]:checked + ul > li:nth-child(1) label {z-index:2;right:50%;}
input[id="menuicon"]:checked + ul > li:nth-child(1) label span:nth-child(1) {top:50%;left:50%;transform:translate(-50%,-50%) rotate(45deg);}
input[id="menuicon"]:checked + ul > li:nth-child(1) label span:nth-child(2) {opacity:0;}
input[id="menuicon"]:checked + ul > li:nth-child(1) label span:nth-child(3) {bottom:50%;left:50%;transform:translate(-50%,50%) rotate(-45deg);}
div[class="sidebar"] {
width: 50%;
height: 100%;
background: rgba(245, 245, 245, 0.7); /* 반투명 흰색 */
position: fixed;
top: 50px;
right: -50%;
z-index: 2;
transition: all .35s;
padding: 20px; /* 위쪽과 좌우 여백 추가 */
text-align: center; /* 내용 가운데 정렬 */
font-size: 1em;
}
input[id="menuicon"]:checked + ul + div {right:0;}
input[id*="menuicon"] + ul + div+ label{display:none;}
input[id*="menuicon"]:checked + ul + div+ label{display:block;position:fixed;top:5;left:5;width:100%;height:100%;background:rgba(0,0,0,0);z-index:3;}
</style>
<input type="checkbox" id="menuicon">
<ul>
<li>
<label for="menuicon">
<!--햄버거 세줄의 span-->
</label>
</li>
</ul>
<div class="sidebar">
<p>부속 달글<p>
생기면<p>
추가 예정<p>
.<p>
.<p>
.<p>
<!--사이드바 속 내용-->
</div><!--사이드바 닫는 div태그-->
<label for="menuicon"></label><!--사이드 바 바깥의 label-->
<style>
/* 본문 */
body {
background: transparent;
}
.bg_mine, .list_comment li {
background: transparent !important;
}
/* 댓글창 배경색 */
#btn_allcmt {display:none;}
#mArticle li div > span > span:first-child {display:none !important;}
.txt_date{display:none !important;}
.cafeview_cmt {
background: #eaf6f8;
}
.cafeview_cmt li {
background: transparent;
margin: 10;
border: 1;
position: relative;
}
</style>
<p><br>
<style>
details {
text-align: center;
}
summary {
text-align: center;
font-weight: bold; /* summary 텍스트 굵게 */
cursor: pointer;
color: white; /* 글씨체 흰색 */
text-shadow: 2px 2px 4px rgba(135, 206, 250, 0.8); /* 하늘빛 그림자 */
padding: 10px;
border-radius: 5px;
}
summary::-webkit-details-marker {
display: none; /* 크롬, 사파리 등 웹킷 기반 브라우저에서 마커 제거 */
}
summary::marker {
display: none; /* 파이어폭스 등 다른 브라우저에서 마커 제거 */
}
</style>
<details>
<summary>천ㄴ천히 굴러가는 달글ㅎ <br>이용 안내가 필요하다면(클릭)</summary>
<b>할말 없을 때</b><br>
인사하기 ㅎㅇㅎㅇ<p><br>
<b>관련 아무말</b><br>
나는야 디지털 노마드가 꿈ㅎ<br>
퇴사하고 버츄얼 캐릭터 만들거야<p><br>
<b>정보성</b><br>
추천 앱, 추천 사이트<br>
새로운 코딩 스킬<br>
생산성 높이는 방법<br>
관련 서적 추천<p><br>
<b>토론성</b><br>
장기여행과 재정관리는 어떻게?<br>
이런 기술 어떻게 생각?<br>
이거 부업으로 어떻게 생각?<p><br>
<b>사담성</b><br>
와이파이 좋은 카페 왔어<br>
일하다 운동으로 스트레스 해소 중<br>
하루 루틴이 어떻게 돼?<br>
여기 이탈리아야!<br>
친구랑 스터디 카페야!(사진)<br>
<p><br>
</details>
<div class="zigzag">
<img src="https://t1.daumcdn.net/cafeattach/1IHuH/0dad70339a06a811adb39b1173232492e8e5dd47">
</div>
<style> /* 지그재그 스타일 */
div > .zigzag { position:fixed;
z-index: 99;
width: 80px;
height: 80px;
animation: zigzag 10s infinite linear;
pointer-events:none;
background:none !important;
}
.zigzag-img {
width: 45px; /* 원하는 크기로 조정 */
height: auto; /* 비율을 유지하면서 크기 변경 */
}
@keyframes zigzag {
0% {top:0; left:80%;}
25% {top:25%; left:0;}
50% {top:50%; left:80%;}
75% {top:75%; left:0;}
100% {top:99%; left:80%;}
}
</style>
</div></div><p><br><br></p><p> </p><p> </p><p> </p>
<!-- -->
]]>
카페 게시글
일반게시판
디지털 컨텐츠 제작, 디지털 노마드 소통 달글˚ · 🌙⋆｡˚
챠코
추천 0
조회 61
24.09.18 19:07
댓글 13
다음검색
첫댓글 ㅇㅇㅇㅇ
테스트
🪽천천히 굴러가는 달글입니다. 북마크 추가 필수! 🪽
디지털 노마드의 정의
●완 디지털 노마드 사진
할 수 있는 일 리스트
미리캔버스, 크몽, 스마트스토어, 전자책, 유튜브, SNS운영, 블로그,
블로그운영(네이버,티스토리등)
인스타그램 운영
이모티콩만들기
어플로 좀좀따리벌기
아이콘만들기
스톡사진등록하기
물건 떼와서 팔기
유튜브채널 운영
쳇gpt이용해서 수익얻기
부속 달글
무료 툴 배우기, 일정관리, AI 정보 달글
교육/강의 자료 부속 달글(리뷰 추천 가능)
본질은 수익과 귀결되어야 하므로 취미로만 하실 분 out
일할 때 듣기 좋은 음악 리스트
프로그램 단축키
●완 달주에게 링크 넣기
마우스 우클릭
금지