search

the-kingdoms / study-fe

0 stars 0 forks source link

인스타그램 메인화면 클론코딩 #1

Open DeveloperRyou opened 1 year ago

DeveloperRyou commented 1 year ago

기본 명세 사이트 : https://www.instagram.com/

참고자료 : https://velog.io/@hye_rin/VanillaJS-%EC%9D%B8%EC%8A%A4%ED%83%80%EA%B7%B8%EB%9E%A8-%ED%81%B4%EB%A1%A0%EC%BD%94%EB%94%A9

첫번째 과제입니다. html, css, js 만 이용해서 링크에 나오는 로그인 페이지를 최대한 비슷하게 만들어봅시다.

필수 구현

  1. 로그인 페이지의 레이아웃, 디자인과 같은 형태의 페이지
    1. 참고자료처럼 핸드폰 그림은 제외하고 중앙정렬로 구현해주세요
    2. 아이콘과 그림은 제외하고 구현해주세요
  2. 링크 이동은 google.com으로 이동처리
    1. 기존창이 이동하게끔 처리해주세요
    2. 마우스를 올려놓았을 때 커서가 포인터로 변경되어야 합니다.
  3. 일정한 길이의 id, pw 입력시 로그인 버튼 활성화 (임의의 길이를 정해주세요)
  4. 활성화 상태의 로그인 버튼 클릭시 js의 alert 함수 호출, id, pw를 alert 를 통해서 확인할 수 있게 구현

보너스 구현

  1. 화면 크기가 변하더라도 무너지지 않는 레이아웃 (반응형 디자인)
  2. 이미지 파일을 활용해서 아이콘, 로고 넣기
DeveloperRyou commented 1 year ago

개발 방법

  1. 저장소를 clone 받아주세요.
  2. 각자의 깃허브 id 로 된 브랜치를 생성해주세요.
  3. 해당 브랜치로 checkout 하여 개발을 진행합니다. 이때, 본인의 id로 적힌 폴더를 생성하고 개발해주세요.
  4. 기능 개발 이후 commit, push를 진행해주세요. 커밋은 많을 수록 좋습니다. 파일 다 만들고 커밋하지 마시고, 한 파일에서도 기능 단위로 커밋해주세요.
  5. 코드리뷰가 필요하거나 과제 완료시 main 브랜치로 pr(풀리퀘스트)를 보내주세요.

코드 작성 도중 궁금증 (깃 사용방법, html, css, js 문법, 과제 명세, 버그 등등...) 이 생기시면 이슈를 만들어 댓글을 남겨주세요!