업로드한 제 git 주소는 "https://github.com/DingoFreestyle/insta_ui_clone"
입니다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
P {
display: flex;
margin: 5px auto auto auto;
max-width: 600px;
width: 80%;
border: 2px solid black;
height: 1000px
}
b {
font-size: 15px;
}
h5 {
display: flex;
flex-direction: row-reverse;
}
footer {
font-size: 8px;
opacity: 0.3;
}
</style>
<title>INSTAGRAM_COPY</title>
<!--폰트 링크-->
<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=Noto+Sans+KR&family=Noto+Serif+KR&display=swap" rel="stylesheet">
<!--제이쿼리 링크-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!--부트스트랩 링크-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<!--전체 태그 폰트 먹이기-->
<style>
*{ font-family: 'Jua', sans-serif;
}
</style>
</head>
<style>
.profile {
width: 30px;
height: 30px;
object-fit: cover;
object-position: center;
border-radius: 50%;
}
.head_feed {
display: table;
margin: 5px auto 5px auto;
width: 100%;
max-width: 600px;
max-width: 600px;
}
.fix_test {
position: fixed;
width: 100%;
max-width: 250px;
}
</style>
<body style="background-color: #fafafa">
<!--------------------------▼▼▼▼▼▼▼ 상단 고정 바 ▼▼▼▼▼▼▼------------------------------------->
<nav class="navbar navbar-expand-sm bg-white navbar-black fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="index.html"><img src="images/logo.png"></a>
<ul class="nav justify-content-center" style="width: 250px">
<form class="d-flex" style="width: 100%">
<input class="form-control me-2" style="background-color: #d3d3d3;" type="text" placeholder="Search">
</form>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.html"><img src="images/home_ico.png"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html"><img src="images/message_ico.png"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html"><img src="images/upload_ico.png"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html"><img src="images/freefeeds.png"></a>
</li>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html"><img src="images/alram_list.ico.png"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html"><img class="profile" src="images/id_image.jpg"></a>
</li>
</ul>
</ul>
</div>
</li>
</ul>
</form>
</div>
</nav>
<!--------------------------▲▲▲▲▲▲ 상단 고정 바 ▲▲▲▲▲▲------------------------------------->
<div class="container" style="margin-top: 80px; max-width: 1000px">
<div class="row">
<!--●●●●●●●●●●●●●●피드공간●●●●●●●●●●●●●●●●●●●●●●-->
<div class="col" style="max-width: 620px">
<!--피드001-->
<div class="head_feed bg-white" style="border: 0.5px solid #b4b4b4">
<div class="d-flex flex-column">
<!--▼▼▼▼▼▼▼▼▼▼▼▼▼ID▼▼▼▼▼▼▼▼▼▼▼▼▼-->
<div class="p-2">
<div class="d-flex" href="index.html">
<div class="p-2"><img class="profile" src="images/ids/9gag.png"></div>
<div class="p-2"><h4><b>9gag meme factory</b></h4></div>
<div class="p-2 flex-grow-1"><h5>•••</h5></div>
</div>
</div>
<!--▲▲▲▲▲▲▲▲▲▲▲▲▲ID▲▲▲▲▲▲▲▲▲▲▲▲▲-->
<!--▼▼▼▼▼▼▼▼▼▼▼▼▼사진▼▼▼▼▼▼▼▼▼▼▼▼▼-->
<div class="p-2" style="padding: 0px">
<div id="feed001" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#feed001" data-slide-to="0" class="active"></li>
<li data-target="#feed001" data-slide-to="1"></li>
<li data-target="#feed001" data-slide-to="2"></li>
<li data-target="#feed001" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="images/main_pics/A001.png" style="width:100%;">
</div>
<div class="item">
<img src="images/main_pics/A002.png" style="width:100%;">
</div>
<div class="item">
<img src="images/main_pics/A003.jpg" style="width:100%;">
</div>
<div class="item">
<img src="images/main_pics/A004.png" style="width:100%;">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#feed001" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#feed001" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!--▲▲▲▲▲▲▲▲▲▲▲▲▲사진▲▲▲▲▲▲▲▲▲▲▲▲▲-->
<!--▼▼▼▼▼▼▼▼▼▼▼▼▼좋아요▼▼▼▼▼▼▼▼▼▼▼▼▼-->
<div class="p-2">
<div class="d-flex" href="index.html">
<div class="p-2"><img src="images/alram_list.ico.png"></div>
<div class="p-2"><img src="images/dm.png"></div>
<div class="p-2"><img src="images/message_ico.png"></div>
<div class="p-2 flex-grow-1"><h5><img src="images/save_post.png"></h5></div>
</div>
</div>
<!--▲▲▲▲▲▲▲▲▲▲▲▲▲좋아요▲▲▲▲▲▲▲▲▲▲▲▲▲-->
<!--▼▼▼▼▼▼▼▼▼▼▼▼▼멘트▼▼▼▼▼▼▼▼▼▼▼▼▼-->
<div class="p-2">
<h4><b>좋아요 0개</b></h4>
<h4><b>9gag meme factory</b></h4><h6>❤❤❤❤❤❤❤</h6>
</div>
<!--▲▲▲▲▲▲▲▲▲▲▲▲▲멘트▲▲▲▲▲▲▲▲▲▲▲▲▲-->
<!--▼▼▼▼▼▼▼▼▼▼▼▼▼댓글입력창▼▼▼▼▼▼▼▼▼▼▼▼▼-->
<div class="p-2">
<div class="d-flex">
<div class="p-2"><img src="images/emoticon.png"></div>
<div class="p-2"><input class="form-control" type="text" placeholder="댓글 달기..."
style="border: 2px solid white"></div>
<div class="p-2 flex-grow-1"><h5 style="color: dodgerblue">게시</h5></div>
</div>
</div>
<!--▲▲▲▲▲▲▲▲▲▲▲▲▲댓글입력창▲▲▲▲▲▲▲▲▲▲▲▲▲-->
</div>
</div>
<!--피드002-->
<div class="head_feed bg-white" style="border: 0.5px solid #b4b4b4">
<div class="d-flex flex-column">
<!--▼▼▼▼▼▼▼▼▼▼▼▼▼ID▼▼▼▼▼▼▼▼▼▼▼▼▼-->
<div class="p-2">
<div class="d-flex" href="index.html">
<div class="p-2"><img class="profile" src="images/ids/me.jpg"></div>
<div class="p-2"><h4><b>memecollector</b></h4></div>
<div class="p-2 flex-grow-1"><h5>•••</h5></div>
</div>
</div>
<!--▲▲▲▲▲▲▲▲▲▲▲▲▲ID▲▲▲▲▲▲▲▲▲▲▲▲▲-->
<!--▼▼▼▼▼▼▼▼▼▼▼▼▼사진▼▼▼▼▼▼▼▼▼▼▼▼▼-->
<div class="p-2">
<div id="feed002" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#feed002" data-slide-to="0" class="active"></li>
<li data-target="#feed002" data-slide-to="1"></li>
<li data-target="#feed002" data-slide-to="2"></li>
<li data-target="#feed002" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="images/main_pics/B001.png" style="width:100%;">
</div>
<div class="item">
<img src="images/main_pics/B002.jpg" style="width:100%;">
</div>
<div class="item">
<img src="images/main_pics/B003.jpg" style="width:100%;">
</div>
<div class="item">
<img src="images/main_pics/B004.png" style="width:100%;">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#feed002" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#feed002" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!--▲▲▲▲▲▲▲▲▲▲▲▲▲사진▲▲▲▲▲▲▲▲▲▲▲▲▲-->
<!--▼▼▼▼▼▼▼▼▼▼▼▼▼좋아요▼▼▼▼▼▼▼▼▼▼▼▼▼-->
<div class="p-2">
<div class="d-flex" href="index.html">
<div class="p-2"><img src="images/alram_list.ico.png"></div>
<div class="p-2"><img src="images/dm.png"></div>
<div class="p-2"><img src="images/message_ico.png"></div>
<div class="p-2 flex-grow-1"><h5><img src="images/save_post.png"></h5></div>
</div>
</div>
<!--▲▲▲▲▲▲▲▲▲▲▲▲▲좋아요▲▲▲▲▲▲▲▲▲▲▲▲▲-->
<!--▼▼▼▼▼▼▼▼▼▼▼▼▼멘트▼▼▼▼▼▼▼▼▼▼▼▼▼-->
<div class="p-2">
<h4><b>좋아요 0개</b></h4>
<h4><b>memecollector</b></h4><h6>화이팅!</h6>
</div>
<!--▲▲▲▲▲▲▲▲▲▲▲▲▲멘트▲▲▲▲▲▲▲▲▲▲▲▲▲-->
<!--▼▼▼▼▼▼▼▼▼▼▼▼▼댓글입력창▼▼▼▼▼▼▼▼▼▼▼▼▼-->
<div class="p-2">
<div class="d-flex">
<div class="p-2"><img src="images/emoticon.png"></div>
<div class="p-2"><input class="form-control" type="text" placeholder="댓글 달기..."
style="border: 2px solid white"></div>
<div class="p-2 flex-grow-1"><h5 style="color: dodgerblue">게시</h5></div>
</div>
</div>
<!--▲▲▲▲▲▲▲▲▲▲▲▲▲댓글입력창▲▲▲▲▲▲▲▲▲▲▲▲▲-->
</div>
</div>
<!--피드003-->
<div class="head_feed bg-white" style="border: 0.5px solid #b4b4b4">
<div class="d-flex flex-column">
<!--▼▼▼▼▼▼▼▼▼▼▼▼▼ID▼▼▼▼▼▼▼▼▼▼▼▼▼-->
<div class="p-2">
<div class="d-flex" href="index.html">
<div class="p-2"><img class="profile" src="images/ids/9gag.png"></div>
<div class="p-2"><h4><b>9gag meme factory</b></h4></div>
<div class="p-2 flex-grow-1"><h5>•••</h5></div>
</div>
</div>
<!--▲▲▲▲▲▲▲▲▲▲▲▲▲ID▲▲▲▲▲▲▲▲▲▲▲▲▲-->
<!--▼▼▼▼▼▼▼▼▼▼▼▼▼사진▼▼▼▼▼▼▼▼▼▼▼▼▼-->
<div class="p-2">
<div id="feed003" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#feed003" data-slide-to="0" class="active"></li>
<li data-target="#feed003" data-slide-to="1"></li>
<li data-target="#feed003" data-slide-to="2"></li>
<li data-target="#feed003" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="images/main_pics/c001.jpg" style="width:100%;">
</div>
<div class="item">
<img src="images/main_pics/c002.jpg" style="width:100%;">
</div>
<div class="item">
<img src="images/main_pics/c003.png" style="width:100%;">
</div>
<div class="item">
<img src="images/main_pics/c004.jpg" style="width:100%;">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#feed003" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#feed003" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!--▲▲▲▲▲▲▲▲▲▲▲▲▲사진▲▲▲▲▲▲▲▲▲▲▲▲▲-->
<!--▼▼▼▼▼▼▼▼▼▼▼▼▼좋아요▼▼▼▼▼▼▼▼▼▼▼▼▼-->
<div class="p-2">
<div class="d-flex" href="index.html">
<div class="p-2"><img src="images/alram_list.ico.png"></div>
<div class="p-2"><img src="images/dm.png"></div>
<div class="p-2"><img src="images/message_ico.png"></div>
<div class="p-2 flex-grow-1"><h5><img src="images/save_post.png"></h5></div>
</div>
</div>
<!--▲▲▲▲▲▲▲▲▲▲▲▲▲좋아요▲▲▲▲▲▲▲▲▲▲▲▲▲-->
<!--▼▼▼▼▼▼▼▼▼▼▼▼▼멘트▼▼▼▼▼▼▼▼▼▼▼▼▼-->
<div class="p-2">
<h4><b>좋아요 0개</b></h4>
<h4><b>9gag meme factory</b></h4><h6>jesus meme</h6>
</div>
<!--▲▲▲▲▲▲▲▲▲▲▲▲▲멘트▲▲▲▲▲▲▲▲▲▲▲▲▲-->
<!--▼▼▼▼▼▼▼▼▼▼▼▼▼댓글입력창▼▼▼▼▼▼▼▼▼▼▼▼▼-->
<div class="p-2">
<div class="d-flex">
<div class="p-2"><img src="images/emoticon.png"></div>
<div class="p-2"><input class="form-control" type="text" placeholder="댓글 달기..."
style="border: 2px solid white"></div>
<div class="p-2 flex-grow-1"><h5 style="color: dodgerblue">게시</h5></div>
</div>
</div>
<!--▲▲▲▲▲▲▲▲▲▲▲▲▲댓글입력창▲▲▲▲▲▲▲▲▲▲▲▲▲-->
</div>
</div>
</div>
<!--●●●●●●●●●●●●●●우측footer●●●●●●●●●●●●●●●●●●●●●●-->
<div class="col" style="max-width: 300px">
<div class="fix_test">
<div class="p-2">
<!--내 계정 공간-->
<div class="d-flex" href="index.html">
<div class="p-2"><img class="profile" src="images/ids/me.jpg" style="margin-right: 5px"><b>memecollector</b></div>
<div class="p-2 flex-grow-1"><h5 style="color: blue; font-size: 15px">전환</h5></div>
</div>
<!--회원 추천 공간-->
<div class="p-2"><h6>회원님을 위한 추천</h6></div>
<div class="d-flex" href="index.html">
<div class="p-2"><img class="profile" src="images/ids/long_shutter.jpg" style="margin-right: 5px"><b>long_shutter</b></div>
<div class="p-2 flex-grow-1"><h5 style="color: blue; font-size: 15px" >팔로우</h5></div>
</div>
<!--FOOTER-->
<footer style="margin-top: 60px">INSTAGRAM UI CLONING</footer>
<footer>ⓒ 2022 MEMESTAGRAM FROM UPPER PRICE</footer>
</div>
</div>
</div>
</div>
</div>
<script>
var win = $(window);
$("p:last").text("scroollTop:" + win.scrollTop());
</script>
</body>
</html>
안녕하세요! 코드 잘봤습니다 너무 수고많으셨어요!
제가 과정 수강생분들이 현재까지 어떻게 공부해오셨는지에 대해서 배경이 조금 부족하다보니 피드백 방향이 완벽하지 않을 수 있다는 점 양해부탁드릴게요!
개인적으로 몇 가지 부분만 보완하시면 더 좋을 것 같습니다!
1. css, js 부분은 다른 파일로 분리해놓고 불러와서 사용하는 형태로 작성하신다면 더 좋을 것 같습니다. (코드 가독성 및 관리를 위해서요!)
2. 마지막에 footer 태그를 2번 사용하셨는데, 웬만하면 footer 태그 하나로 감싸고 그 안에서 margin-top을 적용하기 위한 태그를 하나 더 만들어서 스타일을 적용시키는 것을 추천드립니다.
3. 그리고 p-2 클래스가 적용된 div가 과도하게 많이 쓰이고 있는 것 같은데, 정말 해당 부분에 div태그를 써서 감싸는게 꼭 필요한 건지 한번만 더 점검해보시면 좋을 것 같습니다. 모든 줄을 다 div태그로 꼭 감싸야할 필요는 없습니다. 동일한 스타일을 적용시키고 싶으신거면 굳이 div태그 없이 클래스만 적용하는 방식을 고려해보셔도 괜찮을 것 같습니다.
마지막으로, 완성하셨다고 그냥 넘어가지 마시고 시간나실때 작성하신 코드 한번씩 더 살펴보시면서 조금 더 코드를 효율적으로 작성하기 위한 방법에 대해 연구해보시면 더욱 좋을 것 같습니다!
수고많으셨어요!