J-한솔넷

HTML5와 CSS를 이용한 로그인 박스 본문

웹 개발관련

HTML5와 CSS를 이용한 로그인 박스

jhansol 2012. 12. 15. 11:39

이 내용은 수강생의 요청으로 만든 예제입니다.

오직 DIV태그와 P, SPAN, UL, LI, IMG 태그만을 이용해 만들었습니다. 기존 TABLE을 이용한 방식과는 다릅니다.


<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>

<link rel="stylesheet" type="text/html" href="./css/loginbox.css"/>

<title>로그인 박스 데모</title>

</head>

<body>

<div id="login_box">

<p id="login_top">보안<span id="secur_level">1</span>단계 <span class="secur_level_list">1</span><span class="secur_level_list">2</span><span class="secur_level_list">3</span>  <input type="checkbox" value="idsave"/>ID저장</p>

<img src="images/loginbtn.gif" id="loginbtn">

<ul>

<li><input type="text" name="user_id" id="user_id" value="아이디"/></li>

<li><input type="password" name="password" id="password" value="패스워드"/></li>

</ul>

<p id="login_bottom"><img src="images/join.gif" id="joinbtn" alt="회원가입"/><img src="images/membermove.gif" id="membermove" alt="회원전환"/><img src="images/idpwsearch.gif" id="idpwsearch" alt="ID/PW 찾기"/></p>

</div>

</body>

</html>


그리고 이를 화면에 배치하고 모양을 설정하는 CSS를 만들어 줍니다. 위 소스에서 LINK 태그에 지정된 ./css/loginbox.css의 내용은 아래와 같습2니다.


@charset "UTF-8";


#login_box {

width: 286px;

font-family:굴림;

font-size: 10pt;

}


#login_top {

margin: 0 0 5px 0;

text-align: center;

}


#login_box ul, li {

margin: 0;

padding: 0;

list-sty;e: none;

}


#user_id, #password {

width: 220px;

height: 30px;

color: #666666;

}


#loginbtn {

float: right;

margin-right: 3px;

}


#login_bottom {

clear: both;

margin: 5px 0 0 0;

}


.secur_level_list {

display: inline-block;

padding: 2px 3px 1px 3px;

margin: 1px;

border: 1px solid #aaaaaa;

font-size: 7pt;

}


input {

margin: 0;

padding: 0;

}


아래의 링크는 위 소스를 적용하여 표시한 예제입니다.

http://study.iptime.org/~jhansol/fragment/loginbox.html


아래 링크는 위 예제의 전체 소스파일입니다.


loginbox.tar.gz


저작자표시

'웹 개발관련' 카테고리의 다른 글

tab 안에 또다른 텝 표시  (0) 2013.01.18
웹 접근성 향상을 위한 국가 표준 기술 가이드 라인  (0) 2013.01.15
JQuery를 이용해 tab 형식으로 내용 표시하기  (0) 2012.12.01
Tab 형태로 내용 표시하기  (0) 2012.11.24
#H3 개발자 컨퍼런스 2012의 자료집을 PDF로 공개합니다  (0) 2012.11.15
'웹 개발관련' Related Articles more