코린이의 회원가입 페이지 만들기 (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
-
자퇴생 6모 0 0
8월 검고라서 6모 못 보는데 어떡하죠 하…ㅜㅜㅜ 오르비 찾아봐서 빨리 알앗으면...
-
ㅇㅂㄱ 0 1
-
나가죽어라진짜 0 1
들어간내가 개병신이지 어휴 ㅅㅂ
-
자고싶다 3 0
그치만 과제를 다 못함
-
야밤의 0 1
그렇습니다
-
ㅈㄱㄴ
-
근데 신기한게 0 0
작수는 76점 나왔고 올해 3모는 72점 근데 4월 더프가 62점.. 찍맞제외....
-
찍맞 제외햔 순수하게 푼 문제만 봤을때 내 등급은 왼쪽이 맞음? 오른쪽이 멎음)...
-
슈퍼 얼버기 0 0
10시에 잠들었더니 너무 일찍 깨버림
-
나에게 돌아오세요 0 0
기억을 되듬어서
-
탁월 1 1
달다
-
아침에 하는 식당이 맥날빼고 없어
-
사는게너무힘듦 4 1
하늘꼭대기커리어를지향하면서 지금당장죽고싶은건 대체뭐임당장 오늘밤 자다가 객사해도...
-
챔스 입갤 ㅅㅅ 1 0
꼬마우승기원
-
폰으로 수능 영단어 어캐외움? 2 1
앱같은거나 방법 추천좀요
-
문제 하나에 빠져서 0 1
한시간 넘게 지나버렸네 그냥 항상 문제풀때 마인드가 서울대 가야하는데 이걸 못풀면...
-
요즘 수면이 이상함 1 0
지구온난화 때문인가
-
비염약먹으면잠개많이온다며 0 0
ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ 왜 아직도 이런건데 수면제느낌으로먹은건아니고비염땜에먹은건데ㅠㅠㅠㅠㅠ
-
어째서나에게불면증이 3 0
흐ㅏ아앙ㅇ.
-
나는 아직도!!!!! 0 0
잠에들지 못했다!!!!!! 하늘이여!!!!
-
갑자기 앨범 하나 듣고싶어서 3 0
불끄고 누워서 들으면서 폰질하다가 결국 한시간 늦게자게됐네
-
의치와 계약은 면허라는 안정성과 빠른 노동소득을 서로 트레이드 하는 느낌 11년간...
-
님들은 수특독서 2 0
문제풀이할때처럼 ㅈㄴ빨리읽음? 난 걍 ㅅㅂ 감상하는디
-
사랑 나누기를 하고 싶구나 5 0
유튜브나 봐야지 과제 언제 하지 2시간만 자고 과제해야지
-
언매 노베는 수특 사지 말까요 0 0
예
-
난 이미 세시간전에 자러감 0 0
지금 글쓰는 사람은 기존의 내가 아님
-
아 수학못해서 우울함 3 0
ㅡㅡ;;
-
의떨치떨약떨한떨설떨연떨고떨성떨서떨한떨중떨경떨이떨시떨외떨건떨동떨홍떨숭떨곽떨앚 6 7
떨읺떨국떨세떨단떨광떨명떨상떨가떨인떨가떨경떨
-
수학 20번 틀리는거 7 0
공부 시작하고 ㅅㅂ 틀린적이없는 번호인데 작수 수열 쳐나오고부터 ㅈ같이틀리네...
-
초레어템인데 헤이 하버드 말하는거 아님
-
영어 2등급 유지하는 사람인데 0 1
조정식 듣고 있긴함 근데 다른 쌤도 들어보고 싶은데 메가에 들을만한 영어쌤 또 잇음?
-
언제 자지 4 0
-
아 ㅆ 반수할까 5 0
고민되네..
-
N제나 실모컨 푸려고 다들 다니는거야? 엣지나 뭐 이런거 때문은 아니고?
-
잘자요 2 0
늘 파이팅하시구요
-
하… 전화하다가 1 0
이제 잔다 4시강 밖에 못 자…
-
쌩노베 120일 13시간? 8 2
https://orbi.kr/00057568221 어떤 분이 적으신건데 실수분들이...
-
존못 GOAT 6 0
하니대졸업이목표에요
-
사주에 오행중 뭐가 많음? 2 0
궁금
-
댓글달면 어울리는 대학 말해줌 31 0
-
현역에 한국사 4 나오고 보통 3~4 왔다갔다 하는데 근대이후부턴 모조리 감으로...
-
mbti할때마다씹프피나오네 2 0
과학맞는듯..'
-
수시 0 0
수시 너무 놓고 싶다 진짜.. 인원 너무 적어서 힘들어..
-
진짜 전공이 이게 맞나 1 2
퀴즈 20% 과제 5% 출석 5% 팀플 10% 중간 30% 기말 30% 중간까지 한...
-
메가 서버 복구됨 0 0
야르
-
아배고파 0 0
잠안오ㅓ 왜이러지 ㄱ진ㄴ짜 하 ㅜㅜㅜㅜㅜㅜㅜㅜㅜ
-
미적 23~26 3 0
미적 23~26만이라도 다 맞고 싶은데 많이 어렵나요? 어느정도 수준 돼야지 풀 수 있나요?
-
쌰갈 다음주 예비군인데 8 0
군복입을생각 하니까 ㅈ같내
-
-
메가 서버터짐? 0 0
?
이게 코린이...?
이제 2주차..2주차 ㄷㄷㄷㄷ 상당히 열정적이시네요
예전부터 배워보고 싶었던 분야라 더 심취하게 되는 것 같아요
생각하는 걸 만들 수 있다는 게 프로그래밍의 재밌는 점 같아요희희 마자요 그래서 배움에 더 재미를 느끼는 것인지도 모르겠어요
진정한 코린이는 헬로 월드...
console.log("Hello, World!");역시뱁새는총명하구계획적이구최고인새라니까!
이눅쟝이그럿개평한다면나는증맬루북그뎡
이게 코린?이 나는 뭐지
히.. 히
멋지신!!!
헉 라이츄쟝 감사해양캬
퍄
react 쓰시나요 아니믄 바닐라 쓰시나요
아직 프레임워크는 안 쓰고 있어요히히 저도 웹페이지 만드는 프로젝트 하는중이어서 반갑네요 화이팅!
선생님두 파이팅입니다!
열심히 따라하고있습니다 파이팅