로그인 페이지 만들기 | HTML/CSS | 코드잇 강의노트 코드잇 강의를 고려하시는 분들, 로그인 페이지 만들기 실습예제문박스를 꾸미는 방법들을 총동원하여 위와 같은 디자인을 만들어보세요. 실습시작!!연습과제를 풀 수 있는 스타일 태그는 앞에서 강의로 다 배웠기 때문에 뭔가 그럴듯하게 할 수 있을 것만 같았어요. 하지만 막상 html 백지부터 시작했으면 당황 했을텐데 html과 css가 연결된 두개 파일의 기본 코드들이 주어졌고, 위 예제문의 스타일만 추가로 반영하면 되는 문제였어요! 코드잇 강의 화면 안에서도 코드를 입력해보고 결과확인을 할 수 있지만, 저는 따로 저장해보고 싶어서 Visual Studio Code를 사용했어요. 클래스 안에 제공된 코드를 복사해서 Visual Studio Code에 붙혀넣고 과제를 시작할수도 있었는데 필사를 하듯 살짝 씩 가리면서 직접 써보았습니다. 코딩할때는 언어마다 정답은 아니지만 국룰과 같은 권장 표준 작성 방법이 있는 것 같아요. 익숙해지고 싶어서 따라서 적어보았습니다. 예제를 수행하기 위한 기본 제공 코드는 아래와 같았어요! *로그인페이지_HTML파일 1. <head>태그 *로그인페이지_CSS파일CSS로 스타일 입히기 위의 기본 태그를 '결과 보기' 했을때는 아래 사진과 같아요. ㅎㅎ 너무 멋이 없어요. 예시 사진 처럼 만들어볼거에요! 쉬워 보이는 2번을 먼저 풀어봅니다. 1) .login-form의 배경색은 #EEEFF1 위 예제 화면 처럼 아이디, 패스워드, 버튼 등 구성이 모두 담겨있는 회색 박스를 만들어줍니다. 도면대로 가로 사이즈를 정해줘요. width: 300px; 테두리는 안보이게 border: 0; 배경색으로 회색을 지정합니다. background-color: #EEEFF1; 2) .submit-btn의 배경색은 #1BBC9B background-color: #1BBC9B; 3) <a>의 폰트색은 #9B9B9B입니다. color: #9B9B9B 이렇게 하면?! 음 조금 모양이 생겼는데 아직도 더 해봐야겠죠? 아 input 태그에 들어있는 text-field, 로그인버튼 의 테두리도 뺴주어야 겠네요. border: none; 남은 3,4,5 번을 해봅니다. 3. (예시 화면에) 초록 선은 padding을 뜻하고, 빨간 선은 margin을 뜻합니다. 조금 헷갈렸지만 하나씩 풀어봅니다. 1) .login-form 회색박스는 4면 모두 20px의 안쪽여백이 있어요. padding: 20px 2) . text-field인 ID, PW를 적는 칸에는 안쪽으로 10px의 여백이 있고 아래쪽에는 10px의 바깥 여백이 있어요. padding: 10px; margin-bottom: 10px; 3) .submit-btn 인 "로그인" 버튼도 마찬가지로 10px의 안쪽 여백과 바깥쪽 아래에 30px의 간격이 있네요! padding: 10px; margin-bottom: 30px; 4. .login-form은 가운데로 정렬되어 있습니다. margin: 0 auto; 5. 모든 동근 모서리는 5px의 border-radius를 갖고 있습니다. .login-form, .text-field, .submit-btn 모두 둥근 모서리를 적용해 줍니다. border-radius: 5px; 짠 오잉, 뭔가 회색 박스만 중앙에 있고, 나머지 요소들이 가운데 정렬이 안되있어요. 아이디, 비밀번호, 로그인버튼은 회색박스의 padding까지 쭉 길어야 하는데 길이도 짧아요. >회색박스가 300이니 20px씩 빼줄수도 있지만 귀찮은것 같아요. 가로길이를 width: 100%로 해봅니다. >그리고 맨 아래에 "비밀번호를 잊어버리셨나요?"의 a 태그가 속을 썩였는데 텍스트 정렬을 시켜줬어요! text-align: center; >그리고 뭔가 정리되 보이게 텝(tab)으로 일정하게 코드 위치를 맞춰줬어요. 진짜 최종본! 두구두구두구 그리고 결과물!!을 보기위해 css페이지를 저장하고 폴더에서 index.html 파일을 열어줬어요! 오예!!! 이런 것이 코딩의 기쁨인가요? 아주 눈꼽만큼 기쁨을 맛보아 봅니다. HTML & CSS어릴때 학교나 이 곳 저 곳에서 배우라고 할땐 엄청 재미없어 보이더니, 요즘은 꼭 청개구리 같이 돈 주고 배우고 있네요. 비전공자들도 많이 한다기에 저도 숟가락을 얹어 밤 늦게까지 코드잇 강의를 듣고 있습니다. 예전에는(갑자기 라떼??) 태그가 너무 재미가 없었어요. 글씨만 쭉 쓰는 것 같고 화면도 그리 예쁘지 않고.. 그래서 더 요즘 처럼 UI가 예쁘게 나오는 웹사이트 들을 보면 개발자 분들이 너무 대단해보여요- 그런 아이디어나 센스는 어디서 나오는지! 저는 취미로 코딩을 배우기 시작했지만 이걸 어디에 활용할 수 있을지 아직은 모르겠어요.. 그치만 코딩 ㅋ자도 모르던 내가 몇 일만에 이것 저것 눌러서 하나 하나 바꿔 표현할 수 있는게 신기하더라구요. 몇가지 앱이든 웹이든 만들어보고 싶은 아이디어도 괜히 떠오르기도 하지만 과연 실행하는 날이 올까요?! 일단 시작했으니 강의는 다 들어보려고 합니다. 나에게 코드잇이란?!코드잇은 우연히 무슨 '100일 챌린지'로 시작했어요. 챌린지 성공은 못했지만ㅜㅜ 아쉬움에 계속 듣고 있답니다. 월 3만원 정도에 다양한 코딩강의를 모두 들을 수 있는게 너무 장점인것 같아요. 그치만 바쁜 시기가 오면 시간은 하염없이 가고.. 강의는 못 듣고.. 그렇게 몇개월(?)을 그냥 회비처럼 돈을 낼 수도 있어요 ㅠㅠ 바쁜시기에 중단을 못하는게 단점이랄까요... 마치 헬스장 같아여...ㅋㅋ 근데 제가 느낀 진짜 코드잇의 장점은 비전공자인 제가 이해가 쏙쏙 되는 강의라는 것이에요. 모든 강의를 같은 분께서 하는 건지는 모르겠어요. 저는 파이썬, 웹퍼블리싱 정도 코스를 듣고 있는데 목소리가 모두 같긴했습니다. 목소리도 너무 안정적이고, 영상의 모션들도 너무 적절해요ㅋ 강의 영상도 길어야 10분 정도.. 더 짧은 강의들도 있고, 몇개의 영상 내용을 요약 정리하는 페이지도 있고요. 단락마다 강의를 구분해놓아서 한번 시간 내면 지겹지 않고 계속 듣게 되더라고요? 오늘 들은 강의에는 코드잇 웹퍼블리싱 코스의 세번째 실습이 있었어요. 그동안 html과 css의 기본적인 개념들을 익히고, 기초적인 태그들을 사용하는 것을 배웠는데, 그걸 이용해서 예시 화면과 같이 로그인 화면을 만드는 것이었어요. 제 글을 누가 보실지는 모르겠지만 저의 실습 기록을 남기는 용으로 업로드를 하였습니다- 마무리코드잇에는 과제에 대한 해설 영상도 있어요! 저는 보통 그것을 보면서 강사님의 코드도 한번 따라 써봐요. 제가 한거랑 어떤 부분이 다른지 비교해보도록요. 저의 기록물, 그리고 결과물 봐주셔서 감사합니다 :) 좋은하루 되세요. |
로그인 페이지 HTML/CSS - logeu-in peiji HTML/CSS
관련 게시물
저작권 © 2024 ko.apacode Inc.
