※홈페이지를 만들면서 필수적으로 필요한 화면 중 하나가 로그인 화면이라고 생각합니다.
이번 시간에는 간단한 로그인 폼을 만들어 보고 화면을 구성하면서 사용되는 속성값들에 대해서 하나씩 살펴보도록 하겠습니다.
목차1. 로그인 폼 소스 보기
2. 로그인 폼 <body>
3. 로그인 폼 CSS
1. 로그인 폼 소스 보기
로그인 폼
<! DOCTYPE html >
< html lang = "ko" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > 로그인화면 </ title >
< style >
* { padding : 0px ; margin : 0px ;}
form {
width : 350px ;
margin : 0 auto ;
padding : 20px ;
border : 1px solid black ;
border-radius : 5px ;
}
legend {
font-size : 16px ;
font-weight : bold ;
padding-left : 5px ;
padding-bottom : 10px ;
}
#loginbox label { float : left ; width : 120px ; font-size : 15px ; margin-left : 20px ;}
li { list-style-type : none ; margin-bottom : 5px ;}
fieldset {
border : 1px solid #ccc ;
margin-bottom : 30px ;
padding : 10px ;
}
#join {
border : none ;
margin-top : 20px ;
}
#joinbox {
text-align : center ;
border : none ;
padding : 10px ;
}
#joinbox button {
font-size : 15px ;
padding : 5px ;
border-radius : 5px ;
border : 1px solid black ;
}
#joinbox button:hover {
background-color : gray ;
}
#mailbox label {
font-size : 12px ;
margin-left : 20px ;
}
#mailbox input {
vertical-align : middle ;
}
</ style >
</ head >
< body >
< form id = "login" >
< fieldset id = "loginbox" >
< legend > 로그인 </ legend >
< ul >
< li >< label for = "user-id" > 아이디 </ label >< input id = "user-id" type = "text" placeholder = "공백없이 2자 이상" autofocus required ></ li >
< li >< label for = "user-pw" > 비밀번호 </ label >< input id = "user-pw" type = "password" placeholder = "특수기호 포함 8자 이상" autocomplete = "off" required ></ li >
< li >< label for = "user-pws" > 비밀번호확인 </ label >< input id = "user-pws" type = "password" autocomplete = "off" required ></ li >
< li >< label for = "user-email" > 이메일 </ label >< input id = "user-email" type = "email" placeholder = "abc@naver.com" autocomplete = "off" required ></ li >
< li >< label for = "user-tel" > 전화번호 </ label >< input id = "user-tel" type = "tel" ></ li >
</ ul >
</ fieldset >
< fieldset id = "mailbox" >
< legend > 광고성 메일 수신여부 </ legend >
< label for = "maily" > 메일수신 </ label >< input id = "maily" type = "radio" name = "mail" value = "y" >
< label for = "mailn" > 메일수신 안함 </ label >< input id = "mailn" type = "radio" name = "mail" value = "n" checked >
</ fieldset >
< fieldset id = "joinbox" >
< button type = "submit" > 가입하기 </ button >
</ fieldset >
</ form >
</ body >
</ html >
2. 로그인 폼 <body>
< body >
< form id = "login" >
< fieldset id = "loginbox" >
< legend > 로그인 </ legend >
< ul >
< li >< label for = "user-id" > 아이디 </ label >< input id = "user-id" type = "text" placeholder = "공백없이 2자 이상" autofocus required ></ li >
< li >< label for = "user-pw" > 비밀번호 </ label >< input id = "user-pw" type = "password" placeholder = "특수기호 포함 8자 이상" autocomplete = "off" required ></ li >
< li >< label for = "user-pws" > 비밀번호확인 </ label >< input id = "user-pws" type = "password" autocomplete = "off" required ></ li >
< li >< label for = "user-email" > 이메일 </ label >< input id = "user-email" type = "email" placeholder = "abc@naver.com" autocomplete = "off" required ></ li >
< li >< label for = "user-tel" > 전화번호 </ label >< input id = "user-tel" type = "tel" ></ li >
</ ul >
</ fieldset >
< fieldset id = "mailbox" >
< legend > 광고성 메일 수신여부 </ legend >
< label for = "maily" > 메일수신 </ label >< input id = "maily" type = "radio" name = "mail" value = "y" >
< label for = "mailn" > 메일수신 안함 </ label >< input id = "mailn" type = "radio" name = "mail" value = "n" checked >
</ fieldset >
< fieldset id = "joinbox" >
< button type = "submit" > 가입하기 </ button >
</ fieldset >
</ form >
</ body >
※우선 각각 다른 속성값을 주기 위해 form id로 "login"을 각 필드마다 "loginbox", "mailbox", "joinbox"로 구분을 지어놓았습니다. 그리고 <ul><li>를 통하여 각 항목, <input>으로 입력란을 만들어 준 뒤 이를 <label>로 묶어주었습니다.
< label for="user-id"> 아이디 </label><input id = "user-id" type = "text" placeholder="공백 없이 2자 이상" autofocus required >
<label for="묶어줄 아이디"><id="묶어줄 아이디">로 활용하시면 됩니다.
<input type=""> : text, password, email, tel 등 원하는 입력방식에 맞추어 지정해 주시면 됩니다.
<input placeholder="내용"> : 내용을 입력하면 사라지는 힌트 개념이라고 생각하시면 됩니다.
<input autofocus> : 화면이 실행될 시 커서가 위치할 수 있도록 해줍니다.
<input required> : 필수 입력항목을 지정하는 것으로 submit버튼으로 넘어갈 때에 지정된 항목이 비어있다면 항목을 채우라는 메시지를 보냅니다.
<input autocomplete> : 자동완성기능 사용여부를 정하는 속성입니다. on과 off를 사용합니다.
<input value="보여줄 값" readonly> : 값을 입력할 수 없고 입력되어 있는 값을 보여주기만 하는 속성입니다.
< label for="maily"> 메일수신 </label><input id = "maily" type = "radio" name = "mail" value = "y" >
< label for="mailn"> 메일수신 안 함 </label><input id = "mailn" type = "radio" name = "mail" value = "n" checked >
<input type="radio"> : 라디오버튼 타입을 생성합니다.
<input name> : 같은 이름을 가진 버튼끼리는 한 가지 항목만 선택됩니다.
<input value="값"> : submit버튼으로 정보를 넘길 때에 들어갈 값을 입력합니다.
<input checked> : 화면이 실행될 시 체크가 되어있는 항목을 지정합니다.
3. 로그인 폼 CSS < style >
* {padding : 0px ; margin : 0px ;}
form {
width : 350px ;
margin : 0 auto ;
padding : 20px ;
border : 1px solid black ;
border-radius : 5px ;
}
legend {
font-size : 16px ;
font-weight : bold ;
padding-left : 5px ;
padding-bottom : 10px ;
}
#loginbox label {float : left ; width : 120px ; font-size : 15px ; margin-left : 20px ;}
li {list-style-type : none ; margin-bottom : 5px ;}
fieldset {
border : 1px solid #ccc ;
margin-bottom : 30px ;
padding : 10px ;
}
#join {
border : none ;
margin-top : 20px ;
}
#joinbox {
text-align : center ;
border : none ;
padding : 10px ;
}
#joinbox button {
font-size : 15px ;
padding : 5px ;
border-radius : 5px ;
border : 1px solid black ;
}
#joinbox button:hover {
background-color : gray ;
}
#mailbox label {
font-size : 12px ;
margin-left : 20px ;
}
#mailbox input {
vertical-align : middle ;
}
</ style >
※간단한 내용이며 한눈에 보기 위해 따로 CSS로 만들지 않고 <style>로 한 번에 입력하였습니다.
form {
width : 350px ;
margin : 0 auto ;
padding : 20px ;
border : 1px solid black ;
border-radius : 5px ;
}
전체적인 form에 대한 속성값을 지정해 줍니다.
margin 0 auto : left, right margin을 auto로 주어 가운데 정렬이 되도록 했습니다.
li {list-style-type : none ; margin-bottom : 5px ;}
list-style-type:none : <li> 항목 앞 기호를 없애기 위해 스타일 값을 none으로 지정해 주었습니다.
#loginbox label {float : left ; width : 120px ; font-size : 15px ; margin-left : 20px ;}
float:left : <label></label>의 항목값이 좌측으로 정렬되도록 설정하였습니다.
#joinbox button {
font-size : 15px ;
padding : 5px ;
border-radius : 5px ;
border : 1px solid black ;
}
#joinbox button:hover {
background-color : gray ;
}
button:hover {backgrond-color:gray} : 버튼에 마우스가 올라갔을 때에 버튼 색상이 변경되도록 하였습니다.
※이렇게 간단하게 로그인 폼을 구성해 보았습니다.
나머지 width, margin, padding 값들을 통하여 규격을 맞추어 디자인하였습니다.
규격을 정하는 부분들은 직접 수치들을 변경해 보면서 진행해야 전체적인 구상을 할 수 있는 눈이 생길 것 같습니다.
