로그인 위젯 스킨 수정하기 1

시작하기 전에.. 서문

이전의 초보레이아웃 스킨 고치기 시리즈를 완독(..이라고 써도 될까요)이나 통독;하셨다면
대충 아래와 같이 레이아웃은 짤 수가 있습니다.



보시다시피 뭔가가 많이 채워져있기는 한데 상당히 조잡하고 엉성하고
디자인이 통일되어있지 않고 각 요소별로 이것저것 짜집기한 식인데

아직 위젯별로 통일적인 디자인이 이뤄지지 않아서 그런데요,

레이아웃은 대강 해놓았고 차차 하면 되니깐 이제 끝마치고
로그인부터 한 번 손봅시다.

...여기까진 시작하기 전에 잡설이었고, 아래줄부터 살펴보시면 되겠습니다.

---

로그인 위젯 스킨 수정하기

1. 로그인 위젯의 위치

/home/xynex/public_html/zbxe/widgets/login_info/skins/default/
(검은색글씨부터가 설치경로인 건 아시겠죠? zbxe가 설치폴더입니다.)

default 스킨과 똑같은 위치에 만들고자 하는 로그인 스킨의 이름으로 폴더를 하나 더 생성합니다.

/home/xynex/public_html/zbxe/widgets/login_info/skins/default1/

※ 'default1'이란 것은 제작자 임의로 붙여주시면 됩니다. 'default1' 대신 'nzeo'라고 붙여도 되는 겁니다.

2. 폴더 구조 및 파일 설명

  js, filter 디렉토리는 따로 뭔가를 더 추가하지 않는 이상 수정할 필요가 없으니 설명하지 않겠습니다.
  이 외의 수정을 해야하는 파일을 위주로 설명을 하겠습니다.

[ 파일설명 ]

2-0. 스타일시트 파일 (/css/default.css)

기본 레이아웃에 보면 default, white, black 이라고 되어있습니다.
로그인 위젯 역시 레이아웃의 스타일시트 파일에 영향을 받습니다.

지금 설명에서는 default.css 파일만 수정 제작하는 방법을 다루겠습니다만
만약에 default,css 파일 외에 white.css, black.css 파일을 만들어두시게 되면
레이아웃 설정에서 선택하는 색상에 맞게 로그인 위젯의 스타일시트 역시 변하게 됩니다.

더 설명드리자면, 레이아웃 설정에서 black.css 파일로 스타일시트 파일을 설정하게 되면
만약에 로그인 위젯에서 black.css파일을 만들어두게 되면 로그인 위젯의 스타일시트도 레이아웃 설정에 따라 black.css 파일이
스타일시트 파일로 지정이 되는 겁니다.  즉, 레이아웃 설정에 따라 로그인 위젯의 스타일시트도 변한다는 말입니다.

개인적인 생각으로는 위와 같이 레이아웃에서 색상이 바뀌면 로그인 위젯도 따라 영향을 받아 바뀌기 보다는
독립적으로 로그인 위젯에서도 색상스타일시트값을 변경할 수 있었으면 좋겠다는 생각입니다.
(혹시 이 글을 보신 분들 중에 동의하시는 분들이 있다면 직접 건의를 하셔도 됩니다.)

2-1. 스킨정보파일 (skim.html)

skin.xml 파일은 레이아웃에서 info.xml 과 같은 역할을 합니다.
(info.xml 파일의 위치 : /home/xynex/public_html/zbxe/layouts/xe_official/conf/info.xml)

언어설정부분은 제가 각 언어를 모르므로 기본 틀만 설명해드리겠습니다.


보시다시피 skin.xml 파일에는 기본 정보가 들어가있습니다. 위에도 말씀드렸다시피 info.xml 파일과 내용이 거의 흡사하죠? ^^
이 파일은 스킨의 기본 정보 외에는 별다른 것이 없다는 말입니다.

화면에 나타내고자 하는 소스는 바로 아래 파일들입니다.

2-2. 로그인 후 (login_info.xml)

login_info.xml 는 로그인 후의 화면입니다.
login_form.xml 은 로그인 전의 폼이 있는 화면입니다.

로그인하기 전의 화면인 form 디자인은 별 게 없으니깐
먼저, default/login_info.xml 파일의 소스를 보고 설명드리겠습니다.


위 소스가 아래 화면과 같은 디자인을 나타냅니다.


위의 소스화면에서,

흰색으로 칠해진 글씨가 '정낙훈 로그아웃' 부분입니다.
<div class="userName">...</div>

빨간색으로 칠해진 글씨가 '회원정보..관리' 부분입니다.
<ul class="userMenu">...</ul>

빨간색으로 칠한 글씨 안에 초록색 글씨 부분이 바로 '최근로그인 : ..' 부분입니다.
<p class="latestLogin">{$lang->last_login} : <span>{zDate($logged_info->last_login, "Y-m-d H:i")}</span></p>


※ div style="clear:both;" 로 인한 추가 설명

최근로그인 부분은 표시하고 싶지 않다 하시는 분들은 초록색 글씨 부분을 지워주면 됩니다.
여기서 주의할 점은 빨간색 부분은 지우면 안됩니다.

왜냐하면 바로 위에서 굵은 빨간색으로 칠한 latestLogin 이라는 class 명 때문인데요,
제가 설명하고자 하는 style="clear:both;" 가 바로 이 것입니다.

skins/default/css/ 폴더 아래의 default.css 스타일시트 파일에서 한 번 찾아보면

17번 째 줄에서

.box_login .lastlogin { clear:both; padding-bottom:5px;}

..와 같은 코드를 볼 수 있습니다.

clear:both; 라는 스타일시트는 테이블을 예로 든다면 마지막 셀 정도의 역할을 하는데요

일전에 일모리님의 css 강의를 보면 float 과 clear 에 대해서 나옵니다.
이 clear:both의 역할이란 div 를 float:left 로 모두 왼쪽 정렬을 하고 마지막은 clear:both; 로 닫아주는 것이거든요.

만약에 닫아주지 않는다면 이 뒤에 넘어오지 않아야하는 <DIV>까지도 왼쪽 정렬이 되버리는 것입니다.


<p class="latestLogin">{$lang->last_login} : <span>{zDate($logged_info->last_login, "Y-m-d H:i")}</span></p>

만약에 위에서 초록색글씨 부분 뿐만 아니라 p class 빨간색 글자가 있는 부분까지 모두 지워버리면
로그인 화면 아래의 구조부터 위치가 조금 헝클어집니다. 위로 올라오지 않아야하는 것이 위로 올라와서 왼쪽 정렬이 되기 때문인데요, 아래 그림을 보시면 이해가 쉬울 겁니다.



대략 이런 식으로 말이죠. clear:both; 로 닫아주지 않음으로 해서 그 뒤에 있는 div가 위로 끌려와서 옆에 붙어버립니다.
저렇게 되면 안되니깐 <p class="latestLogin">..</P>은 놔두고 지우셔야 합니다.

글이 좀 길어져서 다음 글부터 다시 시작하겠습니다.