코린이의 회원가입 페이지 만들기 (1)
게시글 주소: https://orbi.kr/00065855319
안녕하세요 뱁새입니다 (۶•<•)۶❗️
오늘은 회원가입 페이지의 뼈대를 세우고 꾸미는 과정을 살펴봅시다
그럼 시작해볼까요?
1st. html로 회원가입 페이지의 뼈대 만들기
회원가입 페이지가 될 html 전체 코드입니다 (후에 js를 건드릴 때에 수정이 될 수도?)
위 코드에 대한 설명을 하자면
1. 이전 로그인 페이지를 만들 때와 마찬가지로 placeholder 속성을 사용해
아무것도 입력을 하지 않는 상태에서 이 입력칸이 가진 목적이 무엇인지 나타내도록 하였습니다
2. maxlength를 이용해 최대 입력 가능 글자수에 제한을 두었습니다
3. 생년월일란에 주석 (초록색으로 표시된 부분)을 달아 이후 js를 건드릴 때 어떻게 구현을 할 것인지 간단히 서술해놓았습니다
2nd. css로 회원가입 페이지 꾸미기
위 html 코드를 실행시켜보면
이런 화면이 보이게 되는데 많이 어색하지요?
이는 css를 적용하지 않아 그렇습니다
앞서 만든 로그인 페이지와 같은 스타일을 주기 위해 검사 도구로 elements를 찍어가며 코드를 입력해주도록 합시다
짠 완성입니다
흠.. 그런데 뭔가 좀 어색하단 말이죠
분명 제가 원한 그림은 이거였는데
어째서 아이디 입련란과 중복 체크 그리고 생년월일이 가로 배치가 되지 않은 걸까요?
한 번 수정을 해봅시다
가장 먼저 생년월일을 수정할 건데요
위 코드에서 birth_date 클래스에 display: flex; 를 추가하면 자식 요소들이 가로로 배치될 수 있을 것 같습니다
과연..
유레카!
드디어 가로 정렬이 되었습니다 But, 튀어나온부분이 거슬리는군요..
손 좀 봐주도록 합시다 
birth_date 클래스 안의 요소들이 같은 너비를 가지도록 33%의 너비를 할당해주고 요소들에는 외부 여백을, 클래스에는 내부 여백을 줘보았습니다
잘 해결이 되었는지 결과를 한 번 볼까요?
캬 이궈궈던~ 한 잔해~
그럼 다음으로 아이디 입력란과 중복 체크 버튼을 가로로 배치해봅시다
생년월일을 수정했을 때와 마찬가지로 id_form 클래스에 display: flex; 를 부여해주고
id_form 클래스 안의 첫번째 요소에는 70%, 두번째 요소에는 20%의 너비를 할당, margin으로 외부 여백을 적절히 줘보면..
3rd. 페이지 완성
마참내!
제가 구상한 것과 꼭 닮은 화면을 띄우는 모습을 볼 수 있습니다
4th. 글을 마치며
재밌는데 글 작성하면서 elements 찍고 찍은 거 보면서 수정하고 짤 다운 받고 하느라 약 4시간 걸림
+) 개쩌는 나에 구상 제가 직접 그림
0 XDK (+2,000)
-
2,000
-
=> 오르비 망..
-
시대인재 트러스 어떰? 0 0
김기현 아이디어 들었으면 풀수있음?
-
와 사회 70점대 각인데? 0 0
이 등신... 과학도 82점정도 각임
-
씨! 발새끼들아 1 0
중간좆망
-
사회 진짜 도라이 같음 0 0
문제를 와 대박이세요
-
소신) 대학시험도 출제 근거 명시해야 한다 생각함 0 2
자기 분야에만 꽃혀서 가르치지도 않았는데 내고 가르친거 고루 안내고 특정부분...
-
중간고사 벼락치기 다신안할게요 2 1
시발 죄송해요 아 씨발
-
학교 레벨이 낮을수록 0 0
동기들이 반수하는거 싫어함?
-
사탐 개념서로는 뭐가 좋나용 0 0
경제 하려는데 수특은 개념이 너무 적고 해설도 별로라서..좀 오래 걸리더라도...
-
종강하고싶다 0 0
아이고 종강이야
-
국민연금 도와줘요 0 0
Help 하닉 1205000층 구조대 필요
-
서프 신청 질문 1 0
많이 빡센가요? 어느 정도일지 감이 안오네요..
-
죽고 싶다 2 1
몰아서 공부를 하다간... ㅎ... 독감도 걸리고 이게 뭐래...
-
수학 실모를 푸는데 5 1
선지에 답이 없는 상황 발생 초비상
-
그냥 기출문제집 풀면 되는건가요
-
아니 메인글 반응 저게 맞나 4 0
그냥 flash320햄이 맞는 말 하는건데 긁혔니 뭐니 하면서 헛소리하네......
-
부산대 LG전자 계약학과 신설 1 0
2027년부터 신입생 모집
-
몇 예상인가요?
-
Music is my life 2 1
무식은 내 삶이다..
-
매년 이맘때쯤 되면 생각나는 시험이 하나 있는데 4 0
바로 고1 1학기 중간고사 국어 시험임, 이 시험이 왜 종종 생각나나면...
-
재수강 1 0
재수강이란 말 참 좋지요
-
묵호항가고싶따 13 1
우럭이나 참돔 한마리에 해삼 사고, 삼식이는 쏴비쑤로 항구앞에서 구해다가 양념집...
-
강기본1,2 차이 0 1
이번에 개정국어 강기본 1,2로 나뉜다는데나누는 이유가 뭔가요2에서는 뭐배움
-
오르새쌤 0 1
재수생이고 듣다 보니까 너무 좋은데, 현재는 설맞이 지인선 드릴드했고 4덮은 12,...
-
내신 생2 풀이해주실분 구해요 2 0
저능아 도와주세요..
-
3시까지 우주공강 ㅋㅋㅋㅋㅋ 0 0
아
-
언제까지고도망칠수는없는데.. 1 1
차마직면할용기가없구나..
-
중대 냥대 붙어있네 1 1
4호선 보니까 중앙 바로 다음이 한양대앞임
-
집밥해먹기너무귀찮다.. 2 1
밖에서사먹는게편해..
-
이투스 패스 한달만 공유 0 0
해주실분 구합니다!! 환급 가능하게 매일 1시간 반 이상씩 들을 수 있어요 교재는...
-
근데 누가 니 맘대로 두 페이지 넘기래
-
수학기출 질문 0 0
시대기출 수2코어 끝나가요수1은 에드온으로 1화독했고요한완기 실전편 풀면서...
-
점뭐뭑? 14 6
오늘 급식 칼국수래
-
오늘까지 친 시험 대략 요약 25 0
전공1 : 과탑수준 전공2, 3, 교양 1 : 에이제로수준 전공 4 : 유급...
-
10년생이고 오늘 처음으로 논술형 답안을 써봤습니다 답란이 총 3개가 있었는데...
-
가끔 의학적으로 1 1
기적이라 불릴만한 일이 일어나는건 아직 의학이 거기까지 발전하지 못해서 그게...
-
당근 보고있는데 0 1
설의 과잠만 혼자 시세 하늘에 닿아있네
-
교양 시험 하루전 교재구매 5 0
시험범위가 어디까지일까요
-
망갤테스트 4 0
-
그러겠지
-
수리논술 n제vs기출 2 0
어떤걸 푸는게 더 나을까요?
-
서술형 0/20 아.
-
2409 국어 존나 사설틱한듯 3 0
내게 믿기지 않는 점수를 선사함 근데 나무위키가 사설틱했대요
-
자고 싶은데 2 0
이따 시험 볼때 잘 체력을 아껴둬야 해서 못잠
-
시발 ㅋㅋㅋㅋㅋ
-
ㅅㅂ 이게 맞나ㅡㅡ
-
ㅈㅣㅂ에 가고싶다 1 0
현실은 상병진
-
중간고사 기간이라 심심해서 쓰는 n수 후기(국어편) 1 0
일단 나는 틀딱이라 몇 년만에 수능판에 들어온... 사교육을 잘 모르는 인간이었다는...
-
고른다면 님들은 어느쪽..?
-
이게 코린이...?
이제 2주차..2주차 ㄷㄷㄷㄷ 상당히 열정적이시네요
예전부터 배워보고 싶었던 분야라 더 심취하게 되는 것 같아요
생각하는 걸 만들 수 있다는 게 프로그래밍의 재밌는 점 같아요희희 마자요 그래서 배움에 더 재미를 느끼는 것인지도 모르겠어요
진정한 코린이는 헬로 월드...
console.log("Hello, World!");역시뱁새는총명하구계획적이구최고인새라니까!
이눅쟝이그럿개평한다면나는증맬루북그뎡
이게 코린?이 나는 뭐지
히.. 히
멋지신!!!
헉 라이츄쟝 감사해양캬
퍄
react 쓰시나요 아니믄 바닐라 쓰시나요
아직 프레임워크는 안 쓰고 있어요히히 저도 웹페이지 만드는 프로젝트 하는중이어서 반갑네요 화이팅!
선생님두 파이팅입니다!
열심히 따라하고있습니다 파이팅