오늘은 인스타클론코딩을 한 코드를 올려드리겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<!-- 구글폰트 -->
<link href="https://fonts.googleapis.com/css?family=Stylish&display=swap" rel="stylesheet">
<title>instagram</title>
<style>
/*-------- 전체 부분 시작 --------*/
body {
max-height: 100%;
max-width: 100%;
margin: 0;
background-color: #FAFAFA;
}
a {
text-decoration-line: none;
}
/*-------- 전체 부분 끝 --------*/
/*-------- nav 부분 시작 --------*/
/*nav 설정*/
.nav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: justify;
justify-content: space-between;
}
/*nav 전체 부분*/
.container-fluid {
display: flex;
position: fixed;
width: 100%;
height: 60px;
background-color: #ffffff;
border-bottom: 1px solid #DBDBDB;
bottom: 880px;
justify-content: space-between;
}
/*Instagram 글자 부분*/
.navbar-instagram {
margin-left: 470px;
margin-top: 20px;
}
/*검색창 위치 부분*/
.search-window {
margin-left: 165px;
margin-top: 13px;
margin-bottom: 10px;
font-size: 16px;
}
/*검색창 부분*/
.form-control {
background-color: #EFEFEF;
border: none;
border-radius: 8px;
width: 268px;
height: 36px;
}
/*아이콘 위치 부분*/
.ikon {
display: flex;
padding-top: 18px;
margin-right: 465px;
}
/*아이콘 전체 위치*/
.all-ikon {
margin-left: 22px;
}
/*내 프로필 부분 이미지 크기*/
.myimg {
width: 22px;
height: 22px;
}
/*-------- nav 부분 끝 --------*/
/*-------- story 부분 시작 --------*/
/*story 부분*/
.story {
background-color: #ffffff;
border: 1px solid #DBDBDB;
width: 614px;
height: 120px;
margin-left: 484px;
border-radius: 3px;
margin-top: 84px;
}
/*story-text 부분*/
.story-text {
margin-left: 20px;
padding-top: 7px;
font-size: 12px;
}
.story-circle1 {
width: 56px;
height: 56px;
border-radius: 50%;
margin-top: 22px;
margin-left: 22px;
}
/*-------- story 부분 끝 --------*/
/*-------- main 부분 시작 --------*/
/*메인 부분*/
.main {
width: 614px;
margin-left: 484px;
margin-top: 24px;
}
/*메인-이름 부분 */
.header-name {
background-color: #ffffff;
border-radius: 2px;
height: 61px;
border: 1px solid #DBDBDB;
padding: 16px;
}
/*메인-이름 > 이미지 부분 */
.header-name > img {
width: 32px;
height: 32px;
border-radius: 50%;
}
/*메인-이름 > span 부분 */
.header-name > span {
margin-left: 10px;
}
/*메인-사진 부분 */
.main-img {
width: 614px;
height: 615px;
border-bottom: 1px solid #DBDBDB;
border-left: 1px solid #DBDBDB;
border-right: 1px solid #DBDBDB;
background-size: cover;
}
/*메인-아이콘 부분 */
.main-follow {
background-color: #ffffff;
padding: 6px 16px 0px 16px;
height: 55px;
border-left: 1px solid #DBDBDB;
border-right: 1px solid #DBDBDB;
}
/*메인- 댓글 부분 */
.main-comments {
background-color: #ffffff;
padding: 0px 16px 0px 16px;
height: 105px;
border-left: 1px solid #DBDBDB;
border-right: 1px solid #DBDBDB;
line-height: 18px;
}
/*메인- 댓글 이미지 부분 */
.comments-img {
width: 20px;
height: 20px;
margin-right: 8px;
border-radius: 50%;
}
/*메인- 댓글 P 부분 */
.comments > p {
margin: 0;
font-size: 14px;
}
/*메인- 댓글 > P > span 부분 */
.comments > p > span {
font-weight: 500;
}
/*메인- 댓글 p:nth-child(1) 부분 */
.comments > p:nth-child(1) {
padding-bottom: 10px;
}
/*메인- 댓글 p:nth-child(3) 부분 */
/*.comments > p:nth-child(3) > span {*/
/* color: #8E8E8E;*/
/*}*/
/*메인- 댓글 p:nth-child(4) 부분 */
.comments > p:nth-child(4) {
color: #8E8E8E;
}
/*메인- 댓글 p:nth-child(5) 부분 */
.comments > p:nth-child(5) {
font-size: 10px;
margin-bottom: 5px;
color: #8E8E8E;
}
/*메인- 댓글 입력창 부분 */
.main-input {
background-color: #ffffff;
padding: 6px;
border-radius: 2px;
width: 614px;
height: 54px;
border: 1px solid #DBDBDB;
}
/*메인-아이콘 부분 위치 */
.main-follow {
padding-top: 7px;
}
/*메인-하트 아이콘 위치 부분 */
.love {
margin-right: 9px;
}
/*메인- 말풍선 아이콘 위치 부분 */
.comment_leave {
margin-right: 9px;
}
/*메인- 비행기 아이콘 위치 부분 */
.sharing {
margin-right: 9px;
}
/*메인- 즐겨찾기 아이콘 위치 부분 */
.save {
margin-left: 440px;
margin-top: 10px;
}
/*오른쪽 화면 부분*/
.follow-page {
position: fixed;
right: 380px;
bottom: 420px;
background-color: #FAFAFA;
padding-top: 10px;
width: 400px;
height: 380px;
font-size: 14px;
}
/*내 프로필 원형 부분*/
.my-circle {
width: 52px;
height: 52px;
border-radius: 50%;
}
/*내 프로필 전체 부분*/
.my-profile {
display: flex;
}
/*내 프로필 id 부분*/
.myid {
padding-left: 20px;
font-weight: 600;
}
/*내 프로필 이름 부분*/
.myname {
color: #8E8E8E;
}
/*내 프로필 전환 부분*/
.change {
padding-left: 160px;
font-weight: 600;
font-size: 12px;
color: #0095f6;
}
/*회원님을 위한 추천 전체 부분*/
.recommendation {
display: flex;
margin-top: 15px;
}
/*회원님을 위한 추천*/
.recommendation-1 {
color: #8E8E8E;
font-weight: 600;
font-size: 14px;
}
/*모두 보기*/
.recommendation-2 {
margin-left: 130px;
font-size: 12px;
font-weight: 600;
}
/*서브 프로필 원형 부분*/
.sub-circle {
width: 32px;
height: 32px;
border-radius: 50%;
}
/*서브 프로필 전체 부분*/
.sub-profile {
display: flex;
}
/*서브 프로필 id 부분*/
.sub-id {
padding-left: 20px;
font-weight: 600;
line-height: 18px;
}
/*서브 프로필 이름 부분*/
.sub-name {
color: #8E8E8E;
}
/*서브 프로필 전환 부분*/
/*도화가*/
.sub-follow1 {
padding-left: 155px;
font-weight: 600;
font-size: 12px;
color: #0095f6;
}
/*인파이터*/
.sub-follow2 {
padding-left: 155px;
font-weight: 600;
font-size: 12px;
color: #0095f6;
}
/*기공사*/
.sub-follow3 {
padding-left: 160px;
font-weight: 600;
font-size: 12px;
color: #0095f6;
}
/*홀리나이트*/
.sub-follow4 {
padding-left: 145px;
font-weight: 600;
font-size: 12px;
color: #0095f6;
}
/*아르카나*/
.sub-follow5 {
padding-left: 160px;
font-weight: 600;
font-size: 12px;
color: #0095f6;
}
/*-------- main 부분 끝 --------*/
/*-------- footer 부분 시작 --------*/
.footer {
width: 100%;
height: 200px;
margin-top: 30px;
background-color: #ffffff;
color: #8E8E8E;
border-top: 1px solid #DBDBDB;
text-align: center;
line-height: 100px;
}
/*-------- footer 부분 끝 --------*/
</style>
</head>
<body>
<!--상단 nav-->
<nav class="nav">
<div class="container-fluid">
<a href="#" class="navbar-instagram"><img src="instagram.png"/></a>
<form class="search-window">
<input class="form-control material-icons-outlined me-2" type="search" placeholder="검색" aria-label="Search">
</form>
<div class="ikon">
<div class="home-ikon all-ikon">
<a href="#"><svg aria-label="홈" class="_8-yf5 " color="#262626" fill="#262626" height="24" role="img"
viewBox="0 0 24 24" width="24">
<path d="M22 23h-6.001a1 1 0 01-1-1v-5.455a2.997 2.997 0 10-5.993 0V22a1 1 0 01-1 1H2a1 1 0 01-1-1V11.543a1.002 1.002 0 01.31-.724l10-9.543a1.001 1.001 0 011.38 0l10 9.543a1.002 1.002 0 01.31.724V22a1 1 0 01-1 1z"></path>
</svg></a>
</div>
<div class="airplane-ikon all-ikon">
<a href="#"><svg aria-label="Direct" class="_8-yf5 " color="#262626" fill="#262626" 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></a>
</div>
<div class="plus-ikon all-ikon">
<a href="#"><svg aria-label="새로운 게시물" class="_8-yf5 " color="#262626" fill="#262626" height="24" role="img"
viewBox="0 0 24 24" width="24">
<path d="M2 12v3.45c0 2.849.698 4.005 1.606 4.944.94.909 2.098 1.608 4.946 1.608h6.896c2.848 0 4.006-.7 4.946-1.608C21.302 19.455 22 18.3 22 15.45V8.552c0-2.849-.698-4.006-1.606-4.945C19.454 2.7 18.296 2 15.448 2H8.552c-2.848 0-4.006.699-4.946 1.607C2.698 4.547 2 5.703 2 8.552z"
fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2"></path>
<line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" x1="6.545" x2="17.455" y1="12.001" y2="12.001"></line>
<line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" x1="12.003" x2="12.003" y1="6.545" y2="17.455"></line>
</svg></a>
</div>
<div class="compass-ikon all-ikon">
<a href="#"><svg aria-label="사람 찾기" class="_8-yf5 " color="#262626" fill="#262626" height="24" role="img"
viewBox="0 0 24 24" width="24">
<polygon fill="none" points="13.941 13.953 7.581 16.424 10.06 10.056 16.42 7.585 13.941 13.953"
stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2"></polygon>
<polygon fill-rule="evenodd"
points="10.06 10.056 13.949 13.945 7.581 16.424 10.06 10.056"></polygon>
<circle cx="12.001" cy="12.005" fill="none" r="10.5" stroke="currentColor" stroke-linecap="round"
stroke-linejoin="round" stroke-width="2"></circle>
</svg></a>
</div>
<div class="heart-ikon all-ikon">
<a href="#"><svg aria-label="활동 피드" class="_8-yf5 " color="#262626" fill="#262626" 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></a>
</div>
<a href="#"><img class="myimg all-ikon" src="리퍼 아이콘.png"/></a>
</div>
</div>
</nav>
<div class="main-Content">
<!--스토리 부분-->
<div class="story">
<div>
<a href="https://lostark.game.onstove.com/Promotion/Update/220427/Elgacia"><img class="story-circle1" src="로아 아이콘.png"></a>
<div class="story-text">
<p>lostark.com</p>
</div>
</div>
</div>
<!--메인 부분-->
<div class="main">
<div class="header-name">
<img src="리퍼 아이콘.png"/>
<span>Reaper</span>
</div>
<div><img class="main-img" src="잔혈.png"/></div>
<div class="main-follow">
<svg aria-label="좋아요" class="love" color="#262626" fill="#262626" 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>
<svg aria-label="댓글 달기" class="comment_leave" color="#262626" fill="#262626" 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>
<svg aria-label="게시물 공유" class="sharing " color="#262626" fill="#262626" 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>
<svg aria-label="저장" class="save" color="#262626" fill="#262626" 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>
</div>
<div class="main-comments">
<div class="comments">
<p class="good"><img class="comments-img" src="홀리 아이콘.png"/><span>Holy Night</span>님 외 <span>178,046명</span>이 좋아합니다</p>
<p><span>Reaper<span> 하브 6관문 잔혈 먹었습니다 ㅠㅠ</p>
<p><span>Holy Night<span> 리퍼님 같이 레이드 가실래요?</p>
<p>댓글 2,216개 모두 보기</p>
<p>5월 1일</p>
</div>
</div>
<div>
<input class="main-input" type="search" placeholder="댓글 달기..." aria-label="Search">
</div>
</div>
<!--메인 부분-->
<div class="main">
<div class="header-name">
<img src="도화가 아이콘.png"/>
<span>Artist</span>
</div>
<div><img class="main-img" src="도화가 사진.jpg"/></div>
<div class="main-follow">
<svg aria-label="좋아요" class="love" color="#262626" fill="#262626" 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>
<svg aria-label="댓글 달기" class="comment_leave" color="#262626" fill="#262626" 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>
<svg aria-label="게시물 공유" class="sharing " color="#262626" fill="#262626" 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>
<svg aria-label="저장" class="save" color="#262626" fill="#262626" 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>
</div>
<div class="main-comments">
<div class="comments">
<p class="good"><img class="comments-img" src="알카 아이콘.png"/><span>Dualist</span>님 외 <span>452,544명</span>이 좋아합니다</p>
<p><span>Artist<span> 귀여운 도화가 보고가세요~</p>
<p><span>Dualist<span> 너무 귀엽다ㅠㅠㅠ</p>
<p>댓글 9,999개 모두 보기</p>
<p>5월 1일</p>
</div>
</div>
<div>
<input class="main-input" type="search" placeholder="댓글 달기..." aria-label="Search">
</div>
</div>
<!--메인 부분-->
<div class="main">
<div class="header-name">
<img src="인파 아이콘.png"/>
<span>InFighter</span>
</div>
<div><img class="main-img" src="스카우터.jpg"/></div>
<div class="main-follow">
<svg aria-label="좋아요" class="love" color="#262626" fill="#262626" 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>
<svg aria-label="댓글 달기" class="comment_leave" color="#262626" fill="#262626" 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>
<svg aria-label="게시물 공유" class="sharing " color="#262626" fill="#262626" 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>
<svg aria-label="저장" class="save" color="#262626" fill="#262626" 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>
</div>
<div class="main-comments">
<div class="comments">
<p class="good"><img class="comments-img" src="기공사 아이콘.png"/><span>Soul Fist</span>님 외 <span>222,222명</span>이 좋아합니다</p>
<p><span>InFighter<span> 보석 2개 숨지마라 유산스카!</p>
<p><span>Scout</span> 저 안숨었어요..</p>
<p>댓글 746개 모두 보기</p>
<p>4월 19일</p>
</div>
</div>
<div>
<input class="main-input" type="search" placeholder="댓글 달기..." aria-label="Search">
</div>
</div>
<div class="follow-page">
<div class="my-profile">
<img class="my-circle" src="리퍼 아이콘.png"/>
<p class="myid">Reaper<br>
<span class="myname">리퍼</span></p>
<p class="change">전환</p>
</div>
<div class="recommendation">
<p class="recommendation-1">회원님을 위한 추천</p>
<p class="recommendation-2">모두 보기</p>
</div>
<div class="sub-profile">
<img class="sub-circle" src="유산 아이콘.png"/>
<p class="sub-id">Scout<br>
<span class="sub-name">스카우터</span></p>
<p class="sub-follow1">팔로우</p>
</div>
<div class="sub-profile">
<img class="sub-circle" src="인파 아이콘.png"/>
<p class="sub-id">InFighter<br>
<span class="sub-name">인파이터</span></p>
<p class="sub-follow2">팔로우</p>
</div>
<div class="sub-profile">
<img class="sub-circle" src="기공사 아이콘.png"/>
<p class="sub-id">Soul Fist<br>
<span class="sub-name">기공사</span></p>
<p class="sub-follow3">팔로우</p>
</div>
<div class="sub-profile">
<img class="sub-circle" src="홀리 아이콘.png"/>
<p class="sub-id">Holy Night<br>
<span class="sub-name">홀리나이트</span></p>
<p class="sub-follow4">팔로우</p>
</div>
<div class="sub-profile">
<img class="sub-circle" src="알카 아이콘.png"/>
<p class="sub-id">Dualist<br>
<span class="sub-name">아르카나</span></p>
<p class="sub-follow5">팔로우</p>
</div>
</div>
<div class="footer">
<p>소개/도움말/홍보/센터API채용/정보개인정보처리방침/약관/위치/인기 계정/해시태그/언어<br>
© 2022 INSTAGRAM FROM META</p>
</div>
</div>
</body>
</html>
후기
이번 개인프로젝트로는 인스타클론코딩을 해보았습니다.
프로젝트를 하면서 느낀점들은 저번 파이썬으로 게임만들기 할때는 하나도 몰라서 거의다 유튜브 영상보면서 따라하기만하고 뭔가 제가 습득한 느낌이 많이 없던것 같아서 이번에는 스스로 생각만으로
해서 만들어 보았습니다. 제 기준으로는 이렇게 저의 힘만으로 만들고나니까 뿌듯하고 습득된것들이 많은거 같았는데, 다른분들이 하신걸보니까 너무 비교된다..라는 느낌이 들었습니다. 다른분들은
제가 생각하지도 못한 것들을 보안하시면서 만드시고, 신선한 방법과 깔끔하게 만드신분들이 많았던것 같습니다. 이번에 느낀것으로는.. 어느정도는 정보들을 찾아보면서 만들어보자 입니다.. ㅠㅠ
자기개발을 해서 발전하는 미래의 개발자
안녕하세요 민재님! 김준태 튜터입니다!
코드를 살펴보았는데요, 몇 가지 부분만 보완하시면 좋을 것 같습니다.
1. css, js 부분은 다른 파일로 분리해놓고 불러와서 사용하는 형태로 작성하신다면 더 좋을 것 같습니다. (코드 가독성 및 관리를 위해서요!)
2. sub-follow 부분들을 보면 스타일이 거의 동일한 것 같은데 지금은 조금 비효율적인 것 같아서요. 우선은 동일한 스타일이 적용된 하나의 클래스를 만드신 후에, 달라질 부분에 대해서 다른 클래스를 추가로 만드셨다면 좋았을 것 같습니다!
고생많으셨습니다!