$$config title: [ ? ] InstaKG 화면구현 keywords: - 로그인 - 메인페이지 - 처음화면 $$ # 화면 구현 및 소스코드 ## 로그인 ### ?‍ 동작화면 ![](https://ifh.cc/g/MVNosk.jpg) ### ? 주요소스코드 #### [ 반응형코드 (반응형 넓이 고정) ] ```css /* 미디어의 넓이가 435px 이상이면 body태그에 상단여백이 200px 설정됩니다. */ @media ( min-width : 435px) { body { margin-top: 200px; } } /* 미디어의 넓이가 860xp이하이면 id="hidden" 사라집니다.*/ /* id="860px의 최대 넓이가 400px로 변경됩니다."*/ @media ( max-width : 860px) { #hidden { display: none; } #860px{ max-width:400px; } } ``` ## 회원가입 ### ?‍ 동작화면 ![](https://ifh.cc/g/TpwrtH.png) ### ? 주요소스코드 #### [ 회원가입 소스 ] ```html

친구들의 사진과 동영상을 보려면 가입하세요.

또는

서비스를 이용하는 사람이 회원님의 연락처 정보를 Instakg에 업로드했을 수도 있습니다.

휴대폰 번호 또는 이메일이 다르거나 사용자 이름이 불가능합니다. 다른 이름을 사용하세요.

계정이 있으신가요? 로그인

``` ## 메인화면 게시물 ### ?‍ 동작화면 ![](https://ifh.cc/g/HLasyx.jpg) ### ? 주요소스코드 #### [ 게시물 프로필 설정 ] ```html

사용자1

사용자1님 외 123,456명이 좋아합니다.

사용자2 이 댓글은 1번입니다

사용자3 이 댓글은 2번입니다

사용자4 이 댓글은 3번입니다

1시간 전...

```