하나씩 살펴보겠습니다.
태그들은 영역을 구분하기 위해 묶음? 용도로 사용한 것이므로 넘어갑니다.
그 다음으로 아이디와 패스워드를 입력하는 입력필드 2개가 있습니다.
마찬가지로 type, id, name, placeholder 는 필수로 사용합니다.
placeholder는 입력 필드에 필수 사항은 아니지만, 사용자 편의성에서 중요하기 때문에 입력 필드에는 꼭 사용할 것을 권장합니다.
주의할 점이 있습니다.
티스토리의 경우 이메일로 회원가입을 하기 때문에 아디디가 이메일 주소가 됩니다.
때문에 ID에 사용하는 필드의 타입이 “email” 로 되어 있습니다.
일반적인 경우라면 type 이 “text” 여야 합니다.
이렇게 입력 폼 요소를 작성하는 것일 일반적입니다.
그리고, 각 입력 요소가 어떤 요소인지 표시를 해주는 텍스트를 왼쪽에 표시를 해줘야 합니다.
일반 텍스트라면
실무에서는 반드시 태그를 사용하는 것이 원칙이므로 초보자라면 태그를 사용하는 습관을 들이는 것이 좋습니다.
폼 필드와 함께 쌍으로 묶어서 사용하는 라벨() 태그에는 속성으로 “for” 가 사용됩니다.
이 라벨은 어떤 폼 요소를 위한 것이다. 라고 명시적으로 알려주는 뭐 그런 용도입니다.
속성값으로는 폼 요소의 ID를 사용합니다.
태그 전용 속성값입니다. 태그에도 “for” 속성을 사용하지만, 태그가 거의 사용하지 않는 죽은 태그이기 때문에 “for” 속성은 태그에만 사용하는 속성이라고 보면 됩니다.
가끔 “for” 속성의 정확한 용도를 몰라서 있으나 마나한 이 속성을 왜 쓰는지 궁금해 하는 경우가 있습니다.
먼자 태그를 앞서 만든 로그인 아이디 입력 입력 요소에 붙입니다. “for” 속성값으로 “loginId” 를 주면 로그인ID 입력 요소 한정으로 라벨이 정의됩니다. 텍스트 내용으로는 “아이디”를 입력합니다.
< label for =" loginId " > 아이디
< input type =" text " id =" loginId " name =" loginId " value="" placeholder =" ID " >
그리고 웹브라우저에서 이 코드를 띄운 후(아니면 위의 완성된 폼을 html 파일로 저장해 띄워도 됩니다.)
“아이디” 텍스트를 마우스로 클릭합니다.
ID 입력 요소에 포커스가 가면서 입력 커서가 깜빡거리는게 보일겁니다.
“for” 속성이 하는 역할 이 바로 이것입니다.
태그의 텍스트를 특정 입력 요소에 종속되도록 해서 텍스트를 클릭하면 해당 입력 요소와 연동되어 동작하도록 해주는 기능 을 합니다.
동일한 방법으로 패스워드 입력 요소도 만들어 붙입니다.
아이디와 패스워드 입력 요소는 다 만들었으므로 이제 입력한 아이디와 패스워드를 담은 폼을 전송하는 기능을 하는 “로그인” 버튼을 만듭니다.
위 로그인 폼 예를 보면
< button type =" submit " disabled =" disabled " > 로그인
이런 로그인 버튼이 있습니다.
HTML5 에서는 disabled 속성은 별도의 속성 값 없이 disabled 속성 정의만으로 해당 요소를 미사용 상태로 만듭니다.
따라서
로그인
이렇게 사용하는 것을 더 추천합니다.
disabled 속성이 로그인 버튼에 붙은게 이상할텐데, 실제 티스토리 로그인 화면에서는 아이디와 패스워드를 입력하면 로그인 버튼의 “disabled” 속성이 사라지고 클릭할 수 있는 상태가 됩니다. 물론 자바스크립트로 구현되는 기능이기 때문에 이 강의에서는 이런 부분까지는 알아보지는 않습니다.
이렇게 로그인 폼을 만드는 이유는 이용자가 불필요한 액션(예를 들면 아이디, 패스워드 입력 없이 로그인 버튼을 클릭 한다던가 하는)을 아얘 차단함으로써 이용자에게 어떤 액션을 해야하는지 명확하게 해주는 효과가 있습니다.
일종의 이용자 편의, 또는 이용자 가이드와 같은 역할을 하는 것입니다. 물론 이런 기능을 위해서는 자바스크립트가 필요합니다.
초보 단계에서는 이런 것까지 고려하는 것은 너무 멀리 나가는 것이므로
로그인
이정도에서 만족해야 합니다.
이제 일정 시간이 지나면 보안을 위해 자동으로 로그아웃되도록 하는 사이트의 기본 룰을 무시하고 로그인한 이용자가 계속 로그인 되어있도록 해주는 옵션인 “로그인 상태 유지” 체크 박스를 만들어 붙입니다.
로그인 상태 유지
“for” 속성에 대해서는 위에서 이미 배웠습니다.
체크박스도 동일하게 체크박스와 텍스트가 연동되어 동작합니다.
이렇게 간단하게 폼을 만들어 봤습니다.
완성한 위 예제는 아래와 같은 조금은 볼품없는 모양의 폼으로 웹브라우저에 표시됩니다.
실제로는 이렇게 만들어진 폼에 여러가지 것들이 더 붙게 됩니다.
로그인 후 되돌아가는 페이지 값을 담는 히든 필드가 아래처럼 추가로 붙게되고
< input type =" hidden " name =" redirectUrl " value =" https://blogpack.tistory.com/manage " >
레이아웃을 위한 수많은 클래스(class) 정의가 태그와
태그에 붙게 됩니다.
최종적으로는 아래와 같은 티스토리 로그인에 실제로 사용하는 로그인 폼이 완성됩니다.
< form method =" post " id =" authForm " action =" https://www.tistory.com/auth/login " > < input type =" hidden " name =" redirectUrl " value =" https://blogpack.tistory.com/manage " > < fieldset > < legend class =" screen_out " > 로그인 정보 입력폼 < div class =" box_login " > < div class =" inp_text " > < label for =" loginId " class =" screen_out " > 아이디 < input type =" email " id =" loginId " name =" loginId " placeholder =" ID " > < div class =" inp_text " > < label for =" loginPw " class =" screen_out " > 비밀번호 < input type =" password " id =" loginPw " name =" password " placeholder =" Password " > < button type =" submit " class =" btn_login " disabled > 로그인 < div class =" login_append " > < div class =" inp_chk " > < input type =" checkbox " id =" keepLogin " class =" inp_radio " name =" keepLogin " > < label for =" keepLogin " class =" lab_g " > < span class =" img_top ico_check " > < span class =" txt_lab " > 로그인 상태 유지 < span class =" txt_find " > < a href =" /member/find/loginId " class =" link_find " > 아이디 / < a href =" /member/find/password " class =" link_find " > 비밀번호 찾기
그리고 이렇게 CSS까지 예쁘게 입힌 폼은 아래와 같은 모습이 되게 됩니다.
갈길이 좀 멀어보이나요?
하지만 위에서 만들어본 볼품없는 폼도 기능적으로는 동일하게 동작합니다.
나중에 CSS를 배우면서 레이아웃을 입히게 되면 이런 멀쩡한? 로그인 화면을 만들 수 있게 됩니다.
여기서는 폼의 기능적인 부분의 구현에만 신경을 쓰면 됩니다.
– 2019-12-16 추가
위 데모 로그인 폼은 티스토리 로그인 폼입니다.
그대로 구현하기에는 CSS양이 너무 많아져서 일부 생략된 부분을 제외한 나머지를 첨부파일로 첨부합니다.
체크박스 같은 경우는 티스토리는 이미지로 구현을 했기 때문에 제외하고 CSS파일을 첨부했으므로 다운로드받아 참고삼아 보시기 바랍니다.
tistory_login_impliment.html
반응형
[HTML/CSS] 초간단 로그인폼 만들기 – LoginForm
반응형
안녕하세요
오늘은 간단한 로그인 폼을 만들어보도록 하겠습니다
기능적인 부분은 하나도 없이 HTML과 CSS만 사용하였기 때문에
디자인만 참고해보시면 좋을것 같습니다
로그인 폼
따로 크기를 정해놓지 않은
% 방식으로 하였기 때문에 사이즈를 너무 줄이는 모습까지는 신경쓰지 못하였습니다
중요한 부분
– 위치선정 –
display: flex;
align-items: center;
justify-content: center;
flex-direction : column;
-디자인 –
outline : none;
background : linear-gradient()
border-radius : –px;
box-shadow : -px -px -px color;
letter-spacing : -px;
SNS 버튼부에서 봐야할 점
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4), -3px -3px 5px rgba(0, 0, 0, 0.1);
제 코드에서는 이렇게 주었구요
색상을 지정하실때는 뒷 배경색보다 좀 더 연한색을 위주로 주시면 자연스러운것 같습니다
지정된 위치보다 -3px -3px 위로 올려서 색상을 좀 더 연하게 주시면 더욱 입체감이 있습니다
Email, Pw 부분에서 보아야 할 점
outline : none;
처음 input 박스를 만드신 후 박스 안쪽을 클릭하시면 박스 테두리가 쳐집니다
outline : none 이 없는 경우
이런 문제를 해결하기 위해서,
outline : none;
을 주게 되면 더 이상 클릭해도 엉성한 테두리가 생기지 않는걸 보실 수 있습니다
placehorder 을 이용하여 input 박스안에 텍스트를 적을 수도 있습니다
위 사진 처럼 Email을 적어라고 알려줘야할때 placehorder 이 사용됩니다
submit 부분에서 보아야할 점
background: linear-gradient(to left, rgb(255, 77, 46), rgb(255, 155, 47));
단색을 줘도 예쁜색이면 잘 나오지만
아무래도 그라데이션 효과를 주면 조금더 이쁜 박스가 나오는것 같습니다
또한 letter-spacing : 2px 를 주어서 submit 이라는 글자 사이사이마다 공간을 주었습니다
See the Pen ExgOvWW by Kang Byeongcheol (@Devcheol) on CodePen.
반응형
[웹컨텐츠제작꿀팁] 4강 로그인창 이렇게 써라!
728×90
반응형
** 영상으로 보고 싶은 분은 아래 주소를 클릭하세요.
VIDEO
이번 강의에서는 로그인 폼을 제작해보도록 하겠습니다.
– 위의 이미지는 결과이미지입니다.
– 이런 로그인 창을 만들어 보도록 하겠습니다.
** 최종 정답 미리 보기!
See the Pen loginbox by OSSAM (@5ssam) on CodePen.
1. 폼 구조 짜기 – HTML로 마크업하기
로그인창
– 스타일은 외부스타일시트를 사용하기 위해
–
는
태그와
