인스타그램

<div class="figure-html" data-ke-type="html" data-source="<style> /* :root */ :root { --color-main: #fff; --color-white: #fff; --color-black: #000; --color-gray: #eee; --color-sub: #458eff; --color-shadow: rgba(0,0,0,.05); --nav-space: 50px; } body {background: #fff;} #mArticle > div {margin:0;} .article_content {padding:0;} .figure-html {margin:0;} .figure-html .feed .pic > a {position: absolute;top:0;left:0;width:100%;height:100%;margin-left: 0 !important;} .figure-html .feed .pic > a > img {height:auto;margin: 0 !important;} .write_cmt, #comment_empty p, .writeNewCommentBtn * {display: none !important;} .writeNewCommentBtn {background: url('https://t1.daumcdn.net/cafeattach/1XKJt/d0230785a9f22c7bacfbb107cf9fa9ad06ee0f7f') no-repeat center / contain;font-size:0 !important; border: 0 !important;border-radius: unset !important;} input[name="cont-tab"], input[type="radio"], input[type="checkbox"] {display: none;} .instaCont {position: relative;background: #fff;} .instaCont * {margin: 0; padding: 0;box-sizing: border-box;color:#000;} .instaCont a {text-decoration: none !important; color: #000 !important;} /* 공지 영역 */ .notice {display: none;position: fixed;top:0;left: 0;z-index:9999;width: 100%;height: calc(100% - 50px);text-align: center;background: #fff;overflow-y: scroll;padding: 20px;} .otherPage {padding-bottom: 20px;} /* other, my 공통 영역 */ .page-top {padding:20px 0 20px 15px; text-align: left;box-shadow: 0 2px 3px rgba(0,0,0,.05);} .page-top a {font-size: 18px;font-weight: bold;text-decoration: none;} .page-info {display: flex;justify-content: space-around;align-items: center;} .profile-wrapper {padding:15px;} .profile-wrapper > div {width: 70px;padding-bottom: 70px;border-radius: 100%;border: 1px solid #eee;} .info-wrapper {display: flex;justify-content:space-around;align-items:center;width:100%; text-align: center;padding: 15px;} .info-wrapper p {font-size: 16px;font-weight: 600;} .info-wrapper .after-follower, .info-wrapper .after-following {display: none;} .info-wrapper span {font-size: 12px;} .info-text {margin-left: 15px;margin-bottom: 20px; text-align: left;} /* otherPage */ .otherPage .follow-btn {display:block;padding:10px 0; border-radius:5px;background:#458eff;color: #fff;text-align: center;margin: 0 15px;} .off {color:#fff;} .on {display: none;} .otherPage .followerList, .my-page .followingList {display: none;position: fixed;top:0;left: 0;z-index:999;width: 100%;height: 100%;background: #fff;} /* 리스트 공통 */ .list-top {text-align: left;padding: 20px 0;box-shadow: 0 2px 5px rgba(0,0,0,.05);} .list-top * {font-size: 18px;margin-left: 20px;font-weight: bold;} .list-top span {font-size: 16px;} .before-list {display: flex;justify-content: center;align-items: center;height:calc(100% - 50px);} .after-list {display: none;justify-content: space-between;align-items: center;padding: 20px 0;} .after-list .list-pf {display: flex;align-items: center;} .after-list .profile {display: inline-block;width: 60px;height: 60px;border: 1px solid #eee;border-radius: 100%;margin:0 20px;} .after-list > label {display: inline-block;padding:8px 12px; background: #eee;border-radius: 5px;margin-right: 20px;font-size: 14px;} .after-list > div > label {display: flex;align-items: center;} .my-page {display: none;position: fixed;top: 0;left: 0;z-index:999;width: 100%;height: 100%;background: #fff;overflow-y: scroll;} .my-page .feed {display: grid;grid-template-columns: repeat(3, 1fr);width: 100%;margin-bottom: 50px;} .my-page .feed .pic {position: relative;border: 1px solid #fff;} .my-page .feed .pic::before {content: '';display: block;padding-bottom: 100%;} .my-page .feed .pic img {position: absolute;top:50%;left: 50%;transform:translate(-50%,-50%);width: 100%;object-fit: cover;} /* 하단 메뉴 */ .bottom-nav {display: flex;justify-content: space-between;align-items: center;position: fixed;bottom:0;left:0;z-index:9999;width: 100%;height:50px;background: #fff;box-shadow: 0 -2px 5px rgba(0,0,0,.05);} .bottom-nav label {display: flex;justify-content: center;align-items: center;flex:1; text-align: center;} .bottom-nav label span {display: block;width: calc(50px / 1.5);height: calc(50px / 1.5);} .bottom-nav label:nth-child(1) span {background: url('https://t1.daumcdn.net/cafeattach/1XKJt/367f74542586dfd073077693d1ff2917e78b22f1') no-repeat center / cover;} .bottom-nav label:nth-child(2) span {background: url('https://t1.daumcdn.net/cafeattach/1XKJt/367f74542586dfd073077693d1ff2917e78b22f1') no-repeat center / cover;} .bottom-nav label:nth-child(3) span {border-radius: 100%;border: 1px solid #eee;} /* 인스타 프로필 A */ .otherPage .profile-wrapper > div, .my-page .followingList .after-list .profile { background:url('#') no-repeat center / cover;} /* 인스타 프로필 B */ .otherPage .followerList .after-list .profile, .my-page .profile-wrapper > div, .bottom-nav label:nth-child(3) span {background: url('#') no-repeat center / cover;} /* pc */ #content .notice, #content .my-page {position:relative;} /* 팔로하기 */ #followBtn:checked ~ .otherPage .page-profile .before-follower {display: none;} #followBtn:checked ~ .otherPage .page-profile .after-follower {display: block;} #followBtn:checked ~ .otherPage .page-profile .follow-btn > .off {display: none;} #followBtn:checked ~ .otherPage .page-profile .follow-btn > .on {display: block;} #followBtn:checked ~ .otherPage .page-profile .follow-btn {background:#eee;color: #000;} /* 팔로잉 중 */ #followBtn:checked ~ .otherPage .page-profile .before-list {display: none;} #followBtn:checked ~ .otherPage .page-profile .after-list {display: flex;} #followBtn:checked ~ .my-page .page-profile .before-list {display: none;} #followBtn:checked ~ .my-page .page-profile .after-list {display: flex;} #followBtn:checked ~ .my-page .page-profile .before-following {display: none;} #followBtn:checked ~ .my-page .page-profile .after-following {display: block;} /* 팔로워 클릭 */ #followerOpenBtn:checked ~ .followerList {display: block;} #followBtn:checked ~ .otherPage .page-profile .follow-btn {background:#eee;border-color: #eee;} /* 팔로잉 클릭 */ #followingListBtn:checked ~ .followingList {display: block;} /* 하단 메뉴 클릭 */ #contBtn2:checked ~ .instaCont .notice, #contBtn3:checked ~ .instaCont .my-page {display: block;} #contBtn2:checked ~ .instaCont .otherPage, #contBtn3:checked ~ .instaCont .otherPage {display: none;} /* 스크롤바 없애기 */ #content .notice::-webkit-scrollbar, #content .my-page::-webkit-scrollbar {display: none;} /* 댓글창 */ .cafeview_subject, .banner_wrapper, #cafeview_paging {display: none;} .write_cmt {display: none !important;} .cafeview_cmt {margin-bottom: 50px !important;background: #fff;} .cafeview_cmt ul {display: grid;grid-template-columns: repeat(3, 1fr);grid-template-rows: repeat(3,1fr);height:100vw;overflow:hidden;} .cafeview_cmt ul li {position: relative;padding: 0;border:1px solid #fff;} .cafeview_ctm li * {position: absolute;top:0;left: 0;width: 100%;height: 100%;} .cafeview_cmt .cmt_info {display: none;} .cafeview_cmt ul li:has(.desc_cmt), /* 글만 있는 댓글 안 보이게 */ .cafeview_cmt .desc_cmt:not(.attached) {display: none;} .cafeview_cmt ul li:has(.attached) {display: block;} .cafeview_cmt ul li:has(.kakao_emoticon) {display: none;} .cafeview_cmt li * {margin: 0 !important;padding:0 !important;} .cafeview_cmt li .cmt_wrap_inner, .attached, .attached img, .cmt_img_wrapper {position:absolute !important;top:0 !important;left:0 !important; width:100% !important; height:100% !important;} .cmt_img_wrapper {z-index:9;opacity:0 !important;} .cafeview_cmt ul li:nth-child(1) {display: none;} .cafeview_cmt ul li[id$="Li_1"] {display: block;} .cafeview_cmt li > div > a, .cafeview_cmt .reply_on > div > *:nth-child(1), .cafeview_cmt .tit_cmt {display: none;} .cafeview_cmt .allcmtwrap {display: none !important;} .cafeview_cmt .bg_mine {background: unset !important;} .cafeview_cmt > span {display: none;} </style> <input type="radio" name="cont-tab" id="contBtn1"> <input type="radio" name="cont-tab" id="contBtn2"> <input type="radio" name="cont-tab" id="contBtn3">  <div class="instaCont"> <input type="checkbox" id="followBtn">  <div class="cont-item notice"> 신입스시는 공지 한번씩 읽고 달리기♡<br> <img src="#"> </div> <div class="cont-item otherPage"> <div class="page-top"> <a href="#">realseukdal</a> </div> <div class="page-profile"> <div class="page-info"> <div class="profile-wrapper"> <div></div> </div> <div class="info-wrapper"> <div> <p>9</p> <span>게시물</span> </div> <input type="checkbox" id="followerOpenBtn"> <label for="followerOpenBtn"> <p class="before-follower">0</p> <p class="after-follower">1</p> <span>팔로워</span> </label> <div class="followerList"> <div class="list-top"> <label for="followerOpenBtn">←</label> <span>realseukdal<span> </div> <div class="before-list">팔로워가 없습니다.</div> <div class="after-list"> <div class="list-pf"> <label for="contBtn3"> <span class="profile"></span> <p>스시</p> </label> </div> <label for="followBtn">삭제</label> </div> </div> <div> <p>0</p> <span>팔로잉</span> </div> </div> </div> <div class="info-text"> ㅎㅇㅎㅇ<br>슼달임 </div> <div> <label for="followBtn" class="follow-btn"><span class="off">팔로우</span><span class="on">팔로잉</span></label> </div> </div> </div> <div class="cont-item my-page"> <div class="page-top"> <a href="#">스시</a> </div> <div class="page-profile"> <div class="page-info"> <div class="profile-wrapper"> <div></div> </div> <div class="info-wrapper"> <div> <p>12</p> <span>게시물</span> </div> <div> <p>0</p> <span>팔로워</span> </div> <input type="checkbox" id="followingListBtn"> <label for="followingListBtn"> <p class="before-following">0</p> <p class="after-following">1</p> <span>팔로잉</span> </label> <div class="followingList"> <div class="list-top"> <label for="followingListBtn">←</label> <span>스시<span> </div> <div class="before-list">팔로워가 없습니다.</div> <div class="after-list"> <div class="list-pf"> <label for="contBtn1"> <span class="profile"></span> <p>realseukdal</p> </label> </div> <label for="followBtn">삭제</label> </div> </div> </div> </div> <div class="info-text"> 여기가<br>내피드 </div> </div> <div class="feed"> <div class="pic"> <img src="https://ibb.co/k3Ptd2k" alt="feed-pic"> </div> <div class="pic"> <img src="#" alt="feed-pic"> </div> <div class="pic"> <img src="#" alt="feed-pic"> </div> <div class="pic"> <img src="#" alt="feed-pic"> </div> <div class="pic"> <img src="#" alt="feed-pic"> </div> <div class="pic"> <img src="#" alt="feed-pic"> </div> <div class="pic"> <img src="#" alt="feed-pic"> </div> <div class="pic"> <img src="#" alt="feed-pic"> </div> <div class="pic"> <img src="#" alt="feed-pic"> </div> <div class="pic"> <img src="#" alt="feed-pic"> </div> <div class="pic"> <img src="#" alt="feed-pic"> </div> <div class="pic"> <img src="#" alt="feed-pic"> </div> </div> </div> </div> <div class="bottom-nav"> <label for="contBtn1"><span></span></label> <label for="contBtn2"><span></span></label> <label for="contBtn3"><span></span></label> </div> "><div data-ke-class="article"><style> /* :root */ :root { --color-main: #fff; --color-white: #fff; --color-black: #000; --color-gray: #eee; --color-sub: #458eff; --color-shadow: rgba(0,0,0,.05); --nav-space: 50px; } body {background: #fff;} #mArticle > div {margin:0;} .article_content {padding:0;} .figure-html {margin:0;} .figure-html .feed .pic > a {position: absolute;top:0;left:0;width:100%;height:100%;margin-left: 0 !important;} .figure-html .feed .pic > a > img {height:auto;margin: 0 !important;} .write_cmt, #comment_empty p, .writeNewCommentBtn * {display: none !important;} .writeNewCommentBtn {background: url('https://t1.daumcdn.net/cafeattach/1XKJt/d0230785a9f22c7bacfbb107cf9fa9ad06ee0f7f') no-repeat center / contain;font-size:0 !important; border: 0 !important;border-radius: unset !important;} input[name="cont-tab"], input[type="radio"], input[type="checkbox"] {display: none;} .instaCont {position: relative;background: #fff;} .instaCont * {margin: 0; padding: 0;box-sizing: border-box;color:#000;} .instaCont a {text-decoration: none !important; color: #000 !important;} /* 공지 영역 */ .notice {display: none;position: fixed;top:0;left: 0;z-index:9999;width: 100%;height: calc(100% - 50px);text-align: center;background: #fff;overflow-y: scroll;padding: 20px;} .otherPage {padding-bottom: 20px;} /* other, my 공통 영역 */ .page-top {padding:20px 0 20px 15px; text-align: left;box-shadow: 0 2px 3px rgba(0,0,0,.05);} .page-top a {font-size: 18px;font-weight: bold;text-decoration: none;} .page-info {display: flex;justify-content: space-around;align-items: center;} .profile-wrapper {padding:15px;} .profile-wrapper > div {width: 70px;padding-bottom: 70px;border-radius: 100%;border: 1px solid #eee;} .info-wrapper {display: flex;justify-content:space-around;align-items:center;width:100%; text-align: center;padding: 15px;} .info-wrapper p {font-size: 16px;font-weight: 600;} .info-wrapper .after-follower, .info-wrapper .after-following {display: none;} .info-wrapper span {font-size: 12px;} .info-text {margin-left: 15px;margin-bottom: 20px; text-align: left;} /* otherPage */ .otherPage .follow-btn {display:block;padding:10px 0; border-radius:5px;background:#458eff;color: #fff;text-align: center;margin: 0 15px;} .off {color:#fff;} .on {display: none;} .otherPage .followerList, .my-page .followingList {display: none;position: fixed;top:0;left: 0;z-index:999;width: 100%;height: 100%;background: #fff;} /* 리스트 공통 */ .list-top {text-align: left;padding: 20px 0;box-shadow: 0 2px 5px rgba(0,0,0,.05);} .list-top * {font-size: 18px;margin-left: 20px;font-weight: bold;} .list-top span {font-size: 16px;} .before-list {display: flex;justify-content: center;align-items: center;height:calc(100% - 50px);} .after-list {display: none;justify-content: space-between;align-items: center;padding: 20px 0;} .after-list .list-pf {display: flex;align-items: center;} .after-list .profile {display: inline-block;width: 60px;height: 60px;border: 1px solid #eee;border-radius: 100%;margin:0 20px;} .after-list > label {display: inline-block;padding:8px 12px; background: #eee;border-radius: 5px;margin-right: 20px;font-size: 14px;} .after-list > div > label {display: flex;align-items: center;} .my-page {display: none;position: fixed;top: 0;left: 0;z-index:999;width: 100%;height: 100%;background: #fff;overflow-y: scroll;} .my-page .feed {display: grid;grid-template-columns: repeat(3, 1fr);width: 100%;margin-bottom: 50px;} .my-page .feed .pic {position: relative;border: 1px solid #fff;} .my-page .feed .pic::before {content: '';display: block;padding-bottom: 100%;} .my-page .feed .pic img {position: absolute;top:50%;left: 50%;transform:translate(-50%,-50%);width: 100%;object-fit: cover;} /* 하단 메뉴 */ .bottom-nav {display: flex;justify-content: space-between;align-items: center;position: fixed;bottom:0;left:0;z-index:9999;width: 100%;height:50px;background: #fff;box-shadow: 0 -2px 5px rgba(0,0,0,.05);} .bottom-nav label {display: flex;justify-content: center;align-items: center;flex:1; text-align: center;} .bottom-nav label span {display: block;width: calc(50px / 1.5);height: calc(50px / 1.5);} .bottom-nav label:nth-child(1) span {background: url('https://t1.daumcdn.net/cafeattach/1XKJt/367f74542586dfd073077693d1ff2917e78b22f1') no-repeat center / cover;} .bottom-nav label:nth-child(2) span {background: url('https://t1.daumcdn.net/cafeattach/1XKJt/367f74542586dfd073077693d1ff2917e78b22f1') no-repeat center / cover;} .bottom-nav label:nth-child(3) span {border-radius: 100%;border: 1px solid #eee;} /* 인스타 프로필 A */ .otherPage .profile-wrapper > div, .my-page .followingList .after-list .profile { background:url('#') no-repeat center / cover;} /* 인스타 프로필 B */ .otherPage .followerList .after-list .profile, .my-page .profile-wrapper > div, .bottom-nav label:nth-child(3) span {background: url('#') no-repeat center / cover;} /* pc */ #content .notice, #content .my-page {position:relative;} /* 팔로하기 */ #followBtn:checked ~ .otherPage .page-profile .before-follower {display: none;} #followBtn:checked ~ .otherPage .page-profile .after-follower {display: block;} #followBtn:checked ~ .otherPage .page-profile .follow-btn > .off {display: none;} #followBtn:checked ~ .otherPage .page-profile .follow-btn > .on {display: block;} #followBtn:checked ~ .otherPage .page-profile .follow-btn {background:#eee;color: #000;} /* 팔로잉 중 */ #followBtn:checked ~ .otherPage .page-profile .before-list {display: none;} #followBtn:checked ~ .otherPage .page-profile .after-list {display: flex;} #followBtn:checked ~ .my-page .page-profile .before-list {display: none;} #followBtn:checked ~ .my-page .page-profile .after-list {display: flex;} #followBtn:checked ~ .my-page .page-profile .before-following {display: none;} #followBtn:checked ~ .my-page .page-profile .after-following {display: block;} /* 팔로워 클릭 */ #followerOpenBtn:checked ~ .followerList {display: block;} #followBtn:checked ~ .otherPage .page-profile .follow-btn {background:#eee;border-color: #eee;} /* 팔로잉 클릭 */ #followingListBtn:checked ~ .followingList {display: block;} /* 하단 메뉴 클릭 */ #contBtn2:checked ~ .instaCont .notice, #contBtn3:checked ~ .instaCont .my-page {display: block;} #contBtn2:checked ~ .instaCont .otherPage, #contBtn3:checked ~ .instaCont .otherPage {display: none;} /* 스크롤바 없애기 */ #content .notice::-webkit-scrollbar, #content .my-page::-webkit-scrollbar {display: none;} /* 댓글창 */ .cafeview_subject, .banner_wrapper, #cafeview_paging {display: none;} .write_cmt {display: none !important;} .cafeview_cmt {margin-bottom: 50px !important;background: #fff;} .cafeview_cmt ul {display: grid;grid-template-columns: repeat(3, 1fr);grid-template-rows: repeat(3,1fr);height:100vw;overflow:hidden;} .cafeview_cmt ul li {position: relative;padding: 0;border:1px solid #fff;} .cafeview_ctm li * {position: absolute;top:0;left: 0;width: 100%;height: 100%;} .cafeview_cmt .cmt_info {display: none;} .cafeview_cmt ul li:has(.desc_cmt), /* 글만 있는 댓글 안 보이게 */ .cafeview_cmt .desc_cmt:not(.attached) {display: none;} .cafeview_cmt ul li:has(.attached) {display: block;} .cafeview_cmt ul li:has(.kakao_emoticon) {display: none;} .cafeview_cmt li * {margin: 0 !important;padding:0 !important;} .cafeview_cmt li .cmt_wrap_inner, .attached, .attached img, .cmt_img_wrapper {position:absolute !important;top:0 !important;left:0 !important; width:100% !important; height:100% !important;} .cmt_img_wrapper {z-index:9;opacity:0 !important;} .cafeview_cmt ul li:nth-child(1) {display: none;} .cafeview_cmt ul li[id$="Li_1"] {display: block;} .cafeview_cmt li > div > a, .cafeview_cmt .reply_on > div > *:nth-child(1), .cafeview_cmt .tit_cmt {display: none;} .cafeview_cmt .allcmtwrap {display: none !important;} .cafeview_cmt .bg_mine {background: unset !important;} .cafeview_cmt > span {display: none;} </style> <input type="radio" name="cont-tab" id="contBtn1"> <input type="radio" name="cont-tab" id="contBtn2"> <input type="radio" name="cont-tab" id="contBtn3">  <div class="instaCont"> <input type="checkbox" id="followBtn">  <div class="cont-item notice"> 신입스시는 공지 한번씩 읽고 달리기♡<br> <img src="#"> </div> <div class="cont-item otherPage"> <div class="page-top"> <a href="#">realseukdal</a> </div> <div class="page-profile"> <div class="page-info"> <div class="profile-wrapper"> <div></div> </div> <div class="info-wrapper"> <div> <p>9</p> <span>게시물</span> </div> <input type="checkbox" id="followerOpenBtn"> <label for="followerOpenBtn"> <p class="before-follower">0</p> <p class="after-follower">1</p> <span>팔로워</span> </label> <div class="followerList"> <div class="list-top"> <label for="followerOpenBtn">←</label> <span>realseukdal<span> </div> <div class="before-list">팔로워가 없습니다.</div> <div class="after-list"> <div class="list-pf"> <label for="contBtn3"> <span class="profile"></span> <p>스시</p> </label> </div> <label for="followBtn">삭제</label> </div> </div> <div> <p>0</p> <span>팔로잉</span> </div> </div> </div> <div class="info-text"> ㅎㅇㅎㅇ<br>슼달임 </div> <div> <label for="followBtn" class="follow-btn"><span class="off">팔로우</span><span class="on">팔로잉</span></label> </div> </div> </div> <div class="cont-item my-page"> <div class="page-top"> <a href="#">스시</a> </div> <div class="page-profile"> <div class="page-info"> <div class="profile-wrapper"> <div></div> </div> <div class="info-wrapper"> <div> <p>12</p> <span>게시물</span> </div> <div> <p>0</p> <span>팔로워</span> </div> <input type="checkbox" id="followingListBtn"> <label for="followingListBtn"> <p class="before-following">0</p> <p class="after-following">1</p> <span>팔로잉</span> </label> <div class="followingList"> <div class="list-top"> <label for="followingListBtn">←</label> <span>스시<span> </div> <div class="before-list">팔로워가 없습니다.</div> <div class="after-list"> <div class="list-pf"> <label for="contBtn1"> <span class="profile"></span> <p>realseukdal</p> </label> </div> <label for="followBtn">삭제</label> </div> </div> </div> </div> <div class="info-text"> 여기가<br>내피드 </div> </div> <div class="feed"> <div class="pic"> <img src="https://img1.daumcdn.net/relay/cafe/original/?fname=https%3A%2F%2Fibb.co%2Fk3Ptd2k" alt="feed-pic"> </div> <div class="pic"> <img src="#" alt="feed-pic"> </div> <div class="pic"> <img src="#" alt="feed-pic"> </div> <div class="pic"> <img src="#" alt="feed-pic"> </div> <div class="pic"> <img src="#" alt="feed-pic"> </div> <div class="pic"> <img src="#" alt="feed-pic"> </div> <div class="pic"> <img src="#" alt="feed-pic"> </div> <div class="pic"> <img src="#" alt="feed-pic"> </div> <div class="pic"> <img src="#" alt="feed-pic"> </div> <div class="pic"> <img src="#" alt="feed-pic"> </div> <div class="pic"> <img src="#" alt="feed-pic"> </div> <div class="pic"> <img src="#" alt="feed-pic"> </div> </div> </div> </div> <div class="bottom-nav"> <label for="contBtn1"><span></span></label> <label for="contBtn2"><span></span></label> <label for="contBtn3"><span></span></label> </div> </div></div>