-Html
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
@import url("header.css");
@import url("main-footer.css");
@import url("slide_style.css");
</style>
<script src="https://kit.fontawesome.com/df767d109c.js" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<section>
<header>
<div class="header">
<div class="header-container">
<div class="links logo">
<a href="https://www.instagram.com/">
<img class="logoimag" href="https://www.instagram.com/"
src="https://www.instagram.com/static/images/web/mobile_nav_type_logo-2x.png/1b47f9d0e595.png"></a>
</div>
<div class="search">
<div class="searchbutton">
<input class="searchinput" role="button" placeholder="☌ Search">
<!-- <div class="dropdown-content"></div>-->
<!-- </button>-->
</div>
</div>
<div class="headicon">
<div class="icons">
<nav>
<ul class="links icon">
<li><a class="home" id="homeq" role="" href="https://www.instagram.com/"><i
class="fa-solid fa-house fa-xl" style="opacity: 100%"></i></a></li>
<li><a class="dm" id="dmq" role="" href="/"><i class="fa-solid fa-paper-plane fa-xl"
style="opacity: 10%"></i></a></li>
<li><a class="post" id="postq" role="" href="/"><i class="fa-solid fa-square-plus fa-xl"
style="opacity: 10%"></i></a></li>
<li><a class="around" id="aroundq" role="" href="/"><i class="fa-solid fa-compass fa-xl"
style="opacity: 10%"></i></a>
</li>
<li><a class="heart" id="heartq" role="" href="/"><i class="fa-solid fa-heart fa-xl"
style="opacity: 10%"></i></a></li>
<li><a class="myfeed" id="myfeedq" role="" href="/"><i
class="fa-solid fa-circle-user fa-xl" style="opacity: 10%"></i></a></li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</header>
</section>
<section class="down">
<main>
<div class="main-box">
<div class="story-box">
<div class="story-who">
<div class="story-wholi">
<button class="story-circle">
<div class="story-photo">
<li class="storyy"></li>
<img src="" alt="">
</div>
</button>
<div class="story-name">
<p class="fontnor">피카츄</p>
</div>
</div>
<div class="story-wholi">
<button class="story-circle">
<div class="story-photo">
<li class="storyy"></li>
<img src="" alt="">
</div>
</button>
<div class="story-name">
<p class="fontnor">피카츄</p>
</div>
</div>
<div class="story-wholi">
<button class="story-circle">
<div class="story-photo">
<li class="storyy"></li>
<img src="" alt="">
</div>
</button>
<div class="story-name">
<p class="fontnor">피카츄</p>
</div>
</div>
<div class="story-wholi">
<button class="story-circle">
<div class="story-photo">
<li class="storyy"></li>
<img src="" alt="">
</div>
</button>
<div class="story-name">
<p class="fontnor">피카츄</p>
</div>
</div>
<div class="story-wholi">
<button class="story-circle">
<div class="story-photo">
<li class="storyy"></li>
<img src="" alt="">
</div>
</button>
<div class="story-name">
<p class="fontnor">피카츄</p>
</div>
</div>
<div class="story-wholi">
<button class="story-circle">
<div class="story-photo">
<li class="storyy"></li>
<img src="" alt="">
</div>
</button>
<div class="story-name">
<p class="fontnor">피카츄</p>
</div>
</div>
<div class="story-wholi">
<button class="story-circle">
<div class="story-photo">
<li class="storyy"></li>
<img src="" alt="">
</div>
</button>
<div class="story-name">
<p class="fontnor">피카츄</p>
</div>
</div>
<div class="story-wholi">
<button class="story-circle">
<div class="story-photo">
<li class="storyy"></li>
<img src="" alt="">
</div>
</button>
<div class="story-name">
<p class="fontnor">피카츄</p>
</div>
</div>
<div class="story-wholi">
<button class="story-circle">
<div class="story-photo">
<li class="storyy"></li>
<img src="" alt="">
</div>
</button>
<div class="story-name">
<p class="fontnor">피카츄</p>
</div>
</div>
</div>
<p class="story-controller">
<span class="storyprev"><</span>
<span class="storynext"></span>
</p>
</div>
<div class="feed-box">
<div class="main-feed">
<div class="mf1-name">
<div class="smithis">
<div class="circle">
<button>피카츄</button>
</div>
<div class="smithname">
<button>name</button>
</div>
<div class="preference">
<div id="modal" class="modal">
<button class="modalclo" id="modal_close">취소</button>
</div>
<button id="modal_open">
<svg height="24" width="24">
<circle cx="12" cy="12" r="1.5"></circle>
<circle cx="6" cy="12" r="1.5"></circle>
<circle cx="18" cy="12" r="1.5"></circle>
</svg>
</button>
</div>
</div>
</div>
<div class="mf1-photo">
<div class="smithbigpic">
<div id="slideShow">
<ul class="slides">
<li><img src="image1/1.jpg"></li>
<li><img src="image1/2.jpg"></li>
<li><img src="image1/3.jpg"></li>
<li><img src="image1/4.jpg"></li>
<li><img src="image1/5.jpg"></li>
<li><img src="image1/6.jpg"></li>
</ul>
<p class="controller">
<!-- &lang: 왼쪽 방향 화살표 &rang: 오른쪽 방향 화살표 -->
<span id="spanprev" class="prev"><</span>
<span id="spannext" class="next">></span>
</p>
</div>
<!-- <button class="smithtags">tag</button>-->
</div>
</div>
<div class="mf1-icon">
<div class="smithplus">
<div class="smithbutton">
<div class="smithbutton-left">
<div class="like">
<button class="likebutton icon">
<svg aria-label="Like" class="_8-yf5 " color="#1c1a1a"
fill="#1c1a1a" height="24" role="img"
viewBox="0 0 24 24" width="24">
<path d="M16.792 3.904A4.989 4.989 0 0121.5 9.122c0 3.072-2.652 4.959-5.197 7.222-2.512 2.243-3.865 3.469-4.303 3.752-.477-.309-2.143-1.823-4.303-3.752C5.141 14.072 2.5 12.167 2.5 9.122a4.989 4.989 0 014.708-5.218 4.21 4.21 0 013.675 1.941c.84 1.175.98 1.763 1.12 1.763s.278-.588 1.11-1.766a4.17 4.17 0 013.679-1.938m0-2a6.04 6.04 0 00-4.797 2.127 6.052 6.052 0 00-4.787-2.127A6.985 6.985 0 00.5 9.122c0 3.61 2.55 5.827 5.015 7.97.283.246.569.494.853.747l1.027.918a44.998 44.998 0 003.518 3.018 2 2 0 002.174 0 45.263 45.263 0 003.626-3.115l.922-.824c.293-.26.59-.519.885-.774 2.334-2.025 4.98-4.32 4.98-7.94a6.985 6.985 0 00-6.708-7.218z"></path>
</svg>
</button>
</div>
<div class="comment icon">
<button class="commentbutton">
<svg aria-label="Comment" class="_8-yf5 "
color="#1c1a1a"
fill="#1c1a1a" height="24" role="img"
viewBox="0 0 24 24" width="24">
<path d="M20.656 17.008a9.993 9.993 0 10-3.59 3.615L22 22z"
fill="none" stroke="currentColor"
stroke-linejoin="round"
stroke-width="2"></path>
</svg>
</button>
</div>
<div class="direct icon">
<button class="dmbutton">
<svg aria-label="Share Post" class="_8-yf5 "
color="#1c1a1a"
fill="#1c1a1a" height="24" role="img"
viewBox="0 0 24 24" width="24">
<line fill="none" stroke="currentColor"
stroke-linejoin="round" stroke-width="2"
x1="22"
x2="9.218" y1="3" y2="10.083"></line>
<polygon fill="none"
points="11.698 20.334 22 3.001 2 3.001 9.218 10.084 11.698 20.334"
stroke="currentColor"
stroke-linejoin="round"
stroke-width="2"></polygon>
</svg>
</button>
</div>
</div>
<div class="smithbutton-middle">
<div class="slidedisplay">
<button id="seeMore">
<svg height="24" width="24" fill="gray">
<circle cx="14" cy="12" r="2"></circle>
<circle cx="8" cy="12" r="2"></circle>
<circle cx="20" cy="12" r="2"></circle>
</svg>
</button>
</div>
</div>
<div class="smithbutton-right">
<div class="saved">
<button class="savedbutton">
<svg aria-label="Save" class="_8-yf5 " color="#1c1a1a"
fill="#1c1a1a" height="24" role="img"
viewBox="0 0 24 24" width="24">
<polygon fill="none"
points="20 21 12 13.44 4 21 4 3 20 3 20 21"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"></polygon>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="mf1-prev">
<div class="smithfour">
<div>
<div class="fontdistance">
<span class="likedby">Liked by</span>
<span class="likedbywho">한지우</span>
</div>
<div class="fontdistance">
<span class="smithname">Pikachu</span>
<span class="saysth">삐까</span>
</div>
<div class="commentcount fontdistance">
<p>View all comments</p></div>
<!-- 프리뷰 댓글 -->
<!-- <div class="commentpre fontdistance">-->
<!--글 <span class="smithname">한지우</span>-->
<!-- <span class="saysth">So Cute ! </span>-->
<!-- </div>-->
<div class="tlrks">1 DAYS AGO</div>
</div>
</div>
</div>
<div class="mf1-comment">
<div class="commentinput">
<div class="addemo">
<button class="emojibutton">
<svg aria-label="Emoji" class="_8-yf5 " color="#262626"
fill="#262626" height="24" role="img"
viewBox="0 0 24 24"
width="24">
<path d="M15.83 10.997a1.167 1.167 0 101.167 1.167 1.167 1.167 0 00-1.167-1.167zm-6.5 1.167a1.167 1.167 0 10-1.166 1.167 1.167 1.167 0 001.166-1.167zm5.163 3.24a3.406 3.406 0 01-4.982.007 1 1 0 10-1.557 1.256 5.397 5.397 0 008.09 0 1 1 0 00-1.55-1.263zM12 .503a11.5 11.5 0 1011.5 11.5A11.513 11.513 0 0012 .503zm0 21a9.5 9.5 0 119.5-9.5 9.51 9.51 0 01-9.5 9.5z"></path>
</svg>
</button>
</div>
<div class="addcom">
<input class="addinput" placeholder="Add a comment...">
</div>
<div class="postbutton">
<button class="addbutton">
<p class="blue">Post</p>
</button>
</div>
</div>
</div>
</div>
<div class="main-feed">
<div class="mf1-name">
<div class="smithis">
<div class="circle">
<button>피카츄</button>
</div>
<div class="smithname">
<button>name</button>
</div>
<div class="preference">
<div id="modal" class="modal">
<button class="modalclo" id="modal_close">취소</button>
</div>
<button id="modal_open">
<svg height="24" width="24">
<circle cx="12" cy="12" r="1.5"></circle>
<circle cx="6" cy="12" r="1.5"></circle>
<circle cx="18" cy="12" r="1.5"></circle>
</svg>
</button>
</div>
</div>
</div>
<div class="mf1-photo">
<div class="smithbigpic">
<div id="slideShow">
<ul class="slides">
<li><img src="image1/1.jpg"></li>
<li><img src="image1/2.jpg"></li>
<li><img src="image1/3.jpg"></li>
<li><img src="image1/4.jpg"></li>
<li><img src="image1/5.jpg"></li>
<li><img src="image1/6.jpg"></li>
</ul>
<p class="controller">
<!-- &lang: 왼쪽 방향 화살표 &rang: 오른쪽 방향 화살표 -->
<span id="spanprev" class="prev"><</span>
<span id="spannext" class="next">></span>
</p>
</div>
<!-- <button class="smithtags">tag</button>-->
</div>
</div>
<div class="mf1-icon">
<div class="smithplus">
<div class="smithbutton">
<div class="smithbutton-left">
<div class="like">
<button class="likebutton icon">
<svg aria-label="Like" class="_8-yf5 " color="#1c1a1a"
fill="#1c1a1a" height="24" role="img"
viewBox="0 0 24 24" width="24">
<path d="M16.792 3.904A4.989 4.989 0 0121.5 9.122c0 3.072-2.652 4.959-5.197 7.222-2.512 2.243-3.865 3.469-4.303 3.752-.477-.309-2.143-1.823-4.303-3.752C5.141 14.072 2.5 12.167 2.5 9.122a4.989 4.989 0 014.708-5.218 4.21 4.21 0 013.675 1.941c.84 1.175.98 1.763 1.12 1.763s.278-.588 1.11-1.766a4.17 4.17 0 013.679-1.938m0-2a6.04 6.04 0 00-4.797 2.127 6.052 6.052 0 00-4.787-2.127A6.985 6.985 0 00.5 9.122c0 3.61 2.55 5.827 5.015 7.97.283.246.569.494.853.747l1.027.918a44.998 44.998 0 003.518 3.018 2 2 0 002.174 0 45.263 45.263 0 003.626-3.115l.922-.824c.293-.26.59-.519.885-.774 2.334-2.025 4.98-4.32 4.98-7.94a6.985 6.985 0 00-6.708-7.218z"></path>
</svg>
</button>
</div>
<div class="comment icon">
<button class="commentbutton">
<svg aria-label="Comment" class="_8-yf5 "
color="#1c1a1a"
fill="#1c1a1a" height="24" role="img"
viewBox="0 0 24 24" width="24">
<path d="M20.656 17.008a9.993 9.993 0 10-3.59 3.615L22 22z"
fill="none" stroke="currentColor"
stroke-linejoin="round"
stroke-width="2"></path>
</svg>
</button>
</div>
<div class="direct icon">
<button class="dmbutton">
<svg aria-label="Share Post" class="_8-yf5 "
color="#1c1a1a"
fill="#1c1a1a" height="24" role="img"
viewBox="0 0 24 24" width="24">
<line fill="none" stroke="currentColor"
stroke-linejoin="round" stroke-width="2"
x1="22"
x2="9.218" y1="3" y2="10.083"></line>
<polygon fill="none"
points="11.698 20.334 22 3.001 2 3.001 9.218 10.084 11.698 20.334"
stroke="currentColor"
stroke-linejoin="round"
stroke-width="2"></polygon>
</svg>
</button>
</div>
</div>
<div class="smithbutton-middle">
<div class="slidedisplay">
<button id="seeMore">
<svg height="24" width="24" fill="gray">
<circle cx="14" cy="12" r="2"></circle>
<circle cx="8" cy="12" r="2"></circle>
<circle cx="20" cy="12" r="2"></circle>
</svg>
</button>
</div>
</div>
<div class="smithbutton-right">
<div class="saved">
<button class="savedbutton">
<svg aria-label="Save" class="_8-yf5 " color="#1c1a1a"
fill="#1c1a1a" height="24" role="img"
viewBox="0 0 24 24" width="24">
<polygon fill="none"
points="20 21 12 13.44 4 21 4 3 20 3 20 21"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"></polygon>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="mf1-prev">
<div class="smithfour">
<div>
<div class="fontdistance">
<span class="likedby">Liked by</span>
<span class="likedbywho">한지우</span>
</div>
<div class="fontdistance">
<span class="smithname">Pikachu</span>
<span class="saysth">삐까</span>
</div>
<div class="commentcount fontdistance">
<p>View all comments</p></div>
<!-- 프리뷰 댓글 -->
<!-- <div class="commentpre fontdistance">-->
<!--글 <span class="smithname">한지우</span>-->
<!-- <span class="saysth">So Cute ! </span>-->
<!-- </div>-->
<div class="tlrks">1 DAYS AGO</div>
</div>
</div>
</div>
<div class="mf1-comment">
<div class="commentinput">
<div class="addemo">
<button class="emojibutton">
<svg aria-label="Emoji" class="_8-yf5 " color="#262626"
fill="#262626" height="24" role="img"
viewBox="0 0 24 24"
width="24">
<path d="M15.83 10.997a1.167 1.167 0 101.167 1.167 1.167 1.167 0 00-1.167-1.167zm-6.5 1.167a1.167 1.167 0 10-1.166 1.167 1.167 1.167 0 001.166-1.167zm5.163 3.24a3.406 3.406 0 01-4.982.007 1 1 0 10-1.557 1.256 5.397 5.397 0 008.09 0 1 1 0 00-1.55-1.263zM12 .503a11.5 11.5 0 1011.5 11.5A11.513 11.513 0 0012 .503zm0 21a9.5 9.5 0 119.5-9.5 9.51 9.51 0 01-9.5 9.5z"></path>
</svg>
</button>
</div>
<div class="addcom">
<input class="addinput" placeholder="Add a comment...">
</div>
<div class="postbutton">
<button class="addbutton">
<p class="blue">Post</p>
</button>
</div>
</div>
</div>
</div>
<div class="main-feed">
<div class="mf1-name">
<div class="smithis">
<div class="circle">
<button>피카츄</button>
</div>
<div class="smithname">
<button>name</button>
</div>
<div class="preference">
<div id="modal" class="modal">
<button class="modalclo" id="modal_close">취소</button>
</div>
<button id="modal_open">
<svg height="24" width="24">
<circle cx="12" cy="12" r="1.5"></circle>
<circle cx="6" cy="12" r="1.5"></circle>
<circle cx="18" cy="12" r="1.5"></circle>
</svg>
</button>
</div>
</div>
</div>
<div class="mf1-photo">
<div class="smithbigpic">
<div id="slideShow">
<ul class="slides">
<li><img src="image1/1.jpg"></li>
<li><img src="image1/2.jpg"></li>
<li><img src="image1/3.jpg"></li>
<li><img src="image1/4.jpg"></li>
<li><img src="image1/5.jpg"></li>
<li><img src="image1/6.jpg"></li>
</ul>
<p class="controller">
<!-- &lang: 왼쪽 방향 화살표 &rang: 오른쪽 방향 화살표 -->
<span id="spanprev" class="prev"><</span>
<span id="spannext" class="next">></span>
</p>
</div>
<!-- <button class="smithtags">tag</button>-->
</div>
</div>
<div class="mf1-icon">
<div class="smithplus">
<div class="smithbutton">
<div class="smithbutton-left">
<div class="like">
<button class="likebutton icon">
<svg aria-label="Like" class="_8-yf5 " color="#1c1a1a"
fill="#1c1a1a" height="24" role="img"
viewBox="0 0 24 24" width="24">
<path d="M16.792 3.904A4.989 4.989 0 0121.5 9.122c0 3.072-2.652 4.959-5.197 7.222-2.512 2.243-3.865 3.469-4.303 3.752-.477-.309-2.143-1.823-4.303-3.752C5.141 14.072 2.5 12.167 2.5 9.122a4.989 4.989 0 014.708-5.218 4.21 4.21 0 013.675 1.941c.84 1.175.98 1.763 1.12 1.763s.278-.588 1.11-1.766a4.17 4.17 0 013.679-1.938m0-2a6.04 6.04 0 00-4.797 2.127 6.052 6.052 0 00-4.787-2.127A6.985 6.985 0 00.5 9.122c0 3.61 2.55 5.827 5.015 7.97.283.246.569.494.853.747l1.027.918a44.998 44.998 0 003.518 3.018 2 2 0 002.174 0 45.263 45.263 0 003.626-3.115l.922-.824c.293-.26.59-.519.885-.774 2.334-2.025 4.98-4.32 4.98-7.94a6.985 6.985 0 00-6.708-7.218z"></path>
</svg>
</button>
</div>
<div class="comment icon">
<button class="commentbutton">
<svg aria-label="Comment" class="_8-yf5 "
color="#1c1a1a"
fill="#1c1a1a" height="24" role="img"
viewBox="0 0 24 24" width="24">
<path d="M20.656 17.008a9.993 9.993 0 10-3.59 3.615L22 22z"
fill="none" stroke="currentColor"
stroke-linejoin="round"
stroke-width="2"></path>
</svg>
</button>
</div>
<div class="direct icon">
<button class="dmbutton">
<svg aria-label="Share Post" class="_8-yf5 "
color="#1c1a1a"
fill="#1c1a1a" height="24" role="img"
viewBox="0 0 24 24" width="24">
<line fill="none" stroke="currentColor"
stroke-linejoin="round" stroke-width="2"
x1="22"
x2="9.218" y1="3" y2="10.083"></line>
<polygon fill="none"
points="11.698 20.334 22 3.001 2 3.001 9.218 10.084 11.698 20.334"
stroke="currentColor"
stroke-linejoin="round"
stroke-width="2"></polygon>
</svg>
</button>
</div>
</div>
<div class="smithbutton-middle">
<div class="slidedisplay">
<button id="seeMore">
<svg height="24" width="24" fill="gray">
<circle cx="14" cy="12" r="2"></circle>
<circle cx="8" cy="12" r="2"></circle>
<circle cx="20" cy="12" r="2"></circle>
</svg>
</button>
</div>
</div>
<div class="smithbutton-right">
<div class="saved">
<button class="savedbutton">
<svg aria-label="Save" class="_8-yf5 " color="#1c1a1a"
fill="#1c1a1a" height="24" role="img"
viewBox="0 0 24 24" width="24">
<polygon fill="none"
points="20 21 12 13.44 4 21 4 3 20 3 20 21"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"></polygon>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="mf1-prev">
<div class="smithfour">
<div>
<div class="fontdistance">
<span class="likedby">Liked by</span>
<span class="likedbywho">한지우</span>
</div>
<div class="fontdistance">
<span class="smithname">Pikachu</span>
<span class="saysth">삐까</span>
</div>
<div class="commentcount fontdistance">
<p>View all comments</p></div>
<!-- 프리뷰 댓글 -->
<!-- <div class="commentpre fontdistance">-->
<!--글 <span class="smithname">한지우</span>-->
<!-- <span class="saysth">So Cute ! </span>-->
<!-- </div>-->
<div class="tlrks">1 DAYS AGO</div>
</div>
</div>
</div>
<div class="mf1-comment">
<div class="commentinput">
<div class="addemo">
<button class="emojibutton">
<svg aria-label="Emoji" class="_8-yf5 " color="#262626"
fill="#262626" height="24" role="img"
viewBox="0 0 24 24"
width="24">
<path d="M15.83 10.997a1.167 1.167 0 101.167 1.167 1.167 1.167 0 00-1.167-1.167zm-6.5 1.167a1.167 1.167 0 10-1.166 1.167 1.167 1.167 0 001.166-1.167zm5.163 3.24a3.406 3.406 0 01-4.982.007 1 1 0 10-1.557 1.256 5.397 5.397 0 008.09 0 1 1 0 00-1.55-1.263zM12 .503a11.5 11.5 0 1011.5 11.5A11.513 11.513 0 0012 .503zm0 21a9.5 9.5 0 119.5-9.5 9.51 9.51 0 01-9.5 9.5z"></path>
</svg>
</button>
</div>
<div class="addcom">
<input class="addinput" placeholder="Add a comment...">
</div>
<div class="postbutton">
<button class="addbutton">
<p class="blue">Post</p>
</button>
</div>
</div>
</div>
</div>
<div class="main-feed">
<div class="mf1-name">
<div class="smithis">
<div class="circle">
<button>피카츄</button>
</div>
<div class="smithname">
<button>name</button>
</div>
<div class="preference">
<div id="modal" class="modal">
<button class="modalclo" id="modal_close">취소</button>
</div>
<button id="modal_open">
<svg height="24" width="24">
<circle cx="12" cy="12" r="1.5"></circle>
<circle cx="6" cy="12" r="1.5"></circle>
<circle cx="18" cy="12" r="1.5"></circle>
</svg>
</button>
</div>
</div>
</div>
<div class="mf1-photo">
<div class="smithbigpic">
<div id="slideShow">
<ul class="slides">
<li><img src="image1/1.jpg"></li>
<li><img src="image1/2.jpg"></li>
<li><img src="image1/3.jpg"></li>
<li><img src="image1/4.jpg"></li>
<li><img src="image1/5.jpg"></li>
<li><img src="image1/6.jpg"></li>
</ul>
<p class="controller">
<!-- &lang: 왼쪽 방향 화살표 &rang: 오른쪽 방향 화살표 -->
<span id="spanprev" class="prev"><</span>
<span id="spannext" class="next">></span>
</p>
</div>
<!-- <button class="smithtags">tag</button>-->
</div>
</div>
<div class="mf1-icon">
<div class="smithplus">
<div class="smithbutton">
<div class="smithbutton-left">
<div class="like">
<button class="likebutton icon">
<svg aria-label="Like" class="_8-yf5 " color="#1c1a1a"
fill="#1c1a1a" height="24" role="img"
viewBox="0 0 24 24" width="24">
<path d="M16.792 3.904A4.989 4.989 0 0121.5 9.122c0 3.072-2.652 4.959-5.197 7.222-2.512 2.243-3.865 3.469-4.303 3.752-.477-.309-2.143-1.823-4.303-3.752C5.141 14.072 2.5 12.167 2.5 9.122a4.989 4.989 0 014.708-5.218 4.21 4.21 0 013.675 1.941c.84 1.175.98 1.763 1.12 1.763s.278-.588 1.11-1.766a4.17 4.17 0 013.679-1.938m0-2a6.04 6.04 0 00-4.797 2.127 6.052 6.052 0 00-4.787-2.127A6.985 6.985 0 00.5 9.122c0 3.61 2.55 5.827 5.015 7.97.283.246.569.494.853.747l1.027.918a44.998 44.998 0 003.518 3.018 2 2 0 002.174 0 45.263 45.263 0 003.626-3.115l.922-.824c.293-.26.59-.519.885-.774 2.334-2.025 4.98-4.32 4.98-7.94a6.985 6.985 0 00-6.708-7.218z"></path>
</svg>
</button>
</div>
<div class="comment icon">
<button class="commentbutton">
<svg aria-label="Comment" class="_8-yf5 "
color="#1c1a1a"
fill="#1c1a1a" height="24" role="img"
viewBox="0 0 24 24" width="24">
<path d="M20.656 17.008a9.993 9.993 0 10-3.59 3.615L22 22z"
fill="none" stroke="currentColor"
stroke-linejoin="round"
stroke-width="2"></path>
</svg>
</button>
</div>
<div class="direct icon">
<button class="dmbutton">
<svg aria-label="Share Post" class="_8-yf5 "
color="#1c1a1a"
fill="#1c1a1a" height="24" role="img"
viewBox="0 0 24 24" width="24">
<line fill="none" stroke="currentColor"
stroke-linejoin="round" stroke-width="2"
x1="22"
x2="9.218" y1="3" y2="10.083"></line>
<polygon fill="none"
points="11.698 20.334 22 3.001 2 3.001 9.218 10.084 11.698 20.334"
stroke="currentColor"
stroke-linejoin="round"
stroke-width="2"></polygon>
</svg>
</button>
</div>
</div>
<div class="smithbutton-middle">
<div class="slidedisplay">
<button id="seeMore">
<svg height="24" width="24" fill="gray">
<circle cx="14" cy="12" r="2"></circle>
<circle cx="8" cy="12" r="2"></circle>
<circle cx="20" cy="12" r="2"></circle>
</svg>
</button>
</div>
</div>
<div class="smithbutton-right">
<div class="saved">
<button class="savedbutton">
<svg aria-label="Save" class="_8-yf5 " color="#1c1a1a"
fill="#1c1a1a" height="24" role="img"
viewBox="0 0 24 24" width="24">
<polygon fill="none"
points="20 21 12 13.44 4 21 4 3 20 3 20 21"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"></polygon>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="mf1-prev">
<div class="smithfour">
<div>
<div class="fontdistance">
<span class="likedby">Liked by</span>
<span class="likedbywho">한지우</span>
</div>
<div class="fontdistance">
<span class="smithname">Pikachu</span>
<span class="saysth">삐까</span>
</div>
<div class="commentcount fontdistance">
<p>View all comments</p></div>
<!-- 프리뷰 댓글 -->
<!-- <div class="commentpre fontdistance">-->
<!--글 <span class="smithname">한지우</span>-->
<!-- <span class="saysth">So Cute ! </span>-->
<!-- </div>-->
<div class="tlrks">1 DAYS AGO</div>
</div>
</div>
</div>
<div class="mf1-comment">
<div class="commentinput">
<div class="addemo">
<button class="emojibutton">
<svg aria-label="Emoji" class="_8-yf5 " color="#262626"
fill="#262626" height="24" role="img"
viewBox="0 0 24 24"
width="24">
<path d="M15.83 10.997a1.167 1.167 0 101.167 1.167 1.167 1.167 0 00-1.167-1.167zm-6.5 1.167a1.167 1.167 0 10-1.166 1.167 1.167 1.167 0 001.166-1.167zm5.163 3.24a3.406 3.406 0 01-4.982.007 1 1 0 10-1.557 1.256 5.397 5.397 0 008.09 0 1 1 0 00-1.55-1.263zM12 .503a11.5 11.5 0 1011.5 11.5A11.513 11.513 0 0012 .503zm0 21a9.5 9.5 0 119.5-9.5 9.51 9.51 0 01-9.5 9.5z"></path>
</svg>
</button>
</div>
<div class="addcom">
<input class="addinput" placeholder="Add a comment...">
</div>
<div class="postbutton">
<button class="addbutton">
<p class="blue">Post</p>
</button>
</div>
</div>
</div>
</div>
<div class="main-feed">
<div class="mf1-name">
<div class="smithis">
<div class="circle">
<button>피카츄</button>
</div>
<div class="smithname">
<button>name</button>
</div>
<div class="preference">
<div id="modal" class="modal">
<button class="modalclo" id="modal_close">취소</button>
</div>
<button id="modal_open">
<svg height="24" width="24">
<circle cx="12" cy="12" r="1.5"></circle>
<circle cx="6" cy="12" r="1.5"></circle>
<circle cx="18" cy="12" r="1.5"></circle>
</svg>
</button>
</div>
</div>
</div>
<div class="mf1-photo">
<div class="smithbigpic">
<div id="slideShow">
<ul class="slides">
<li><img src="image1/1.jpg"></li>
<li><img src="image1/2.jpg"></li>
<li><img src="image1/3.jpg"></li>
<li><img src="image1/4.jpg"></li>
<li><img src="image1/5.jpg"></li>
<li><img src="image1/6.jpg"></li>
</ul>
<p class="controller">
<!-- &lang: 왼쪽 방향 화살표 &rang: 오른쪽 방향 화살표 -->
<span id="spanprev" class="prev"><</span>
<span id="spannext" class="next">></span>
</p>
</div>
<!-- <button class="smithtags">tag</button>-->
</div>
</div>
<div class="mf1-icon">
<div class="smithplus">
<div class="smithbutton">
<div class="smithbutton-left">
<div class="like">
<button class="likebutton icon">
<svg aria-label="Like" class="_8-yf5 " color="#1c1a1a"
fill="#1c1a1a" height="24" role="img"
viewBox="0 0 24 24" width="24">
<path d="M16.792 3.904A4.989 4.989 0 0121.5 9.122c0 3.072-2.652 4.959-5.197 7.222-2.512 2.243-3.865 3.469-4.303 3.752-.477-.309-2.143-1.823-4.303-3.752C5.141 14.072 2.5 12.167 2.5 9.122a4.989 4.989 0 014.708-5.218 4.21 4.21 0 013.675 1.941c.84 1.175.98 1.763 1.12 1.763s.278-.588 1.11-1.766a4.17 4.17 0 013.679-1.938m0-2a6.04 6.04 0 00-4.797 2.127 6.052 6.052 0 00-4.787-2.127A6.985 6.985 0 00.5 9.122c0 3.61 2.55 5.827 5.015 7.97.283.246.569.494.853.747l1.027.918a44.998 44.998 0 003.518 3.018 2 2 0 002.174 0 45.263 45.263 0 003.626-3.115l.922-.824c.293-.26.59-.519.885-.774 2.334-2.025 4.98-4.32 4.98-7.94a6.985 6.985 0 00-6.708-7.218z"></path>
</svg>
</button>
</div>
<div class="comment icon">
<button class="commentbutton">
<svg aria-label="Comment" class="_8-yf5 "
color="#1c1a1a"
fill="#1c1a1a" height="24" role="img"
viewBox="0 0 24 24" width="24">
<path d="M20.656 17.008a9.993 9.993 0 10-3.59 3.615L22 22z"
fill="none" stroke="currentColor"
stroke-linejoin="round"
stroke-width="2"></path>
</svg>
</button>
</div>
<div class="direct icon">
<button class="dmbutton">
<svg aria-label="Share Post" class="_8-yf5 "
color="#1c1a1a"
fill="#1c1a1a" height="24" role="img"
viewBox="0 0 24 24" width="24">
<line fill="none" stroke="currentColor"
stroke-linejoin="round" stroke-width="2"
x1="22"
x2="9.218" y1="3" y2="10.083"></line>
<polygon fill="none"
points="11.698 20.334 22 3.001 2 3.001 9.218 10.084 11.698 20.334"
stroke="currentColor"
stroke-linejoin="round"
stroke-width="2"></polygon>
</svg>
</button>
</div>
</div>
<div class="smithbutton-middle">
<div class="slidedisplay">
<button id="seeMore">
<svg height="24" width="24" fill="gray">
<circle cx="14" cy="12" r="2"></circle>
<circle cx="8" cy="12" r="2"></circle>
<circle cx="20" cy="12" r="2"></circle>
</svg>
</button>
</div>
</div>
<div class="smithbutton-right">
<div class="saved">
<button class="savedbutton">
<svg aria-label="Save" class="_8-yf5 " color="#1c1a1a"
fill="#1c1a1a" height="24" role="img"
viewBox="0 0 24 24" width="24">
<polygon fill="none"
points="20 21 12 13.44 4 21 4 3 20 3 20 21"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"></polygon>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="mf1-prev">
<div class="smithfour">
<div>
<div class="fontdistance">
<span class="likedby">Liked by</span>
<span class="likedbywho">한지우</span>
</div>
<div class="fontdistance">
<span class="smithname">Pikachu</span>
<span class="saysth">삐까</span>
</div>
<div class="commentcount fontdistance">
<p>View all comments</p></div>
<!-- 프리뷰 댓글 -->
<!-- <div class="commentpre fontdistance">-->
<!--글 <span class="smithname">한지우</span>-->
<!-- <span class="saysth">So Cute ! </span>-->
<!-- </div>-->
<div class="tlrks">1 DAYS AGO</div>
</div>
</div>
</div>
<div class="mf1-comment">
<div class="commentinput">
<div class="addemo">
<button class="emojibutton">
<svg aria-label="Emoji" class="_8-yf5 " color="#262626"
fill="#262626" height="24" role="img"
viewBox="0 0 24 24"
width="24">
<path d="M15.83 10.997a1.167 1.167 0 101.167 1.167 1.167 1.167 0 00-1.167-1.167zm-6.5 1.167a1.167 1.167 0 10-1.166 1.167 1.167 1.167 0 001.166-1.167zm5.163 3.24a3.406 3.406 0 01-4.982.007 1 1 0 10-1.557 1.256 5.397 5.397 0 008.09 0 1 1 0 00-1.55-1.263zM12 .503a11.5 11.5 0 1011.5 11.5A11.513 11.513 0 0012 .503zm0 21a9.5 9.5 0 119.5-9.5 9.51 9.51 0 01-9.5 9.5z"></path>
</svg>
</button>
</div>
<div class="addcom">
<input class="addinput" placeholder="Add a comment...">
</div>
<div class="postbutton">
<button class="addbutton">
<p class="blue">Post</p>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer>
<div class="footer">
<div class="footer-box">
<div class="myswitch">
<div class="switch-photo">
<button><img></button>
</div>
<div class="namesetex">
<div class="boldfont">SUGI</div>
<div class="fontnor"></div>
</div>
<div class="switchbutton">
<button class="boldfont" style="color: lightskyblue;">Switch</button>
</div>
</div>
<div class="suggestionforyou">
<div class="sugg">
<span class="sugges boldfont">Suggestions For You</span>
<p class="seeall boldfont">See All</p>
</div>
</div>
<div class="fivesugg">
<div class="suggestion">
<div class="sugg-photo">
<button><img></button>
</div>
<div class="nameset">
<div class="boldfont">user</div>
<div class="fontnor">namepleaffdffffse</div>
</div>
<div class="main-follow">
<button class="boldfont minifont" style="color: lightskyblue;">Follow</button>
</div>
</div>
<div class="suggestion">
<div class="sugg-photo">
<button><img></button>
</div>
<div class="nameset">
<div class="boldfont">user</div>
<div class="fontnor">namepleaffdffffse</div>
</div>
<div class="main-follow">
<button class="boldfont minifont" style="color: lightskyblue;">Follow</button>
</div>
</div>
<div class="suggestion">
<div class="sugg-photo">
<button><img></button>
</div>
<div class="nameset">
<div class="boldfont">user</div>
<div class="fontnor">namepleaffdffffse</div>
</div>
<div class="main-follow">
<button class="boldfont minifont" style="color: lightskyblue;">Follow</button>
</div>
</div>
<div class="suggestion">
<div class="sugg-photo">
<button><img></button>
</div>
<div class="nameset">
<div class="boldfont">user</div>
<div class="fontnor">namepleaffdffffse</div>
</div>
<div class="main-follow">
<button class="boldfont minifont" style="color: lightskyblue;">Follow</button>
</div>
</div>
<div class="suggestion">
<div class="sugg-photo">
<button><img></button>
</div>
<div class="nameset">
<div class="boldfont">user</div>
<div class="fontnor">namepleaffdffffse</div>
</div>
<div class="main-follow">
<button class="boldfont minifont" style="color: lightskyblue;">Follow</button>
</div>
</div>
</div>
<div class="last">
<div>
<nav>
<ul class="main-last hyphens" style="font-size: 8px;">
<li class="main-footer">
<a class="homelinks" href="https://about.instagram.com/"></span>About・</span></a>
</li>
<li class="main-footer">
<a class="homelinks" href="https://help.instagram.com/"></span>Help・</span></a>
</li>
<li class="main-footer">
<a class="homelinks" href="https://about.instagram.com/blog/"></span>
Press・</span></a>
</li>
<li class="main-footer">
<a class="homelinks" href="https://developers.facebook.com/docs/instagram"></span>
API・</span></a>
</li>
<li class="main-footer">
<a class="homelinks" href="/about/jobs"></span>Jobs・</span></a>
</li>
<li class="main-footer">
<a class="homelinks" href="/legal/privacy/"></span>Privacy・</span></a>
</li>
</li>
<li class="main-footer">
<a class="homelinks" href="/legal/terms/"></span>Terms・</span></a>
</li>
<li class="main-footer">
<a class="homelinks" href="/explore/locations/"></span>Locations・</span></a>
</li>
<li class="main-footer">
<a class="homelinks" href="/directory/profiles/"></span>Top""Accounts・</span></a>
</li>
<li class="main-footer">
<a class="homelinks" href="/directory/hashtags/"></span>Hashtags・</span></a>
</li>
<li class="main-footer">
<a class="homelinks"><span>Language</span></a>
<!-- <select>-->
<!-- <option>Korea</option>-->
<!-- </select>-->
</li>
</ul>
</nav>
</div>
<div class="c">
<p class>© 2022 INSTAGRAM FROM META</p>
</div>
</div>
</div>
</div>
</footer>
</section>
<script src="insta.js"></script>
</body>
</html>
- CSS (header)
더보기
@media ( max-width: 640px ) {
.searchinput { /*화면이 줄어들면 안보이게 해라*/
display: none;
}
}
.logoimag {
background-color: white;
align-items: center;
height: 30px;
margin-top: 4px;
padding-right: 220px;
}
.searchinput {
background-color: #f0f0f0;
border: 0;
border-radius: 8px;
height: 38px;
width: 270px;
padding-left: 15px;
font-size: 17px;
font-weight: lighter;
/*max-width: 140px;*/
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 25px;
}
.icon {
display: flex;
list-style: none;
padding-left: 90px;
}
/* 아이콘색상변경 */
.fa-solid {
padding-right: 23px;
color: black;
}
header {
position: relative;
z-index: 3;
}
.header-container {
position: fixed;
background-color: white;
border-bottom: 0.2px solid lightgrey;
width: 100%;
top: 0;
left: 0;
height: 60.8px;
padding: 0px;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
}
-CSS (main. side. footer)
더보기
html, body {
margin: 0;
padding: 0;
}
@media ( max-width: 999px ) {
.footer {
display: none;
}
}
@media ( max-width: 765px ) {
.searchbutton {
display: none;
}
}
* {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
box-sizing: border-box;
}
li {
list-style-type: none;
}
button {
border: 0;
outline: 0;
background: transparent;
}
.boldfont {
font-weight: bold;
}
.grayfont {
color: gray;
}
/*위에는 전체설정*//**//**//**//**//**//**//**//**//**//**//**//**/
/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
/*아래는 뼈대 / 푸터 메인박스 헤더박스 설정*//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
section {
background: lightgray;
display: flex;
flex-direction: row;
}
.down {
background-color: #f0f0f0;;
}
main {
/*background: pink;*/
position: static;
margin-left: 380px;
}
.footer {
*width: 100%;
/*float: right;*/
/*height: 100%;*/
/*min-height: 2500px;*/
margin: auto;
z-index: 1;
align-content: stretch;
/*opacity: 50%;*/
padding-top: 70px;
/*position: sticky;*/
}
.main-box {
width: 100%;
/*padding-top: 30px;*/
padding-top: 86px;
max-width: 614px;
margin-right: 0px;
z-index: 2;
}
.footer-box {
/*background: burlywood;*/
/*top: 0;*/
width: 350px;
/*padding-left: 24px;*/
padding-top: 49px;
z-index: 1;
position: fixed;
height: 100%;
margin-left: 0px;
padding-left: 28px;
position: -webkit-sticky;
/*position: sticky;*/
}
/**//**//**//**//**//**//**//**//**//**//**//**//**/
/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
/*메인 피드 큰거 정보*//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
.main-feed {
border: 0.2px solid lightgrey;
background: green;
height: 767px;
}
.mf1-name {
border-bottom: 0.2px solid lightgrey;
height: 62px;
display: flex;
width: 100%;
align-items: center;
/*border-bottom: 0.2px solid gray;*/
background: white;
}
.smithis {
display: flex;
width: 100%;
align-items: center;
/*border-bottom: 0.2px solid lightgrey;*/
background: white;
}
.circle {
border-radius: 50%;
height: 40px;
width: 40px;
border: 0.2px solid lightgrey;
object-fit: cover;
display: flex;
justify-content: center;
align-items: center;
margin: 10px;
}
.smithname {
padding: 0px 0px 0px 5px;
font-weight: 600;
}
.preference {
display: flex;
/*padding-left: px;*/
}
/**//**//**//**//**//**//**//**//**//**//**//**//**/
/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
/*메인 피드 큰 창 설정*//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
.mf1-photo {
/*border-bottom: 0.3px solid gray;*/
height: 612px;
}
.smithbigpic {
display: flex;
width: 100%;
height: 100%;
border-bottom: 0.2px solid lightgrey;
padding: 0px 0px 0px 0px;
box-sizing: border-box;
margin: -1.5px 2px 0px -0.5px;
object-fit: cover;
}
/*.smithtags{*/
/* display: ;*/
/*}*/
/**//**//**//**//**//**//**//**//**//**//**//**//**/
/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
/*아이*//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
.smithbutton {
vertical-align: middle;
display: flex;
align-items: center;
justify-content: space-between;
padding: 13px 0px 13px 0px;
}
.smithbutton-left {
vertical-align: middle;
display: flex;
align-items: center;
flex-basis: 0;
flex-grow: 1;
}
.smithbutton-middle {
padding: 0px 100px 0px 20px;
flex-basis: 0;
flex-grow: 1;
}
.smithbutton-right {
padding-right: 15px;
flex-basis: 0;
flex-grow: 1;
}
/**//**//**//**//**//**//**//**//**//**//**//**//**/
/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
/*메인 프리뷰 좋아요 댓글 디엠 저장 칸*//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
.mf1-prev {
/*border-bottom: 1px solid green;*/
height: 48px;
}
/**//**//**//**//**//**//**//**//**//**//**//**//**/
/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
/*메인 프리뷰 좋아요 댓글 디엠 저장 칸*//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
.smithfour {
padding: 0px 12px 15px 10px;
font-size: 13px;
border-bottom: 0.2px solid lightgray;
}
.likedbywho {
font-weight: 600;
padding-left: 6px;
}
.smithname {
font-weight: 600;
/*왜.. 들여쓰기를 하는거니?*/
}
.saysth {
padding-left: 6px;
}
.commentcount {
color: gray;
}
.fontdistance {
padding-bottom: 4px;
}
.tlrks {
color: gray;
font-size: 9px;
padding-left: 4.4px;
}
/**//**//**//**//**//**//**//**/
/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
.mf1-comment {
border: 1px solid red;
height: 56px;
margin-top: 62px;
}
.commentinput {
width: 100%;
padding: 10px 15px;
vertical-align: middle;
display: flex;
align-items: center;
}
.emojibutton {
padding-right: 10px;
}
.addinput {
width: 80%;
border: 0;
outline: 0;
font-color: lightgray;
}
.addbutton {
font-weight: 600;
color: rgba(82, 173, 242, 0.5)
}
/**//**//**//**//**//**//**//**//**//**//**//**//**/
/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
/*스토리*//**//**//**//**//**//**//**//**//**//**//**//**/
.story-box {
border: 0.7px solid gray;
border-radius: 3px;
background: white;
font-size: 14px;
height: 117px;
margin-bottom: 25px;
overflow: hidden;
overflow-y: hidden;
overflow-x: auto;
justify-content: center;
/*height: 119px;*/
/*background-color: white;*/
/*border: 0.2px solid lightgrey;*/
/*overflow-y: hidden;*/
/*display: flex;*/
/*vertical-align: middle;*/
/*padding: 18px 0px 18px 0px;*/
/*mar``gin: 13px 0px 24px 0px;*/
}
.story-wholi {
border-radius: 100%;
/*list 세로에서 가로 정렬시 리스트스타일 없애고 float*/
float: left;
justify-content: center;
padding: 20px 0px 15px 10px;
}
.story-photo {
width: 56px;
height: 56px;
border-radius: 100%;
border: 2px solid orangered;
/*border-radius: 70%;*/
/*height: 60px;*/
/*width: 60px;*/
/*border: 0.2px solid lightgrey;*/
/*object-fit: cover;*/
/*display: flex;*/
/*align-items: center;*/
/*padding: 10px;*/
}
.fontnor {
height: 18px;
text-align: center;
margin-top: 5px;
}
/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
.main-feed {
border: 0.7px solid gray;
border-radius: 3px;
background: white;
font-size: 14px;
width: 614px;
height: 1000px;
margin-bottom: 25px;
overflow: hidden;
overflow-y: hidden;
overflow-x: auto;
justify-content: center;
/* padding-bottom: 20px;*/
/*border: 0.2px solid lightgrey;*/
/*box-sizing: border-box;*/
/*border: 0.2px solid lightgrey;*/
/*width: 100%;*/
/*margin-bottom: 20px;*/
/*background: white;*/
}
/**//**//**//**//**//**//**//**//**//**//**//**//**/
/**//**//**//**//**//**//**//**//**//**//**//**//**/
/*푸터화면*//**//**//**//**//**//**//**//**//**//**//**//**/
.myswitch {
background: transparent;
/*border: 1px solid white;*/
width: 324px;
height: 55px;
margin-bottom: 10px;
z-index: 8;
align-content: stretch;
display: flex;
padding: 4px 0px 0px -10px;
}
.switch-photo {
width: 50px;
height: 50px;
border-radius: 100%;
border: 2px solid orangered;
}
.namesetex {
padding: 5px 85px 5px 15px;
align-content: stretch;
/*border: 2px solid orangered;*/
}
.switchbutton {
padding-top: 15px;
padding-right: 0px;
padding-left: 77px;
font-size: 13px;
}
/**//**//**//**//**//**//**//**//**//**//**//**//**//**/
/**//**//**//**//**//**//**//**//**//**//**//**//**//**/
/*푸터 중간 한줄*//**//**//**//**//**//**//**//**//**//**//**//**//**/
.suggestionforyou {
/*border: 1px solid #fcfcfc;*/
z-index: 7;
height: 40px;
/*padding-bottom: 0px;*/
}
.sugg {
align-content: stretch;
display: flex;
}
.sugges {
/*border: 2px solid orangered;*/
padding-right: 100px;
padding-top: 10px;
font-size: 14px;
/*margin-botxtom: 0;*/
}
.seeall {
margin-top: 0;
padding-top: 10px;
font-size: 14px;
margin-left: 26px;
padding-bottom: 15px;
}
/**//**//**//**//**//**//**//**//**//**//**//**//**//**/
/**//**//**//**//**//**//**//**//**//**//**//**//**//**/
/*푸터 하단*//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
.suggestion {
align-content: stretch;
display: flex;
justify-content: center;
padding-bottom: 46px;
margin: 2px;
height: 20px;
/*margin-bottom: 0px;*/
}
.sugg-photo {
display: flex;
width: 30px;
height: 30px;
border-radius: 100%;
border: 2px solid orangered;
margin-top: 0px;
}
.nameset {
padding: 0px 100px 40px 15px;
/*border: 2px solid orangered;*/
margin-top: 0px;
font-size: 14px;
}
.main-follow {
padding-top: 10px;
font-size: 12px;
}
/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
/*인스타그램 정보 푸터란*//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
.last {
font-size: 14px;
padding-top: 20px;
color: gray;
}
.main-last {
width: 294px;
height: 40px;
border: 2px solid white;
padding: 0;
display: flex; /*세로에서 가로로됨 두개해야함*/
-moz-columns-width: 100px;
-webkit-columns-width: 100px;
columns-width: 100px;
white-space: normal;
overflowx: scroll; /*세로에서 가로로됨*/
}
/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
/* */
-CSS (slides. modal)
더보기
.modal {
background-color: rgba(192, 27, 27, 0.5);
display: none;
position: absolute;
width: 100px;
height: 100px;
top: 0;
left: 0;
/*bottom: 0;*/
margin: 0 auto;
z-index: 20;
}
.modalclo {
/* width: 200px;*/
/* width: 200px;*/
/* background-color: white;*/
z-index: 21;
}
/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
/* 보여줄 구간의 높이와 넓이 설정 */
#slideShow{
width: 100%;
height: 100%;
top: 0;
object-fit: cover;
/*background: dodgerblue;*/
/*opacity: 30%;*/
position: relative;
margin: 0 auto;
overflow: hidden;
}
/*리스트 형식으로 이미지를 일렬로 정렬할 것이기 때문에,
500px 밖으로 튀어 나간 이미지들은 hidden으로 숨겨줘야됨*/
.slides{
width: 612px; /* 슬라이드할 사진과 마진 총 넓이 */
height: 767px;
object-fit: cover;
/*background: greenyellow;*/
/*opacity: 30%;*/
position: absolute;
left: 0;
top: 0;
padding-top:1.2px;
margin: 0 auto;
align-content: center;
justify-content: center;
transition: left 0.5s ease-out; /*ease-out: 처음에는 느렸다가 점점 빨라짐*/
}
/* 첫 번째 슬라이드 가운데에 정렬하기위해 첫번째 슬라이드만 margin-left조정 */
.slides li:first-child{
margin-left: 0px;
}
/* 슬라이드들 옆으로 정렬 */
.slides li:not(:last-child){
float: left;
margin-right: 0px;
padding: 0;
}
.slides li{
float: left;
}
.controller span{
position: absolute;
background-color: transparent;
color: black;
text-align: center;
border-radius: 100%;
padding: 3px 6px;
top: 50%;
font-size: 1em;
cursor: pointer;
}
/* 이전, 다음 화살표에 마우스 커서가 올라가 있을때 */
.controller span:hover{
background-color: rgba(128, 128, 128, 0.11);
}
.prev{
left: 10px;
}
/* 이전 화살표에 마우스 커서가 올라가 있을때 이전 화살표가 살짝 왼쪽으로 이동하는 효과*/
/*.prev:hover{*/
/* transform: translateX(0px);*/
/*}*/
.next{
right: 10px;
}
/* 다음 화살표에 마우스 커서가 올라가 있을때 이전 화살표가 살짝 오른쪽으로 이동하는 효과*/
/*.next:hover{*/
/* transform: translateX(0px);*/
/*}*/
.controller1 span{
position: absolute;
background-color: transparent;
color: black;
text-align: center;
border-radius: 100%;
padding: 3px 6px;
top: 50%;
font-size: 1em;
cursor: pointer;
}
-Js (slides. modal)
더보기
const slides = document.querySelector('.slides'); //전체 슬라이드 컨테이너
const slideImg = document.querySelectorAll('.slides li'); //모든 슬라이드들
let currentIdx = 0; // 현재 슬라이드 index
const slideCount = slideImg.length; // 슬라이드 개수
const prev = document.querySelector('#spanprev'); // 이전 버튼
const next = document.querySelector('#spannext'); // 다음 버튼
const slideWidth = 300; // 한개의 슬라이드 넓이
const slideMargin = 100; // 슬라이드간의 margin 값
slides.style.width = (slideWidth + slideMargin) * slideCount + 'px';
//전체 슬라이드 컨테이너 넓이 설정
function moveSlide(num) {
console.log(num);
slides.style.left = -num * 400 + 'px';
currentIdx = num;
}
//test
// function click(e){
// window.alert("add")
// }
//
// next.addEventListener("click", click, false);
prev.addEventListener('click', function () {
if (currentIdx !== 0) moveSlide(currentIdx - 1);
});
/*첫 번째 슬라이드로 표시 됐을때는
이전 버튼 눌러도 아무런 반응 없게 하기 위해
currentIdx !==0일때만 moveSlide 함수 불러옴 */
next.addEventListener('click', function () {
console.log("called");
if (currentIdx !== slideCount - 1) {
moveSlide(currentIdx + 1);
}
});
console.log(slideCount);
/* 마지막 슬라이드로 표시 됐을때는 다음 버튼 눌러도 아무런 반응 없게 하기 위해
currentIdx !==slideCount - 1 일때만 moveSlide 함수 불러옴 */
/////////////////////////////////////////////////////////
///메인페이지 모달 이름란 옆 ㅁ모달/
$(document).ready(function () {
$('#modal_open').click(function () {
console.log("open");
$('#modal').show();
})
$("#modal_close").click(function () {
$('#modal').hide();
console.log("close");
})
});
반응형