내일배움캠프 - Instagram clone coding - (2) 1일차 개발일지

Dongwoo Kim·2022년 4월 28일

clone coding 개발일지 내일배움캠프 스파르타코딩클럽

내일배움캠프 - 프로젝트

목록 보기

6/12

스파르타 코딩클럽

내일배움캠프 AI 웹개발자양성과정 2회차

2022.04.28. Instagram web UI clone coding - (2) 1일차 개발일지

0. 프로젝트 정보

1) 인스타그램 Web UI 클론 코딩
2) 목적

프론트엔드의 레이아웃을 알아보고 알맞은 태그와 속성을 이용하여 배치할 수 있는 능력 상승
반응형 레이아웃 만들어보기

3) 진행상황 : 반응형 데모, 헤더, 프로필 부분 구현
4) 개발 못한 부분 : 스토리, 메인 포스트 부분

1. 반응형 데모

instagram의 레이아웃을 반응형으로 만들고자 div설정으로 데모버전을 만들어 봄.

index.html

 <!-- Required meta tags -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!--css 파일 불러오기!-->
    <link href="/static/css/common.css" rel="stylesheet" type="text/css"/>

    <title>Instgram clone</title>
</head>
<body>
<div class="column_1"></div>
<div class="column_2"></div>


</body>
</html>

common.css

.column_1 {
    width: 300px;
    height: 300px;
    background-color: green;
    float: left;
}

.column_2 {
    width: 300px;
    height: 300px;
    background-color: blue;
    float: left;
}

@media (max-width: 800px) {
    .column_1 {
        float: none;
    }

    .column_2 {
        float: none;
    }
}