로그인페이지 너 뭐냐?
살면서 처음 하는 페이지 구현을 하며 기대감 설렘반으로 시작했다.
시작과 동시에 양옆앞뒤 구분할거 없이 박스를 만드는 것을 보고 저 사람들은 분명 천재라고 생각했다. 부러워 할 시간도 없이 자신감을 가지고 구현을 하러 출발했다.
> 첫 로그인 페이지(박스만들기)
첫 로그인 페이지를 만들며 처음시작은 로그인창의 박스를 만들어 보았다
<body>
<div class="my-box">
<img
src="https://media.vlpt.us/images/sugyinbrs/post/9466b002-01b3-4ca3-8a1f-f1a857ab800a/Westagram.PNG"
style="width: 400px"
/>요굉장히 지저분하지만 나름 혼자서 만들어본 코드였다고 한다(뿌듯)
기본적으로 divclass 를 만들고 이미지를 넣었다.처음이라 그런지 css에 스타일을 주지않고 html 에다가 스타일을 만들어 버렸고 (최근에 안 사실이지만) 박스에 width 값과 height 값은 최대한 지양해야한다는걸 깨달아버렸다.. width 값과 height 값을 주면 박스를 추가할때마다 박스가 삐져나오기 때문!! 매번 수정할수 없으니 처음부터 토대를 잘 잡아야한다
> 로그인 창과 비밀번호 창 구현!
<div class="wrap">
<div class="login">
<input
type="text,number,email"
name=""
id="id"
placeholder="전화번호,사용자 이름 및 이메일 "
/>
<input type="password" name="" id="pw" placeholder="비밀번호" />
</div>
<div class="button box">
<button type="button" class="btn" disabled="disabled" />
<span1>로그인</span>
</div>
홀리몰리~ replit 시간때 배운 input type 을 이용한 로그인창과 비밀번호 창을 만들어 보았다 input type="text,number,email" 을 주면서 인스타그램과 똑같이 전화번호 , 이메일, 사용자이름을 넣을 수 있도록 구현하였다
또한 버튼박스에 div class 값을 줘서 css에서 버튼의 모양을 수정할 수 있도록 값을 주었다. 우하하하하하하
결과물 두두둥장!@#!@#!@
사실 만들지 2일이 지난 지금봐도 많이 모자란 결과물이지만 그래도 나름대로 최대한 비슷하게 만들려고 노력했다는건 안비밀.. 나름 모자라도... 귀엽지않나요??@!
어제보다 오늘 더 성장하는 Front-end 개발자