본문 바로가기
TIL 및 WIL/TIL (Today I Learned)

[TIL] 2022.05.02 (인스타 UI 클론 코딩)

J1NU2 2022. 5. 2. 14:48

인스타그램 UI 클론 코딩

인스타그램 UI 클론 코딩

 

구현 코드

 

1. index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="/static/common.css" rel="stylesheet" type="text/css"/>
    <link href="/static/navi.css" rel="stylesheet" type="text/css"/>
    <link href="/static/article.css" rel="stylesheet" type="text/css">
    <link href="/static/main_right.css" rel="stylesheet" type="text/css">

    <title>Coonstagram</title>
    <link rel="icon" href="/image/title_icon.png">
</head>
<body>
<!-- 상단 메뉴 navigation -->
<nav>
    <div class="nav_container">
        <div class="nav1">
            
            <img class="logo_text" src="/image/instagram_logo.png" alt="Instagram_logo">
        </div>
        <input id="search_icon" type="search" class="input_search" placeholder="검색">
        <div class="nav2">
            <img src="/image/home.png" alt="홈">
            <img src="/image/DM.png" alt="DM">
            <img src="/image/posting.png" alt="포스팅">
            <img src="/image/other_feeds.png" alt="탐색">
            <img src="/image/heart0.png" alt="좋아요">
            <img class="profile_picture" src="/image/r_icon1.png" alt="마이페이지">
        </div>
    </div>
</nav>

<!-- 전체 페이지 내용 -->
<main>
    <div class="feeds">
        <!-- 1 article -->
        <article>
            <!-- 상단 타이틀 프로필 사진 및 닉네임 -->
            <header>
                <div class="article_profile">
                    <img class="profile_img profile_picture"
                         src="/image/r_icon1.png"
                         alt="rak_00n 프로필 사진">
                    <span class="profile_id_margin id_span id_user">rak_00n</span>
                </div>
                <img class="icon_react icon_more"
                     src="/image/more.png"
                     alt="more">
            </header>
            <!-- 메인으로 들어 갈 feed 사진 -->
            <div class="feed_picture">
                <img src="/image/r_feed5.png" alt="rak_00n 피드 사진" class="picture">
            </div>
            <!--feed 사진 밑에 아이콘 요소 -->
            <div class="icons_react">
                <div class="icons_react_left">
                    <img class="icon_react"
                         src="/image/heart0.png"
                         alt="좋아요">
                    <img class="icon_react"
                         src="/image/comment.png"
                         alt="댓글보기">
                    <img class="icon_react"
                         src="/image/DM.png"
                         alt="DM">
                </div>
                <img class="icon_react"
                     src="/image/bookmark.png"
                     alt="북마크">
            </div>
            <!-- feed text -->
            <div class="feed_reaction">
                <div class="liked_people">
                    <img class="profile_picture"
                         src="/image/r_icon5.png"
                         alt="Rock_cn 프로필 사진">
                    <p><span class="id_span">Rock_cn</span>님 <span class="id_span">외 1,823마리</span>가 좋아합니다</p>
                </div>
                <div class="content">
                    <p><span class="id_span id_user">rak_00n</span><span class="tag">@Rock_cn</span>시원한 자리 선점 중!</p>
                </div>
                <div class="comment_section">
                    <ul class="comments">
                        <li>
                            <span><span class="id_span id_user">Rock_cn</span>돌 바닥이 시원해..</span>
                            <img class="comments_like"
                                 src="/image/heart0.png"
                                 alt="좋아요">
                        </li>
                    </ul>
                    <div class="time_log">
                        <span>2분 전</span>
                    </div>
                </div>
            </div>
            <div class="div_line"></div>
            <!-- input comment-->
            <input id="input_text_comment" type="text" class="input_comment" placeholder="댓글 달기...">
            <button type="submit" class="submit_comment" disabled>게시</button>
        </article>
        <!-- 2 article -->
        <article>
            <!-- 상단 타이틀 프로필 사진 및 닉네임 -->
            <header>
                <div class="article_profile">
                    <img class="profile_img profile_picture"
                         src="/image/r_icon1.png"
                         alt="rak_00n 프로필 사진">
                    <span class="profile_id_margin id_span id_user">rak_00n</span>
                </div>
                <img class="icon_react icon_more"
                     src="/image/more.png"
                     alt="more">
            </header>
            <!-- 메인으로 들어 갈 feed 사진 -->
            <div class="feed_picture">
                <img src="/image/r_feed1.png" alt="rak_00n 피드 사진" class="feed_picture">
            </div>
            <!--feed 사진 밑에 아이콘 요소 -->
            <div class="icons_react">
                <div class="icons_react_left">
                    <img class="icon_react"
                         src="/image/heart0.png"
                         alt="좋아요">
                    <img class="icon_react"
                         src="/image/comment.png"
                         alt="댓글보기">
                    <img class="icon_react"
                         src="/image/DM.png"
                         alt="DM">
                </div>
                <img class="icon_react"
                     src="/image/bookmark.png"
                     alt="북마크">
            </div>
            <!-- feed text -->
            <div class="feed_reaction">
                <div class="liked_people">
                    <img class="profile_picture"
                         src="/image/r_icon6.png"
                         alt="cute_racoon 프로필 사진">
                    <p><span class="id_span">cute_racoon</span>님 <span class="id_span">외 22,169마리</span>가 좋아합니다</p>
                </div>
                <div class="content">
                    <p><span class="id_span id_user">rak_00n</span><span class="tag">@cute_racoon</span>라쿤계 최강 귀요미!!</p>
                </div>
                <div class="comment_section">
                    <ul class="comments">
                        <li>
                            <span><span class="id_span id_user">cute_racoon</span>잘 찍어주셔서 감사해요~</span>
                            <img class="comments_like"
                                 src="/image/heart0.png"
                                 alt="좋아요">
                        </li>
                    </ul>
                    <div class="time_log">
                        <span>1일 전</span>
                    </div>
                </div>
            </div>
            <div class="div_line"></div>
            <!-- input comment-->
            <input id="input_text_comment" type="text" class="input_comment" placeholder="댓글 달기...">
            <button type="submit" class="submit_comment" disabled>게시</button>
        </article>
        <!-- 3 article -->
        <article>
            <!-- 상단 타이틀 프로필 사진 및 닉네임 -->
            <header>
                <div class="article_profile">
                    <img class="profile_img profile_picture"
                         src="/image/r_icon1.png"
                         alt="rak_00n 프로필 사진">
                    <span class="profile_id_margin id_span id_user">rak_00n</span>
                </div>
                <img class="icon_react icon_more"
                     src="/image/more.png"
                     alt="more">
            </header>
            <!-- 메인으로 들어 갈 feed 사진 -->
            <div class="feed_picture">
                <img src="/image/r_feed4.png" alt="rak_00n 피드 사진" class="feed_picture">
            </div>
            <!--feed 사진 밑에 아이콘 요소 -->
            <div class="icons_react">
                <div class="icons_react_left">
                    <img class="icon_react"
                         src="/image/heart0.png"
                         alt="좋아요">
                    <img class="icon_react"
                         src="/image/comment.png"
                         alt="댓글보기">
                    <img class="icon_react"
                         src="/image/DM.png"
                         alt="DM">
                </div>
                <img class="icon_react"
                     src="/image/bookmark.png"
                     alt="북마크">
            </div>
            <!-- feed text -->
            <div class="feed_reaction">
                <div class="liked_people">
                    <img class="profile_picture"
                         src="/image/r_icon10.png"
                         alt="Funny_racoon 프로필 사진">
                    <p><span class="id_span">Funny_racoon</span>님 <span class="id_span">외 2,477마리</span>가 좋아합니다</p>
                </div>
                <div class="content">
                    <p><span class="id_span id_user">rak_00n</span><span class="tag">@Funny_racoon</span>진짜 못생겼다..</p>
                </div>
                <div class="comment_section">
                    <ul class="comments">
                        <li>
                            <span><span class="id_span id_user">Funny_racoon</span>언제 찍었냐!! ㅋㅋㅋ</span>
                            <img class="comments_like"
                                 src="/image/heart0.png"
                                 alt="좋아요">
                        </li>
                    </ul>
                    <div class="time_log">
                        <span>4일 전</span>
                    </div>
                </div>
            </div>
            <div class="div_line"></div>
            <!-- input comment-->
            <input id="input_text_comment" type="text" class="input_comment" placeholder="댓글 달기...">
            <button type="submit" class="submit_comment" disabled>게시</button>
        </article>
    </div>
    <!-- main right box -->
    <div class="right_box">
        <!-- my profile -->
        <div class="my_profile">
            <img class="profile_picture"
                 src="/image/r_icon1.png"
                 alt="rak_00n 프로필 사진">
            <div class="my_profile_text">
                <span class="id_user id_span">rak_00n</span>
                <span class="sub_id_span">너구리</span>
            </div>
            <div>
                <span class="btn_switch">전환</span>
            </div>
        </div>
        <!-- recommendation section -->
        <div class="recommend">
            <div class="recommend_title">
                <span class="recommend_title_text">회원님을 위한 추천</span>
                <span class="recommend_btn_more">모두 보기</span>
            </div>
            <ul class="recommend_list">
                <li>
                    <div class="recommend_friend_profile">
                        <img class="profile_img profile_picture"
                             src="/image/r_icon5.png"
                             alt="Rock_cn 프로필 사진">
                        <div class="profile_text">
                            <span class="id_user id_span">Rock_cn</span>
                            <span class="sub_id_span">NongShim_racoon님 외 3마리가 팔로우합니다.</span>
                        </div>
                    </div>
                    <span class="recommend_btn_follow">팔로우</span>
                </li>
                <li>
                    <div class="recommend_friend_profile">
                        <img class="profile_img profile_picture"
                             src="/image/r_icon7.png"
                             alt="NongShim_racoon 프로필 사진">
                        <div class="profile_text">
                            <span class="id_user id_span">NongShim_racoon</span>
                            <span class="sub_id_span">인기</span>
                        </div>
                    </div>
                    <span class="recommend_btn_follow">팔로우</span>
                </li>
                <li>
                    <div class="recommend_friend_profile">
                        <img class="profile_img profile_picture"
                             src="/image/r_icon10.png"
                             alt="Funny_racoon 프로필 사진">
                        <div class="profile_text">
                            <span class="id_user id_span">Funny_racoon</span>
                            <span class="sub_id_span">인기</span>
                        </div>
                    </div>
                    <span class="recommend_btn_follow">팔로우</span>
                </li>
                <li>
                    <div class="recommend_friend_profile">
                        <img class="profile_img profile_picture"
                             src="/image/r_icon6.png"
                             alt="cute_racoon 프로필 사진">
                        <div class="profile_text">
                            <span class="id_user id_span">cute_racoon</span>
                            <span class="sub_id_span">Rock_cn님 외 1마리가 팔로우합니다.</span>
                        </div>
                    </div>
                    <span class="recommend_btn_follow">팔로우</span>
                </li>
                <li>
                    <div class="recommend_friend_profile">
                        <img class="profile_img profile_picture"
                             src="/image/r_icon2.png"
                             alt="get_rid_of_racoon 프로필 사진">
                        <div class="profile_text">
                            <span class="id_user id_span">get_rid_of_racoon</span>
                            <span class="sub_id_span">Die_racoon님 외 3마리가 처치됐습니다.</span>
                        </div>
                    </div>
                    <span class="recommend_btn_follow">팔로우</span>
                </li>
            </ul>
        </div>
        <footer>
            <p>박진우 ∙ 너구리 ∙ ENFJ ∙ 냠냠쓰
                <br>
                <br>
                © 2022 COONSTAGRAM FROM META
            </p>
        </footer>
    </div>
</main>
</body>
</html>

 

2. common.css
/* HTML 구간 전체적인 설정 */
body {
    background-color: #FFFFFF;
    padding: 0;
    margin: 0;
}

p, span {
    font-size: 14px;
}

ul, li {
    margin: 0;
    padding: 0;
    list-style-type: none;
    list-style-position: inside;
}

/* 프로필 아이콘 테두리를 둥글게 만들기 */
.profile_picture {
    border-radius: 100%;
}

/* profile 이미지 */
.profile_img {
    width: 35px;
    height: 35px;
    border: 1px solid #FFFFFF;
}

 

3. navi.css
/* 상단 메뉴 전체 navigation */
nav {
    width: 100%;
    height: 55px;
    position: fixed; /* 고정하기 위해 사용 */
    display: flex; /* 수평 */
    justify-content: center; /* 가로 축 정렬 */
    background-color: #FFFFFF;
    border-bottom: 1px solid #DBDBDB; /* 실제 인스타그램에서 사용하는 실선 색깔 코드 */
}

/* navigation 박스 */
.nav_container {
    max-width: 1000px;
    padding: 0 20px;
    display: flex; /* 수평 */
    align-items: center; /* 세로 축 정렬 */
}

/* Instagram 로고 박스 */
.nav1 {
    width: 370px;
    display: flex; /* 수평 */
    align-items: center; /* 세로 축 정렬 */
}

/* Instagram 로고 크기 */
.logo_text {
    height: 30px;
}

/* 아이콘 박스 */
.nav2 {
    width: 370px;
    display: flex; /* 수평 */
    align-items: center; /* 세로 축 정렬 */
    justify-content: flex-end; /* 가로 축 정렬 : 우측 */
}

/* 아이콘 이미지 */
.nav2 img {
    height: 25px;
    margin-left: 25px;
}

/* 검색 기능 */
.input_search {
    width: 250px;
    height: 25px;
    padding: 5px;
    box-sizing: content-box; /* content 영역을 기준으로 크기를 맞춤*/

    /* 테두리 */
    border: 1px solid #DBDBDB;
    border-radius: 10px;

    background-color: #FFFFFF;
    background-image: url("https://cdn-icons.flaticon.com/png/128/2120/premium/2120967.png?token=exp=1651415010~hmac=6a629f32482f32f0f6116133880353c6");
    background-size: 16px;
    background-repeat: no-repeat; /* 이미지 반복 여부 */
    background-position: 6% center;

    text-indent: 15%; /* 들여쓰기 */
    font-size: 15px;
}

/* 검색 칸 선택 시 상태 */
.input_search:focus {
    outline: none; /* 선택 시 바뀌는 테두리 값이 없음 */
}

 

4. article.css
/* 내용들 feeds, 우측 프로필 박스 */
main {
    width: 980px;
    margin: 0 auto;
    padding-top: 94px;
    padding-bottom: 40px;
}

/* feeds가 들어갈 박스 */
.feeds {
    width: 614px;
    margin-right: 34px;
    display: inline-block; /* 줄바꿈 없는 block */
}

/* 하나의 feed 구역 */
article {
    margin-bottom: 60px;
    background-color: #FFFFFF;
    border-radius: 3px;
    border: 1px solid #DBDBDB;
}

/* article 내 header */
header {
    height: 60px;
    padding: 0 16px;
    display: flex; /* 수평 */
    align-items: center; /* 세로 축 센터 */
    justify-content: space-between; /* 사이 간 간격 생성 */
}

/* article 내 profile 위치 */
.article_profile {
    display: flex; /* 수평 */
    align-items: center; /* 세로 축 센터 */
}

/* profile 텍스트 여백 */
.profile_id_margin {
    margin-left: 15px;
    margin-right: 5px;
}

/* 닉네임 span 설정 */
.id_span {
    font-weight: 500;
    font-size: 15px;
    color: #222222;
}

/* span id_user에 모든 요소 적용 */
span.id_user {
    margin-right: 5px;
}

/* feed 사진 박스 */
.feed_picture{
    width: 612px;
    height: 480px;
    background-position: center; /* 사진 위치 */
    background-size: cover; /* 사진 크기 맞춤 */
}

.picture {
    width: 612px;
    height: 480px;
}

/* feed 박스 내 전체 아이콘 */
.icons_react {
    height: 40px;
    padding: 10px 15px 10px 15px;
    display: flex; /* 수평 */
    align-items: center; /* 세로 축 센터 */
    justify-content: space-between; /* 사이 간 간격 생성 */
}

/* icons_react의 좌측 아이콘 정렬 */
.icons_react_left {
    display: flex; /* 수평 */
    align-items: center; /* 세로 축 센터 */
}

/* feed 박스 내 각 하나의 아이콘 */
.icon_react {
    width: 25px;
    height: 25px;
}

/* icons_react_left 내부의 icon_react 설정 */
.icons_react_left .icon_react {
    margin-right: 14px;
}

/* more 아이콘 */
.icon_more {
    justify-self: end; /* 가장 우측 */
}

/* feed 박스 내 반응 및 내용 */
.feed_reaction {
    padding: 0 16px;
}

/* feed_reaction 안에 들어가는 사람들의 반응 */
.liked_people {
    height: 18px;
    margin: 2px 0 8px 0;
    display: flex; /* 수평 */
    align-items: center; /* 세로 축 센터 */
}

/* liked_people 안에 들어가는 프로필 이미지 */
.liked_people img {
    width: 20px;
    height: 20px;
    margin-right: 4px;
    border: 1px solid #FFFFFF;
    display: inline-block; /* 줄바꿈 없는 block */
}

/* liked_people 안에 들어가는 문단(p) */
.liked_people p {
    font-size: 14px;
    color: #222222;
    display: inline-block; /* 줄바꿈 없는 block */
}

/* feed 내용 박스 */
.content {
    height: 18px;
    display: flex; /* 수평 */
    align-items: center; /* 세로 축 센터 */
}

/* 태그 색상 */
.tag {
    color: #00376B; /* 인스타 태그 색상 */
    margin-right: 5px;
}

/* comment가 있는 부분 */
.comment_section {

}

/* ul comment에 모든 요소 적용*/
ul.comments {
    margin-top: 5px;
}

/* ul comment에 속한 모든 요소 안에 li 설정 */
ul.comments li {
    height: 21px;
    font-size: 14px;
    color: #222222;
    display: flex; /* 수평 */
    justify-content: space-between; /* 사이 간 간격 생성 */
}

/* 댓글 좋아요 아이콘 설정 */
.comments_like {
    width: 12px;
    height: 12px;
}

/* 댓글이 달린 시간 */
.time_log {
    margin-bottom: 8px;
}

/* time_log의 span 설정 */
.time_log span {
    height: 18px;
    font-size: 12px;
    color: #8E8E8E;
}

/* comment 구간과 input_comment 구간을 나눠주는 실선 */
.div_line {
    border-top: 1px solid #DBDBDB;
    width: 612px;
}

/* comment를 적는 구간 */
.input_comment {
    width: 560px;
    height: 18px;
    padding: 28px 16px;
    font-size: 14px;
    border-style: none; /* 테두리가 없는 스타일 */
    box-sizing: border-box; /* 테두리와 margin의 크기를 고려하여 설정 */
    color: #222222;
}

/* comment 댓글 칸 선택 시 상태 */
.input_comment:focus {
    outline: none; /* 선택 시 바뀌는 테두리 값이 없음 */
}

/* comment의 placeholder 설정 */
.input_comment::placeholder {
    color: #8E8E8E;
}

/* comment 등록 버튼 */
button.submit_comment {
    width: 40px;
    height: 40px;
    padding: 4px;
    background-color: #FFFFFF;
    font-size: 14px;
    font-weight: 600;
    border-style: none; /* 테두리가 없는 스타일 */
    color: #0095f6; /* 실제 인스타 게시 버튼 색상 */
}

/* 버튼이 선택됐을 때 상태 */
button.submit_comment:focus {
    outline: none; /* 선택 시 바뀌는 테두리 값이 없음 */
}

/* comment 등록 버튼이 disabled 상태일 경우 */
.submit_comment:disabled {
    color: #B9DFFC; /* 실제 인스타 disabled 상태인 게시 버튼 색상 */
}

 

5. main_right.css
/* 메인 화면 우측에 들어가는 박스 */
.right_box {
    width: 310px;
    display: inline-block; /* 줄바꿈 없는 block */
    position: fixed; /* 고정 위치 지정 방식, 추가로 top right bottom left 값 지정*/
    top: 94px;
}

/* 내 프로필을 표시해줄 공간 */
.my_profile {
    width: 315px;
    height: 50px;
    margin-top: 10px;
    margin-bottom: 25px;
    padding-left: 12px;
    padding-right: 12px;
    display: flex; /* 수평 */
    align-items: center; /* 세로 축 센터 */
}

/* my_profile 안에 들어가는 img 설정 */
.my_profile img {
    width: 55px;
    height: 55px;
}

/* my_profile 안에 있는 div 설정 */
.my_profile div {
    display: inline-block; /* 줄바꿈 없는 block */
    margin-left: 14px;
}

/* my_profile의 div 안에 있는 span 설정 */
.my_profile div span {
    display: block; /* 수직 */
}

/* my_profile의 div 안에 있는 span.id_user의 모든 속성 */
.my_profile div span.id_user {
    margin-bottom: 4px;
}

/* my_profile 텍스트 구간 */
.my_profile_text {
    width: 198px;
    display: inline-block; /* 줄바꿈 없는 block */
    margin: 12px 10px 10px 8px;
}

/* 닉네임이 아닌 실명 기입 구간 */
span.sub_id_span {
    font-size: 12px;
    color: #8E8E8E;
}

/* 전환 버튼 구간 */
.btn_switch {
    font-size: 12px;
    font-weight: 600;
    color: #0095F6; /* 실제 인스타 전환 버튼 색상 */
}

/* 추천 박스 구간 */
.recommend {
    width: 310px;
    height: 285px;
    padding: 14px 16px;
    background-color: #FFFFFF;
    /* 테두리를 표시하고 싶다면 사용 */
    /*border-radius: 3px;*/
    /*border: 1px solid #DBDBDB;*/
    overflow-y: hidden; /* 만약 프로필이 y축으로 넘어가면 안보이도록 설정 */
}

/* 추천 박스 상단 타이틀 */
.recommend_title {
    margin-bottom: 14px;
    display: flex; /* 수평 */
    align-items: center; /* 세로 축 센터 */
    justify-content: space-between; /* 사이 간 간격 생성 */
}

/* 상단 타이틀 텍스트 */
.recommend_title_text {
    font-size: 14px;
    font-weight: 600;
    color: #8E8E8E;
}

/* 모두 보기 */
.recommend_btn_more {
    font-size: 12px;
    font-weight: 600;
    color: #222222;
}

/* 추천 리스트 목록의 li 설정 */
.recommend_list li {
    display: flex; /* 수평 */
    align-items: flex-start; /* flex 요소 앞쪽부터 */
    justify-content: space-between; /* 사이 간 간격 생성 */
}

/* 추천 친구의 프로필 */
.recommend_friend_profile {
    width: 270px;
    display: flex; /* 수평 */
    align-items: flex-start; /* flex 요소 앞쪽부터 */
}

/* 추천 친구의 프로필 텍스트 */
.profile_text {
    width: 220px;
    display: inline-block; /* 줄바꿈 없는 block */
    margin: 0 10px 10px 8px;
}

/* profile_text 안에 있는 span 요소 */
.profile_text span {
    display: block; /* 수직 */
}

/* profile_text span의 id_user 설정 */
.profile_text span.id_user {
    margin-bottom: 2px;
}

/* 팔로우 */
.recommend_btn_follow {
    font-size: 12px;
    font-weight: 600;
    color: #0095F6; /* 실제 인스타 전환 버튼 색상 */
}

/* 박스 하단에 footer 설정 */
footer p {
    margin-top: 18px;
    font-size: 11px;
    color: #c7c7c7;
    line-height: 18px;
}

 

이번 개인 프로젝트에 대한 KPT

https://sdrtst.tistory.com/30

 

[KPT] 22.04.25 ~ 22.05.02 (개인 프로젝트 KPT)

구현한 프로젝트 - 프로젝트 : pygame 게임 만들기(개인), Instagram UI 클론 코딩(개인). 프로젝트를 개발하며 느낀 점 : pygame 게임 만들기 : Python을 이용하여 처음으로 게임을 만들어 보았다. 기초 문

sdrtst.tistory.com

 

끝으로..

개인적으로 이번 프로젝트에서 많은 아쉬움이 남았던 것 같다.

구현하고자 싶던 추가 기능들에 대해서 구현을 못했던 것이 가장 큰 아쉬움이 남았다.

 

nav의 search 아이콘을 추가하고 난 뒤, 포스팅 사진의 carousel 기능과 포스팅 내용 글의 more 기능을 추가하고 싶었으나 결국 완성하지 못했다.

 

특히 carousel 기능에 대해 많은 시간을 투자하며 시도를 해보았지만 결국 구현하지 못하고 골머리를 썩혔는데, 그래서 그런지 해당 기능에 대한 애착을 더 심하게 느꼈다.

 

주어진 시간 내에 완성하지 못했다는 점과 역량에 있어 부족했었다는 점을 느꼈던 프로젝트였다.

 

:T

'TIL 및 WIL > TIL (Today I Learned)' 카테고리의 다른 글

[TIL] 2022.05.04 (인스타 UI 클론 코딩 - 팀 프로젝트2)  (0) 2022.05.04
[TIL] 2022.05.03 (인스타 UI 클론 코딩 - 팀 프로젝트1)  (0) 2022.05.03
[TIL] 2022.04.28 (가위바위보 CLI게임, 인스타 UI 클론 코딩1)  (1) 2022.04.28
[TIL] 2022.04.27 (Python 문법 연습, pygame 개인 프로젝트)  (2) 2022.04.27
[TIL] 2022.04.26 (Python 문법 기초2, 짧은 개인 프로젝트 영상)  (1) 2022.04.26

'TIL 및 WIL/TIL (Today I Learned)' Related Articles

티스토리툴바