[XE 1.x 강좌] 3.4. 레이아웃 상단 코딩 2(로그인)2017. 2. 24. 22:32
회원 메뉴(로그인, 로그아웃, 회원 정보, 관리자)
상단 부분이 그럴듯해졌지만 뭔가가 허전하다. 회원제 개인홈을 운영할 때 필요한 영역이 없다. 회원 메뉴가 있어야 로그인/아웃을 하고 회원 메뉴를 이용할 것이 아닌가. 한번 추가해보자. html 파일에서 menu ul 밑에 아래 부분을 추가한다.
<div class="login_area"> <!-- 로그인 영역 -->
<!--@if(!$is_logged)--> <!-- 조건문 : 로그인되지 않았을 때 -->
<form class="before_login" action="{getUrl('','act','procMemberLogin')}" method="post" ruleset="@login"> <!-- 로그인 폼 -->
<fieldset>
<div class="loginbox">
<input type="hidden" name="act" value="procMemberLogin" />
<input type="hidden" name="success_return_url" value="{htmlspecialchars(getRequestUriByServerEnviroment(), ENT_COMPAT | ENT_HTML401, 'UTF-8', FALSE)}" />
<input type="text" placeholder="id" name="user_id" class="id" required="true"> <!-- id -->
<input type="password" placeholder="pass" name="password" required="true"> <!-- password -->
<span class="login_menu">
<input type="checkbox" name="keep_signed" value="Y" id="keepid"/> <label for="keepid">auto</label> <!-- 자동 로그인 -->
<button type="submit" id="btn_login" class="login_btn">login</button> <!-- 로그인 버튼 -->
<a href="{geturl('act','dispMemberSignUpForm')}">join</a> <!-- 가입 버튼 -->
<a href="{getUrl('act', 'dispMemberFindAccount')}">help</a> <!-- 계정 찾기 버튼 -->
</span>
</div>
</fieldset>
</form>
<!--@else--> <!-- 조건문을 만족하지 않을 때, 즉 로그인되었을 때 -->
{@
$oPointModel = &getModel('point');
$point = $oPointModel->getPoint($logged_info->member_srl);
$oModuleModel = &getModel('module');
$config = $oModuleModel->getModuleConfig('point');
$level = $oPointModel->getLevel($point, $config->level_step);
} <!-- 회원 정보 불러옴 -->
<form action="" method="post" class="after_login">
<fieldset>
<span class="nick"><a href="#popup_menu_area" class="member_{$logged_info->member_srl}">{$logged_info->nick_name}</a></span><!-- 닉네임-->
<span class="point">lv.{$level}, p.{$point}</span> <!-- 레벨과 포인트 -->
<span class="login_menu">
<a href="{getUrl('act','dispMemberInfo')}">info</a> <!-- 회원정보 -->
<a cond="$logged_info->is_admin=='Y'" href="{getUrl('','module','admin')}" target="_blank">admin</a> <!-- 관리자 버튼 -->
<a href="{getUrl('act','dispMemberLogout')}">logout</a> <!-- 로그아웃 버튼 -->
</span>
</fieldset>
</form>
<!--@end-->
</div>
적용하면 이렇게 뜬다. 로그인 폼의 1은 lastpass 때문에 뜬 것이고 강좌와는 관련이 없다.
.layout_container .header .menu .login_area fieldset{
border:none; /* 위의 지저분한 선 제거 */
}
.layout_container .header .menu .login_area input{
font-family:inherit; /* 폰트를 레이아웃에서 바로 상속받도록 변경 */
}
.layout_container .header .menu .login_area button{
background:transparent; /* 버튼 투명화 */
border:none; /* 버튼 외곽선 제거 */
font-family:inherit;
cursor:pointer; /* 버튼 커서를 손모양으로 바꾸기 */
}
그럼 이제 로그인 폼부터 꾸며보자.
.layout_container .header .menu .login_area{
font-family:'Calibri';
font-size:10px;
color:#777;
}
.layout_container .header .menu .login_area button{
font-size:10px;
}
.layout_container .header .menu .login_area label, .layout_container .header .menu .login_area button, .layout_container .header .menu .login_area a{
padding:0 2px; /* 상하 여백 없음, 좌우여백 2px */
}
.layout_container .header .menu .login_area button, .layout_container .header .menu .login_area a, .layout_container .header .menu .login_area a:link, .layout_container .header .menu .login_area a:visited{
color:#777;
}
.layout_container .header .menu .login_area button:hover, .layout_container .header .menu .login_area button:active, .layout_container .header .menu .login_area a:hover, .layout_container .header .menu .login_area a:active{
color:#aaa;
}
.layout_container .header .menu .login_area fieldset{
border:none;
}
.layout_container .header .menu .login_area input{
font-family:inherit;
}
.layout_container .header .menu .login_area input[type="text"], .layout_container .header .menu .login_area input[type="password"]{
border:none;
background:rgba(0,0,0,0.05); /* 배경을 붉은색 0 초록색 0 파란색 0으로 설정하였고 투명도는 0.05 */
padding:3px; /* 패딩을 줘야 예쁘게 보인다 */
width:50px; /* 넓이를 적당히 제한해주자 */
} /* 아이디, 패스워드 칸 */
.layout_container .header .menu .login_area button{
background:transparent;
border:none;
font-family:inherit;
cursor:pointer;
}
로그인 폼의 위치를 잡아주었다.
.layout_container .header .menu .login_area fieldset{
border:none;
margin:0; /* 기본 바깥여백 제거 */
margin-top:10px; /* 메뉴와의 간격 확보를 위해 위쪽 여백 추가 */
padding:0; /* 기본 안쪽여백 제거 */
}
이제 로그인 후 화면을 고쳐보자.
.layout_container .header .menu .after_login .nick{
font-size:11px; /* 현재 글자 크기가 한글닉에 많이 작으므로 조금 키웠음 */
}
.layout_container .header .menu .after_login .point{
margin:0 2px; /* 레벨을 앞뒤로 2px씩 띄워줌 */
}
이렇게 해서 로그인 폼이 완성되었다. 그런데 더 간단하게 하는 방법이 있다.
<div class="login">
<!--@if(!$is_logged)--> <!-- 로그인하지 않았을 때 -->
<a href="{getUrl('act','dispMemberLoginForm')}"><span>login</span></a> <!-- 로그인 링크 -->
<a href="{getUrl('act','dispMemberFindAccount')}"><span>help</span></a> <!-- 회원정보 찾기 링크 -->
<!--@else--> <!-- 로그인했을 때 -->
<a href="{getUrl('act','dispMemberInfo')}">info</a> <!-- 정보 -->
<a cond="$logged_info->is_admin=='Y'" href="{getUrl('','module','admin')}" target="_blank">admin</a> <!-- 관리자 -->
<a href="{getUrl('act','dispMemberLogout')}">logout</a> <!-- 로그아웃 -->
<!--@end-->
</div>
이렇게 하면 폼을 만들 필요 없이 별도의 페이지에서 로그인 폼을 불러올 수 있다.