회원 메뉴(로그인, 로그아웃, 회원 정보, 관리자)


  상단 부분이 그럴듯해졌지만 뭔가가 허전하다. 회원제 개인홈을 운영할 때 필요한 영역이 없다. 회원 메뉴가 있어야 로그인/아웃을 하고 회원 메뉴를 이용할 것이 아닌가. 한번 추가해보자. 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>


  이렇게 하면 폼을 만들 필요 없이 별도의 페이지에서 로그인 폼을 불러올 수 있다.

신고

티스토리 툴바