1. 프로젝트 소개나이키 공식 홈페이지의 클론 코딩 2. 프로젝트 설명프로젝트 기간2024년 10월 14일 ~ 2024년 11월 1일 사용 기술Programming LanguageJavaScriptStylingCSSFormattingESLint, PrettierVersion ControlGit, GithubDesignFigmaCommunicationNotion, Discord3. 프로젝트에서 맡은 역할3-1. 로그인나이키는 로그인 시 위와 같이 이메일 입력이 나오는데, 이메일이 기존에 존재하다면 바로 패스워드 입력 페이지로그게 아니라면 체크 약관 페이지로 넘어간다. 3-1-1. 이메일이 존재하지 않을 때  이렇게 이메일이 존재하지 않는다면 약관 페이지로 가는데, 위와 같이 체크에 대한 유효성도 추가해놨다..

하루하루에 많은 코드들이 수정이 되고, 구현이 되어간다.3일차 혹은 4일차이다. 이제 CSS가 대략적으로 완성이 되어가서 대략적인 CSS를 보여주겠다.원래 hover를 했을 때, 저렇게 생각이 변하지 않았는데, 공홈을 들어가보니 색상이 변하는 거였다. 그래서 코드퍼펙션을 위해 저렇게 스타일을 주었고, tabindex를 주어 웹접근성을 향상시켜주었다. tabindex란 tabindex 전역 특성은 요소가 포커스 가능함을 나타내며, 이름에서도 알 수 있듯, 주로 Tab 키를 사용하는 연속적인 키보드 탐색에서 어느 순서에 위치할지 지정한다.tabindex를 넣게되면 Tab키를 이용하여 움직일 수 있다. 근데 이것말고도 방향키로도 움직일 수 있는 것이 있다고 하는데, 그것은 다음에 기능 구현이 다 끝나면 그때 ..

1일차에 이어 하자면, 페이지를 구현하다 저 눈 표시가 고생을 많이 한 것 같았다. 저  버튼을 누르면 비밀번호가 보이고, 그리고 다시 눈 표시를 누르면 비밀번호가 보이지 않는다. 처음 인풋안에 아이콘을 넣는 것 또한 고민이 많이 되었다. 일단 처음에 어떻게 넣어야 하지, 그리고 어떻게 구현을 해야할까 구글링을 해보았다. 구글링을 보니 토글 형식으로, 누르면 작용을 하게 해놨다.일단 CSS 경우는 DIv로 저 input과 icon을 감싸고 감싸는 div를 relative로 만든 후, 아이콘을 absolute로 만든 후.close,.open { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); cursor: point..

1. 마크업 완성 시키기현재 내가 맡은 부분은 로그인 및 회원 가입이다.나이키 공식 홈페이지를 보면, 여기는 로그인과 회원가입이 따로 구분을 하지 않았다. 이메일을 입력하면 만약에 없다는 가정하에 아래와 같이 약관동의 페이자가 나온다.그 뒤에이렇게 입력 폼이 나오면 회원가입이 끝난다. 오랜만에 이러한 프로젝트를 진행하는데, 처음 프로젝트 세팅부터가 오래 걸린 것 같았다. 패키지 설치 및 노션 정리, 컨벤션 회의 등등....프로젝트 하기 전에는 많은 준비가 필요했다. 근데 당연한 것 같다. 하루 이틀 프로젝트도 아니고 3주짜리에, 이는 파이널을 위한 연습이기에 더욱 확실한 준비가 필요했다. 그래서 우리조의 경우는 빠르게 노션, 패키지를 정리한 후 각자 맡을 기능들을 빠르게 정했다. 나는 예전에 로그인 회원..