시작하기 전에.. 서문

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



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

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

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

로그인 위젯 스킨 수정하기

0. 로그인 위젯의 위치

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

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

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

..설명은 편하게 skins/default 를 예로 들어서 설명하겠습니다.
이후부터는 'eond_blu' 를 'default' 로 대체하겠습니다.

1. 폴더 구조

2. 파일설명

    js 폴더나 필터 디렉토리는 별로 수정할 필요가 없으니
    보면 아는 파일의 설명은 그냥 넘어가겠고 설명이 필요한 부분만 해드리겠습니다.

2-0. /css/default.css

기본 레이아웃에 보면 default, white, black 이라고 되어있습니다.
이 로그인 위젯도 그 색상스타일시트에 영향을 받습니다.
여기서는 default.css 파일만 수정 제작하는 방법을 다루겠습니다만
만약에 default,css 파일 외에 white.css, black.css 파일을 만들어두신다면
레이아웃에서 선택하는 색상에 맞게 로그인 위젯의 스타일시트 역시 변하게 됩니다.

그런데 개인적으로는 레이아웃에서 색상을 바꾸면 로그인 위젯도 영향을 받아 바뀌기 보다는
독립적으로 로그인 위젯에서도 색상스타일시트값을 변경할 수 있었으면 좋겠다는 생각도 해봤습니다.
누가 이거는 건의 좀 해주세요. (__;)

2-1. skim.html

skin.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 명 때문인데요,

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

17번째 line 에서
.box_login .lastlogin { clear:both; padding-bottom:5px;}

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

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

일전에 일모리님의 css 강의를 보면 float 과 clear 에 대해서 나옵니다. 보신 분들은 아시겠는데
div 를 float:left 로 모두 정렬하고 마지막은 clear:both; 로 닫아주는 것이거든요.

만약에
<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">은 놔두기로 합니다.

... 별 내용 안 썼는데 벌써 이렇게 길어졌군요.
2부로 들어가겠습니다.

본격적으로...할래니깐 귀찮아서 좀 쉬고 가겠습니다. 다음 내용은 다음 글에서 확인해주세요.