EOND 스레드

이온디 8년 전

레이아웃을 만들다보면 XE의 템플릿 문법이 적용이 안되는 경우가 있습니다. cond는 되는데 loop문은 안된다던가, 이럴 때 테스트하는 방법입니다. 1. 레이아웃에 작성된 코드를 다 지우고 간단한 블럭 태그로 테스트를 해본다. <block cond="$logged_info">로그인됨</block> 2. 모두 지우고 안되는 부분만 작성해본다. 이렇게 확인해본바 저의 경우는 다음 코드 때문에 안되더군요. 안되던 코드 삽입해봅니다. <style>.uchat_wrap4744… 레이아웃을 만들다보면 XE의 템플릿 문법이 적용이 안되는 경우가 있습니다. cond는 되는데 loop문은 안된다던가, 이럴 때 테스트하는 방법입니다. 1. 레이아웃에 작성된 코드를 다 지우고 간단한 블럭 태그로 테스트를 해본다. <block cond="$logged_info">로그인됨</block> 2. 모두 지우고 안되는 부분만 작성해본다. 이렇게 확인해본바 저의 경우는 다음 코드 때문에 안되더군요. 안되던 코드 삽입해봅니다. <style>.uchat_wrap47445045_super {width:100px;height:550px;margin:0 !important;padding:0 !important;background:#ccc;overflow:hidden;}#uchat_wrap47445045, #uchat_wrap47445045 *, #uchat_wrap47445045 table, #uchat_wrap47445045 tr, #uchat_wrap47445045 td, #uchat_wrap47445045 input, #uchat_wrap47445045 label {width:auto;margin:0;padding:0;font-family:"Apple SD Gothic Neo","malgun gothic","nanumgothic"; font-size:12px; -ms-user-select:none; -moz-user-select:none; -webkit-user-select:none;font-size:12px;line-height:1.4;border:0;text-align:left;font-weight:normal;min-height:0;min-width:0;color:gray;}#uchat_wrap47445045 {width:98px;height:548px;position:relative; margin:1px;}#uchat_wrap47445045 .uchat_middle {background:#e1e1e1;height:499px;width:98px;overflow:hidden;}#uchat_wrap47445045 .uchat_middle:after{content:""; display:block; clear:both; height:0; visibility:hidden;}#uchat_wrap47445045 .uchat_middle .conversation_contents {word-wrap: break-word;background:white;overflow-y:scroll;-webkit-overflow-scrolling: touch;overflow-x:hidden;}#uchat_wrap47445045 .uchat_middle .conversation_contents .loading {padding:2px 0;font-size:12px;word-wrap:break-word;}#uchat_wrap47445045 .uchat_middle .conversation_contents .cs_contents {font-size:12px;}#uchat_wrap47445045 .uchat_middle .conversation_contents .conversation_nick {font-weight:bold;cursor:pointer;font-size:12px;line-height:1;}#uchat_wrap47445045 .uchat_middle .conversation_contents .user_conversation {padding:2px;font-size:12px;}#uchat_wrap47445045 .uchat_middle .conversation_contents .user_conversation span {}#uchat_wrap47445045 .uchat_middle .conversation_contents .user_conversation>span>img {max-width:100px; max-height:20px;}#uchat_wrap47445045 .uchat_middle .conversation_contents .user_conversation>img {max-width:25px; max-height:25px;vertical-align: middle;}#uchat_wrap47445045 .uchat_middle .conversation_contents .user_conversation span, #uchat_wrap47445045 .uchat_middle .conversation_contents .user_conversation img {}#uchat_wrap47445045 .uchat_middle .conversation_contents .notification {padding:2px 0;color:green;text-align:center;font-size:12px;}#uchat_wrap47445045 .uchat_middle .conversation_contents .system {padding:2px 0;color:red;margin:2px;text-align:left;font-size:12px;}#uchat_wrap47445045 .uchat_middle .conversation_contents .error {padding:2px 0;text-align:center;font-size:12px;}#uchat_wrap47445045 .uchat_middle .topbar {height: 38px;line-height:38px;overflow:hidden;padding:0 4px 0 14px;color:#535353;font-size:12px;font-weight:bold;border-bottom:1px solid #E4E8EC;background-color:#FFFFFF;}#uchat_wrap47445045 .uchat_middle .topbar .count {float:left;font-size:12pt;line-height:32px;overflow:hidden;height:32px}#uchat_wrap47445045 .uchat_middle .topbar a.setting_icon {float:right;width:18px;height:18px;background:url(../minitalk/skin/default/images/setting_icon.gif) no-repeat 0 0;cursor:pointer;margin:10px 13px 0 0;}#uchat_wrap47445045 .uchat_middle .topbar a:hover {border:0;text-decoration:none;}#uchat_wrap47445045 .uchat_middle .member_list {overflow-x:hidden; overflow-y:scroll;-webkit-overflow-scrolling: touch;background:white;}#uchat_wrap47445045 .uchat_middle .member_list .user {padding:2px;font-size:12px;white-space:nowrap;overflow:hidden;cursor:pointer;background:white;vertical-align: middle;}#uchat_wrap47445045 .uchat_middle .member_list .user>span>img {max-width:100px; max-height:20px;display:inline}#uchat_wrap47445045 .uchat_middle .member_list .user>img {max-width:25px; max-height:25px;display:inline}#uchat_wrap47445045 .uchat_middle .member_list .user span {height:12px;}#uchat_wrap47445045 .uchat_middle .member_list .user span, #uchat_wrap47445045 .uchat_middle .member_list .user img {vertical-align: middle;font-size:12px;}#uchat_wrap47445045 .uchat_middle .member_list .my_members, #uchat_wrap47445045 .uchat_middle .member_list .admin_members, #uchat_wrap47445045 .uchat_middle .member_list .is_members, #uchat_wrap47445045 .uchat_middle .member_list .no_members {font-size:0;line-height:0;}#uchat_wrap47445045 .user_menu_background {position:absolute;left:0px;top:0;width:98px;height:548px;background:#e1e1e1;z-index:1000;display:none;}#uchat_wrap47445045 .user_menu {padding:5px 3px;background:#fff;display:none;position:absolute;border:2px solid #a0dbc7;z-index:1100;}#uchat_wrap47445045 .user_menu .menu_list {padding:3px 0;font-size:12px;cursor:pointer;}#uchat_wrap47445045 .user_menu .menu_list .admin_login {width:112px;height:20px;}#uchat_wrap47445045 .user_menu .user_nick {background:#f5f5f5;font-size:12px;}#uchat_wrap47445045 .input { height:24px;width:98px;overflow:hidden;text-align:center;background:white;}#uchat_wrap47445045 .input .conversation {width:69px;height:20px;font-size:12px;ime-mode:active;}#uchat_wrap47445045 .none {float:left;font-size:0;line-height:0;width:0;height:0;overflow:hidden}#uchat_wrap47445045 .uchat_menu {background:url("http://cache.uchat.co.kr/uchat/img/menu_background.gif");width:98px;height:25px;overflow:hidden}#uchat_wrap47445045 .uchat_menu .uchat_s_logo {float:left;width:27px;height:25px;background:url("http://cache.uchat.co.kr/uchat/img/uchat_small.gif") 50% 50% no-repeat;}#uchat_wrap47445045 .uchat_menu .uchat_bold {float:left;width:16px;height:25px;background:url("http://cache.uchat.co.kr/uchat/img/text-bold-icon.gif") 0 50% no-repeat;cursor:pointer;}#uchat_wrap47445045 .uchat_menu .uchat_i {float:left;width:16px;height:25px;background:url("http://cache.uchat.co.kr/uchat/img/text-italic-icon.gif") 0 50% no-repeat;cursor:pointer;}#uchat_wrap47445045 .uchat_menu .uchat_underline {float:left;width:16px;height:25px;background:url("http://cache.uchat.co.kr/uchat/img/text-underline-icon.gif") 0 50% no-repeat;cursor:pointer;}#uchat_wrap47445045 .uchat_menu .uchat_text_color {float:left;width:16px;height:25px;background:black url("http://cache.uchat.co.kr/uchat/img/uchat_text_color.gif");cursor:pointer;}#uchat_wrap47445045 .uchat_menu .uchat_event_icon {float:right;width:20px;height:25px;background-repeat: no-repeat;background-position: center center; background-color: transparent;cursor:pointer}#uchat_wrap47445045 .uchat_menu .uchat_scroll {float:right;width:16px;height:25px;background:url("http://cache.uchat.co.kr/uchat/img/uchat_scroll.gif");cursor:pointer;}#uchat_wrap47445045 .uchat_color_wrap {width:112px;border:1px solid #ccc;position:absolute;background:#f2f2f2;display:none;}#uchat_wrap47445045 .uchat_color_wrap .uchat_color_title {text-align:center;width:112px;padding:7px 0;border-bottom:1px solid #ccc;font-size:12px;}#uchat_wrap47445045 .uchat_color_wrap .uchat_color_box {width:112px;border-top:1px solid #fff;}#uchat_wrap47445045 .uchat_color_wrap .uchat_color_box:after {display:block;clear:both;content:""}#uchat_wrap47445045 .uchat_color_wrap .uchat_color {float:left;cursor:pointer;width:14px;height:14px;font-size:0;line-height:0;}#uchat_wrap47445045 .uchat_setting_wrap {width:150px;overflow:hidden;border:2px solid #a0dbc7;position:absolute;display:none;background:#fff;z-index:1100;}#uchat_wrap47445045 .uchat_setting_wrap .top {border-bottom:1px solid #cecece;text-align:center;padding:5px 0;font-size:14px;}#uchat_wrap47445045 .uchat_setting_wrap .top span {height:12px;}#uchat_wrap47445045 .uchat_setting_wrap .content {border-top:1px solid #f7f7f7;padding:5px;}#uchat_wrap47445045 .uchat_setting_wrap .floor{margin-bottom:7px;}#uchat_wrap47445045 .uchat_setting_wrap .floor input.no_sound{width:12px;height:12px;border:0;}#uchat_wrap47445045 .uchat_nick { width: 100%;}#uchat_wrap47445045 .alert_btn_wrap {text-align:right;margin:0 5px 10px 0;}#uchat_wrap47445045 .alert_ok_btn { }#uchat_wrap47445045 .alert_cancel_btn { }#uchat_wrap47445045 .clear {clear:both; height:0; overflow:hidden;}#uchat_wrap47445045 .popup {background:#fff;display:none;position:absolute;border:2px solid #a0dbc7;z-index:1100; margin: 0px auto;}#uchat_wrap47445045 .popup_background {position:absolute;left:0px;top:0;width:98px;height:548px;background:#e1e1e1;z-index:1000;display:none; filter: alpha(opacity=40);-khtml-opacity: 0.4;-moz-opacity: 0.4;opacity: 0.4; }#uchat_wrap47445045 .input_border {border-top:1px solid #9a9a9a !important;border-left:1px solid #9a9a9a !important;border-right:1px solid #d8d8d8 !important;border-bottom:1px solid #d8d8d8 !important;}#uchat_wrap47445045 .btn_pack, #uchat_wrap47445045 .btn_pack *{display:inline-block;overflow:visible;position:relative;margin:0;padding:0;border:0;background:url(http://cache.uchat.co.kr/uchat/img/btn_pack.gif) no-repeat;font-size:12px;font-family:Tahoma, Sans-serif;color:#333;text-decoration:none !important;vertical-align:top;white-space:nowrap}#uchat_wrap47445045 .btn_pack{margin-right:4px}#uchat_wrap47445045 .btn_pack *{left:4px;cursor:pointer;_cursor:hand}#uchat_wrap47445045 .btn_pack.medium,#uchat_wrap47445045 .btn_pack.medium *{height:24px;line-height:24px}#uchat_wrap47445045 .btn_pack.medium{background-position:left 0}#uchat_wrap47445045 .btn_pack.medium *{padding:0 10px 0 6px;background-position:right top;font-size:12px}#uchat_wrap47445045 .btn_pack *:hover, #uchat_wrap47445045 .btn_pack *:active, #uchat_wrap47445045 .btn_pack *:focus{color:#690}#uchat_wrap47445045 .btn_pack.strong *{font-weight:bold !important}#uchat_wrap47445045 .btn_pack.small, #uchat_wrap47445045 .btn_pack.small *{height:19px;line-height:19px}#uchat_wrap47445045 .btn_pack.small{background-position:left -106px}#uchat_wrap47445045 .btn_pack.small *{padding:0 6px 0 2px;background-position:right -106px;font-size:11px}#uchat_wrap47445045 input {background:#fff;vertical-align:middle;height:20px;}#uchat_wrap47445045 .ad_spot {overflow:hidden; position: absolute; top: 24px; width: 100%; max-width: 300px; z-index: 1;}#uchat_wrap47445045 .Bnr_icon {overflow:hidden; border-top:2px solid #d7d7d7;}#uchat_wrap47445045 .tb_button {padding:1px;cursor:pointer;border-right: 1px solid #8b8b8b;border-left: 1px solid #FFF;border-bottom: 1px solid #fff;}#uchat_wrap47445045 .tb_button.hover {borer:2px outset #def; background-color: #f8f8f8 !important;}#uchat_wrap47445045 .ws_toolbar {z-index:100000}#uchat_wrap47445045 .ws_toolbar .ws_tb_btn {cursor:pointer;border:1px solid #555;padding:3px}#uchat_wrap47445045 .tb_highlight{background-color:yellow}#uchat_wrap47445045 .tb_hide {visibility:hidden}#uchat_wrap47445045 .ws_toolbar img {padding:2px;margin:0px}</style> <style>#uchat_goodlin {width:98px;height:548px;position:relative;display:none;overflow:hidden;}#uchat_goodlin .uchat_middle .conversation_contents {width:100%;height:474px;}#uchat_goodlin .uchat_middle .member_list {width:100%;height:-1px;margin-bottom:1px;}</style> 이렇게 코드가 다닥다닥 붙어서 제대로 해석이 안되는 경우가 있는 것 같습니다.

원본

운

이온디 18년 전

2. 파일설명이어서 갑니다. 2-3. login_form.xml 작업 중에 보니깐 너무 이상해서.. login_form.xml 파일을 수정 간단하게 하고 가겠습니다. login_info.xml 파일은 이후에 더 자세히 하죠. 지금 만드는 로그인 위젯 스킨은 오픈아이디는 사용하지 않을 것이므로 홈페이지에서 관리 > 회원 > 기본설정에서 오픈아이디 사용안함에 체크하고 작업 시작하겠습니다. 물론 스킨 상에서 로그인 위젯을 보이지 않게 해도 됩니다. default.css 파일에서 open_id 부분… 2. 파일설명이어서 갑니다. 2-3. login_form.xml 작업 중에 보니깐 너무 이상해서.. login_form.xml 파일을 수정 간단하게 하고 가겠습니다. login_info.xml 파일은 이후에 더 자세히 하죠. 지금 만드는 로그인 위젯 스킨은 오픈아이디는 사용하지 않을 것이므로 홈페이지에서 관리 > 회원 > 기본설정에서 오픈아이디 사용안함에 체크하고 작업 시작하겠습니다. 물론 스킨 상에서 로그인 위젯을 보이지 않게 해도 됩니다. default.css 파일에서 open_id 부분에서 display:none; 이라고 추가해주시면 됩니다. 참고로 저도 로그인위젯스킨을 만들면서 설명드리는 것이니깐 읽으시는 분들이 길 헤매지 말고 잘 따라오세요. 1단계 들어갑니다. default.css 파일 수정합니다. ※ 참고, 볼드체는 수정한 부분입니다. 폼은 24 line.. .box_login .input { width:120px; background-color: #ffffff; border:1px solid #CECECE; padding:2px 2px 2px 5px; height:14px; margin:0px; cursor:text; color:#666666;font:10px verdana bold;} width값 등을 적당히 수정합니다. border-color:#a6a6a6 #d8d8d8 #d8d8d8 #a6a6a6; 를 빼주고 #CECECE 를 입력했습니다. (보더색상값: 상 우 하 좌 이렇게 시계순입니다.) 버튼은 23 line.. .box_logininput.submit { width:45px; height:45px;background:url(../images/default/login_btn_submit.gif) no-repeat;border:none; margin:9px 0 0 -5px; _margin:5px 0 0 0; cursor:pointer; } 버튼의 위치를 왼쪽으로 살짝 더 붙여줬습니다. 버튼 그림을 변경하고자하면 url 부분의 이미지를 새로 만들어서 같은 이름으로 올리면 되겠습니다. 하는 김에 테두리도 할까 말까.... 이미지로 처리해야할지, 아니면 CSS로 처리해야할지 고민인데..(__);; 우선 이미지부터 다 해보죠. 1. 이미지로 처리하기 재료는 싸이월드 홈2 로그인에 사용된 이미지를 사용하기로 합니다. 테두리에 사용된 이미지는 상단,하단,가운데 부분으로 총 3개의 이미지가 사용되었습니다. 상단이미지하단이미지가운데 이미지 가운데 이미지는 높이가 1픽셀이라 잘 안보여서 배경을 어둡게 처리했습니다. 위와 같은 재료를 사용하기 위해서는 DIV도 마찬가지 3개가 필요합니다. <DIV></DIV> 상단 <DIV></DIV> 가운데 <DIV></DIV> 하단 이런 식으로 말이죠. 네이밍은 아래와 같이 붙입니다. bg_personal_t bg_personal_m bg_personal_b 네이밍의 뜻은 아래와 같습니다. bg = BackGround personal = 개인정보 영역이므로.. t = Top m = Middle b = Bottom .bgPersonl_t {width:200px;height:10px;background: url(이미지주소);} .bgPersonl_m {{width:200px;height:100px;background: url(이미지주소);}} .bgPersonl_b {width:200px;height:10px;background: url(이미지주소);}} 와 같은 스타일시트 클래스명을 생성합니다. 그리고 각 div에 삽입합니다. ※ #bgPersonl_m 의 height 값은 알아서 주세요 <div class="bgPersonal_t"></div> 상단 <div class="bgPersonal_m"></div> 기존 로그인 부분이 이 안에 들어갑니다. <div class="bgPersonal_b"></div> 하단 자, 여기서 login_form.xml 파일의 소스를 살펴봅시다.        <div class="bgPersonal_t"></div> <div class="box_login fc_01 bgPersonal_m" id="box_login"> <form action="./" method="get" onsubmit="return procFilter(this, widget_login)" id="fo_login_widget"> <div class="form_field"> <div> <input name="user_id" type="text" class="input" id="login_form_user_id" /> </div> <div> <input name="password" type="password" class="input" /> </div> </div> <div><input type="submit" value=" " class="submit" /></div> <ul class="option"> <li><input type="checkbox" name="remember_user_id"id="chk_remember_user_id" value="Y" class="checkbox" /></li> <li><label for="chk_remember_user_id">{$lang->remember_user_id}</label></li> <li><a href="{getUrl('act','dispMemberSignUpForm')}"class="fc_02 btn">{$lang->cmd_signup}</a></li> </ul> </form> <div class="clear"></div> <script type="text/javascript"> xAddEventListener(window, "load", function(){ doFocusUserId("fo_login_widget"); }); </script> </div> <div class="bgPersonal_b"></div>   <div class="openid_login fc_01" id="box_login"> <form action="./" method="post" onsubmit="return procFilter(this, openid_login)" > <div class="wButtonWrite"> <ul> <li><input type="text" name="user_id" class="openid_user_id" /></li> <li><span class="wButtonTypeA"><imgsrc="/images/blank.gif" alt="" class="leftCap" /><inputtype="submit" value="{$lang->cmd_login}" accesskey="s" /><imgsrc="/images/blank.gif" alt="" class="rightCap"/></span></li> </ul> </div> </form> </div>  파란색, 초록색 굵은 글자 부분을 주목해서 봐주세요. bgPersonal_t, bgPersonal_b,bgPersonal_m 는 추가해준 부분입니다. box_login 이 두번째 기존로그인 부분인 것은 눈치채실 겁니다. 나머지는 상,하단이고요.. ※ 좀 더 설명해봅시다. id로 해도 되는데 스타일시트보니깐 class 로 다 되어있고 또 id로 해봤는데 뭘 빼먹었는지 왠지 잘 안되더군요. 해보다가 2번째 로그인박스에서 잘 안되서 class로 수정 작업했습니다. id는 #로 나타내고, class는 . 으로 표현합니다. .bgPersonal_t {width:200px;height:10px;background: url(../images/cyhome2/bg_personal_t.gif) no-repeat top;clear:both;} .bgPersonal_b {width:200px;height:10px;background: url(../images/cyhome2/bg_personal_b.gif) no-repeat top;clear:both;} .box_login .bgPersonal_m {width:200px;background: url(../images/cyhome2/bg_personal_m.gif) repeat top;clear:both;} ※ 주의할 점은 url 주소를 정확하게 입력해주세요. 그리고 bgPersonal_m의 위치는 box_login 안이므로 위와 같이 적어주셔야합니다. 이제 login_form.xml 파일은 이렇게 수정합니다. <div class="bgPersonal_t"></div> <div class="box_login fc_01 bgPersonal_m" id="box_login"> ... </div> <div class="bgPersonal_b"></div> 이렇게 login_info.xml 파일도 위와 같이 수정해주시면 됩니다. id와 class의 차이점은 class는 여러 지역에 여러번 써도 된다는 것이고, id는 한 곳에 한 번만 적어줘야합니다. ※ 위에서, 두번째 부분인 bgPersonal_m 클래스를 안만들고 css파일에서 .box_login 을 수정해줘도 됩니다. 이 부분은 위에서 이미 했으니 box_login은 수정 안하셔도 됩니다. 저는 두번째 bgPersonal_m 클래스 대신 box_login으로 대체했기에 수정합니다. default.css 9 line.. .box_login { border:solid 3px #D5D8DB; background:#FFFFFE; margin-bottom:10px;} 이제 우리는 네모 틀 테두리는 필요없으므로 저 굵은글씨 부분은 지워주셔도 됩니다. .box_login { border:solid 0px #D5D8DB; background:#FFFFFE; margin-bottom:10px;} 그냥 단순히 0px 으로 화면에 보이지 않도록 해주어도 됩니다. 저는 아래와 같이 해주었습니다. .box_login { background:url(../images/cyhome2/bg_personal_m.gif) #FFFFFE; } border는 지우고 background를 추가시켜줬습니다. 그리고 bgPersonal_b와 죽 이어져야 하니깐 margin-bottom:10px; 는 지워줬습니다. box_login에서 이 부분은 수정해주셔야합니다. margin-bottom은 말이죠. 안 그러면 마진값이 붙어서 아래 div와 떨어져보이거든요. 여기는 수정하고 지나가세요. 자, 이제 이렇게 완성이 되었습니다. 그런데 가만...... 확대해보겠습니다. 각 모서리에 의문의 #DDDDDD 선이 보입니다. 약간의 삽질을 했는데 원인은 모르겠고.. (아! 원인은 레이아웃 파일의 배경설정 때문이었네요. 여기서는 배경은 놔두지 않고 아래처럼 수정하는 방법으로 해결해보도록 합니다.) .bgPersonal_t{width:200px;height:10px;background:url(../images/cyhome2/bg_personal_t.gif)repeat-y #FFFFFF;border:0px;overflow:hidden;} .bgPersonal_b{width:200px;height:10px;background:url(../images/cyhome2/bg_personal_b.gif)no-repeat #FFFFFF;border:0px;overflow:hidden;} 최종적으로 위와 같이 해주었습니다. background:#FFFFFF 를 추가시켜줬더니 해결이 되더군요. :D box_login 도 보시자면 아래와 같습니다. .box_login { background:url(../images/cyhome2/bg_personal_m.gif) repeat-y #FFFFFE;} 자. 이렇게 해서 login_form.xml 파일은 완성~~~~~~~~~ 이제 login_info.xml 로그인 후의 화면이 남아있는데 바빠서 다음 내용은 다음 글을 확인해주세요.

원본