JOOHUUN
인스타 클론코딩_1 본문
https://github.com/joohuun/insta.git
css 파일은 깃허브 참조바랍니다.
GitHub - joohuun/insta
Contribute to joohuun/insta development by creating an account on GitHub.
github.com
1. 네비바 HTML
<nav>
<div class="navbar">
<div class="container-fluid" style="justify-content: center">
<div style="margin-right:150px">
<a class="navbar-brand" href="#"> <!--인스타그램 로고-->
<img src="https://www.instagram.com/static/images/web/mobile_nav_type_logo.png/735145cfe0a4.png">
</a>
</div>
<div class="inputbox" style="margin-right:170px;">
<div style="margin-top: %">
<i class="fas fa-search" style="font-size: 15px"></i>
<input class="search-box" type="search" placeholder="검색" aria-label="search" style="border: none; ">
<!--검색창-->
</div>
</div>
<div> <!--내비바 이이콘-->
<span class="material-icons-outlined">home</span>
<span class="material-icons-outlined">send</span>
<span class="material-icons-outlined">add_box</span>
<span class="material-icons-outlined">explore</span>
<span class="material-icons-outlined">favorite_border</span>
<span class="material-icons-outlined">account_circle</span>
</div>
</div>
</div>
</nav>
2. 바디는 네비바, div 2개의 큰틀로 구성
<body>
<nav></nav>
<div class="main"></div>
</bod>
아래 이미지 처럼 main div를 왼쪽 스토리피드, 오른쪾 팔로우 추천창으로 다시 나누었다.
2-1. 왼쪽 스토리피드의 구성, 한개의 스토리를 cards라고 지정하였고 그 묶음을 card_wrap으로 하였다
<div class="card_wrap">
<section>
<div class="cards ">
<div class="card_top"> <!--스토리 상단-->
<div class="box"> <!--스토리 상단.프사틀-->
<img class="profile_img"
src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMTExMDdfMjE3%2FMDAxNjM2Mjc3MjU5MTQy.ltys7zGqWWmUxzrVEz87nfkV8wWl3vYeYHntA7mrHNwg.E6sJDDY45FRqoZx0Vz7E8-Urz6RWj2YIqWcBU39_Y1Ug.JPEG.thisismeji617%2FIMG_0519.JPG&type=sc960_832">
</div>
<div class="profile_name"> <!--스토리 상단 프사 이름-->
<b>JOOHUUN</b>
</div>
</div>
<div class="card_mid"> <!--스토리 중단-->
<div class="mid_img"> <!--스토리 중단.이미지-->
<img style="width: 98%; height: 98%"
src="https://search.pstatic.net/common/?src=https%3A%2F%2Fldb-phinf.pstatic.net%2F20220129_244%2F1643388623958mAqrn_JPEG%2F1593230565064.jpg&type=sc960_832">
</div>
</div>
<div class="card_bottom"> <!--스토리 하단-->
<div class="bottom_icons"> <!--스토리 하단 아이콘-->
<div>
<span class="material-icons-outlined">favorite_border</span>
<span class="material-icons-outlined">mode_comment</span>
<span class="material-icons-outlined">send</span>
</div>
<div class="bottom_icons_border">
<span class="material-icons-outlined">bookmark_border</span>
</div>
</div>
<div style="text-align: left; font-size:14px; padding-left: 2.5%">
<b>좋아요 57개</b>
</div>
<div style="text-align: left; font-size:14px; padding: 1% 0 0 2.5%;">
<b>JOOHUUN</b> 너무 맛있고~
</div>
</div>
<div class="comment">
<div style="border-top: solid 1px #e1dbdb">
<input type="text" class="form-control" placeholder="댓글달기..."
style="box-shadow: none; padding-top:2%; border: none; outline: none">
</div>
</div>
</div>3. 자바스크립트를 활용하여 피드 계속 불러오기
addContent.innerHTML에 반복 하여 불러올 HTML 삽입
var count = 10;
window.onscroll = function (e) {
console.log(window.innerHeight, window.scrollY, document.body.offsetHeight)
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
setTimeout(function () {
var addContent = document.createElement("div");
addContent.classList.add("cards")
addContent.innerHTML = ` <div class="cards ">
<div class="card_top"> <!--스토리 상단-->
<div class="box"> <!--스토리 상단.프사틀-->
<img class="profile_img"
src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMTExMDdfMjE3%2FMDAxNjM2Mjc3MjU5MTQy.ltys7zGqWWmUxzrVEz87nfkV8wWl3vYeYHntA7mrHNwg.E6sJDDY45FRqoZx0Vz7E8-Urz6RWj2YIqWcBU39_Y1Ug.JPEG.thisismeji617%2FIMG_0519.JPG&type=sc960_832">
</div>
<div class="profile_name"> <!--스토리 상단 프사 이름-->
<b>JOOHUUN</b>
</div>
</div>
<div class="card_mid"> <!--스토리 중단-->
<div class="mid_img"> <!--스토리 중단.이미지-->
<img style="width: 98%; height: 98%"
src="https://search.pstatic.net/common/?src=https%3A%2F%2Fldb-phinf.pstatic.net%2F20220129_244%2F1643388623958mAqrn_JPEG%2F1593230565064.jpg&type=sc960_832">
</div>
</div>
<div class="card_bottom"> <!--스토리 하단-->
<div class="bottom_icons"> <!--스토리 하단 아이콘-->
<div>
<span class="material-icons-outlined">favorite_border</span>
<span class="material-icons-outlined">mode_comment</span>
<span class="material-icons-outlined">send</span>
</div>
<div class="bottom_icons_border">
<span class="material-icons-outlined">bookmark_border</span>
</div>
</div>
<div style="text-align: left; font-size:14px; padding-left: 2.5%">
<b>좋아요 57개</b>
</div>
<div style="text-align: left; font-size:14px; padding: 1% 0 0 2.5%;">
<b>JOOHUUN</b> 너무 맛있고~
</div>
</div>
<div class="comment">
<div style="border-top: solid 1px #e1dbdb">
<input type="text" class="form-control" placeholder="댓글달기..."
style="box-shadow: none; padding-top:2%; border: none; outline: none">
</div>
</div>
</div>
` // addContent.innerHTML = `<p>${++count}번째 블록</p>`
document.querySelector('section').appendChild(addContent);
}, 200)
}
}4. 문제점..
1) 자바스크립트 무한대로 불러옴...
2) 반응형웹,,,화면 축소시 네비바 아이콘이 자리 이탈
Comments