반응형
처음 강의를 듣게 된 것은 'HTML&CSS 실습'이다. 그중에서 이번 주에 해본 실습 중 instagrm의 피드 클론코딩을 작성해보려고 한다.
클론코딩이란?
클론코딩은 말 그대로 클론(clone)하는 코딩이다. 실제 존재하는 카카오톡, 유튜브, 인스타그램 등 우리가 자주 사용하는 서비스나 웹사이트를 따라 만드면서 배우는 공부 방식이다.
*인스타그램 피드는 figma라는 사이트에서 참고하여 만들었습니다.
[HTML 작성]
더보기
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./style-insta.css" />
<style> p {margin: 0px;}</style>
</head>
<body>
<div class="wrap">
<div class="instagram">
<div class="header">
<div class="headerLeft">
<img class="headerImg" src="./마카롱.png" width="38px" height="38px" />
<p>qorguswp</p>
</div>
<div class="headerRight">
<p class="rightMenu">···</p>
</div>
</div>
<div class="img"></div>
<div class="footer">
<div class="top-left">
<span>
class="bi bi-heart" viewBox="0 0 16 16">
<path
d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"
/>
</svg>
</span>
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chat"
viewBox="0 0 16 16"
>
<path
d="M2.678 11.894a1 1 0 0 1 .287.801 10.97 10.97 0 0 1-.398 2c1.395-.323 2.247-.697 2.634-.893a1 1 0 0 1 .71-.074A8.06 8.06 0 0 0 8 14c3.996 0 7-2.807 7-6 0-3.192-3.004-6-7-6S1 4.808 1 8c0 1.468.617 2.83 1.678 3.894zm-.493 3.905a21.682 21.682 0 0 1-.713.129c-.2.032-.352-.176-.273-.362a9.68 9.68 0 0 0 .244-.637l.003-.01c.248-.72.45-1.548.524-2.319C.743 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7-3.582 7-8 7a9.06 9.06 0 0 1-2.347-.306c-.52.263-1.639.742-3.468 1.105z"
/>
</svg>
</span>
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-send"
viewBox="0 0 16 16"
>
<path
d="M15.854.146a.5.5 0 0 1 .11.54l-5.819 14.547a.75.75 0 0 1-1.329.124l-3.178-4.995L.643 7.184a.75.75 0 0 1 .124-1.33L15.314.037a.5.5 0 0 1 .54.11ZM6.636 10.07l2.761 4.338L14.13 2.576 6.636 10.07Zm6.787-8.201L1.591 6.602l4.339 2.76 7.494-7.493Z"
/>
</svg>
</span>
</div>
<div class="top-center">
<ul>
<li style="background-color: rgb(28, 138, 255)"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="top-right">
<span>
class="bi bi-bookmark" viewBox="0 0 16 16"
>
<path
d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5V2zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1H4z"
/>
</svg>
</span>
</div>
<div class="like">
<p>100 Lieks</p>
</div>
<div class="comment">
<p>
<b>qorguswp</b> Lorem ipsum dolor sit amet consectetur adipisicing
elit. Aliquam, sunt deleniti vel eveniet cupiditate a iusto aut
dolores rerum quam. Minima autem magnam amet voluptates molestiae
ipsam id eveniet numquam.
</p>
</div>
</div>
</div>
</div>
</body>
</html>
[CSS 작성]
더보기
body{
background-color: #c6c6c6;
margin: 0px;
}
.wrap{
background-color: white;
width: 390px;
height: 100vh;
margin: 0px auto;
display: flex;
align-items: center
}
.instagram{
width: 100%;
height: 571px;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 50px 390px 1fr;
grid-template-areas:
"header"
"img"
"footer";
border-top: 1px solid lightgray;
border-bottom: 1px solid lightgray;
}
.header{
grid-area: header;
width: outo;
height: outo;
margin: 5px 10px;
font-weight: bold;
}
.headerLeft{
float: left;
display: flex;
align-items: center;
}
.headerRight{
float: right;
height: 100%;
display: flex;
align-items: center;
}
.rightMenu{
clear: both;
cursor: pointer;
user-select: none;
}
.headerImg{
border: 1px solid black;
border-radius: 50%;
margin-right: 10px;
}
.img{
grid-area: img;
width: 100%;
height: 100%;
background-image: url(./마카롱.png);
background-size: cover;
}
.footer{
grid-area: footer;
width: 100%;
height: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 50px auto auto;
grid-template-areas:
"top-left top-center top-right"
"like like like"
"comment comment comment";
}
.top-left{
grid-area: top-left;
display: flex;
font-size: 10px;
justify-content: space-evenly;
align-items: center;
width: 100%;
height: 100%;
}
.top-left span{
cursor: pointer;
}
.top-center{
grid-area: top-center;
display: flex;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
}
li{
width: 7px;
height: 7px;
background-color: lightgray;
border-radius: 50%;
}
ul{
display: flex;
justify-content: space-between;
list-style: none;
padding: 0px;
width: 50%;
}
.top-right{
grid-area: top-right;
display: flex;
justify-content: flex-end;
align-items: center;
margin-right: 15px;
}
.like{
grid-area: like;
font-size: 12px;
font-weight: bold;
margin-left: 10px;
}
.comment{
grid-area: comment;
font-size: 10px;
margin-left: 10px;
}
글을 마치며..
인스타그램 클론코딩을 하면서 총 3가지의 레이아웃 방법이 사용되어서 방황을 했던 기억이 난다. float은 요즘 잘 사용되진 않지만 간단한 레이아웃을 작성할 때 사용을 하고, flex / grid 이 두 가지 방법은 비교적 최신 레이아웃 방법이고 많이 사용되는 방식이어서 사용방법에 익숙해져야 할 것 같다.
한 주의 강의를 수강해보니 강의 내용대로 전부 따라 해보고 익히려고 하니 생각보다 많은 시간이 소요되었다. (이해를 해야 되고, 무조건 따라 해 봐야 되는 성격 때문에 시간이 더 소요된 걸 수도 있다.) 하지만 시간 없다고 무작정 듣기만 한다면 내가 할 수 있는 것에 한계가 생긴다고 생각하기 때문에, 시간 분배에 조금 더 신경을 쓰며 학습하는 것이 좋을 거 같다.
728x90
반응형
'front-end' 카테고리의 다른 글
| [컴퓨터 구성] 컴퓨터 본체 구성 및 용어 정리 (3) | 2023.03.09 |
|---|---|
| [운영체제] OS(운영체제) 프로세스 스케줄링 / 스케쥴링 알고리즘 시스템 종류 (0) | 2023.03.09 |
| [운영체제] 운영체제 컨텍스트 스위칭 (Context Switching) 정리 (0) | 2023.03.09 |
| [운영체제] 프로세스(Process) 구조 및 상태 정리 (0) | 2023.03.09 |
| 새로운 직무 'front-end' 공부 시작 (4) | 2023.03.08 |
댓글