홈페이지에 있어서 메뉴는 과거에서 현재까지 레이아웃을 구성하는데 있어서 가장 기본적으로 생각해야 할 사항입니다.
요즘 웹표준 추세에 맞추어서 CSS의 중요성이 자리잡아가면서 기존에 단순 텍스트로는 안이쁜 메뉴들을 이미지로 만들어서 사용하는 것을 벗어나 메뉴들이 텍스트(Text)를 사용하되 CSS를 입혀서 이쁜 메뉴를 만들 수 있게 되었습니다.
간단하게 CSS의 기본기능만 가지고 메뉴를 만들 수 있지만, 약간의 이미지로 예쁜 메뉴를 만들 수 있습니다.
간단히 소개하는 CSS Tab Designer (Freeware) 는 CSS로 만들 수 있는 메뉴들의 표본(샘플)을 제공합니다.
위와 같이 CSS를 사용하여 이미지로 만든 메뉴가 부럽지 않게 이쁜 메뉴들을 만들어 낼 수 있습니다.
기본적으로 CSS메뉴는 UL(OL), LI 태그를 사용하여 메뉴를 구성하게 됩니다.
이 때, 텍스트로 만들어진 메뉴이기에 강조(Highlight)의 의미를 두기 위해 현재 메뉴에다가는 특별한 처리 - Bold, Coloring, Boxing, etc -를 해주게 됩니다.
이 때 이 특별한 처리를 쉽게 도와주는 것은 CSS의 Class Selector의 사용입니다.
하나의 예제를 보겠습니다.
▶ 예제 실행
위의 예제에서는 active라는 Class Selector 를 하나 사용함으로서 현재 위치를 알려주고 있습니다.
강조(Highlight)는 어려운 것이 아니었습니다.
#navPyra {
margin: 0;
padding: 0 0 20px 10px;
border-bottom: 1px solid #9FB1BC;
}
#navPyra li {
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}
#navPyra a:link, #navPyra a:visited {
float: left;
font-size: 10px;
font-family:verdana,helvetica,sans-serif;
line-height: 14px;
font-weight: bold;
padding: 0 12px 6px 12px;
text-decoration: none;
color: #708491;
}
#navPyra a:link.active, #navPyra a:visited.active, #navPyra a:hover {
color: #000;
background: url(./pyramid.gif) no-repeat bottom center;
}
<ul id="navPyra">
<li><a id="nav_HOME" class="active" href="cssmenu1.asp">HOME</a></li>
<li><a id="nav_Myinfo" href="cssmenu1.asp?mode=myinfo">Myinfo</a></li>
<li><a id="nav_Member" href="cssmenu1.asp?mode=listmember">Member</a></li>
<li><a id="nav_FreeBoard" href="cssmenu1.asp?bid=free">FreeBoard</a></li>
<li><a id="nav_Logout" href="cssmenu1.asp?mode=logout" >Log out!</a></li>
</ul>
오래전에 메뉴의 강조 문제로 서버측 스크립트를 통해서 해결한 경험이 생각납니다.
asp나 php를 통해서 GET으로 받은 변수에 따라 각각 해당 메뉴에다 출력해주는 방식은 불편하기 짝이 없지요.
새 메뉴가 생기면 또 그에 따른 변수를 하나 만들고, 그 변수명에 따라 바뀌는 IF문을 또 넣어줘야 하니까요.
하지만 이제는 그럴 필요가 없어요. 서버측 스크립트를 사용할 필요가 없어졌거든요. DOM의 활성화와 함께 많은 서버측 할 일을 클라이언트가 할 수 있게 되었거든요.
현재 위치를 알려주는 Class Selector는 DOM을 이용하여 Javascript를 통해서 해당 탭메뉴를 클릭한 후, 클릭한 메뉴를 active시켜주는 스크립트를 짜보겠습니다.
* 여기서 DOM이란?
DOM 이란 제목에서도 보다시피 Document(문서) 내의 Tag들을 어떻게 Object(물체화) 하는가에 대한 W3C 의 표준 Model 이라 할 수 있겠습니다.
DOM 이란 제목에서도 보다시피 Document(문서) 내의 Tag들을 어떻게 Object(물체화) 하는가에 대한 W3C 의 표준 Model 이라 할 수 있겠습니다.
▶ 예제 실행
위의 예제에서는 active라는 Class Selector 를 Javascript를 이용하여 페이지가 변경될때마다 active Class Selector를 Anchor태그에 각각 적용하는 코드입니다.
// 현재 페이지 이름과 Anchor태그에 href 속성의 값이 일치할 때, Anchor 태그에 active Class Selector를 적용합니다.
function findLocation()
{
// HomeUrl 변수에 자신의 도메인 혹은 IP를 적습니다. ex) http://test.ssemi.net
// 서버측 스크립트를 이용하여 자동으로 만들 수 있습니다. <%= HTTP_HOST() %> - 아래에 별도 표기
var HomeUrl = 'http://test.ssemi.net';
var sUrl = document.location.href.replace(new RegExp(HomeUrl,'gi'),'').toString().toLowerCase();
if (document.getElementById('navPyra'))
{
var menu = document.getElementById('navPyra').getElementsByTagName("A");
var s;
for (i = 0 ; i < menu.length; i++)
{
s = menu[i].href.replace(new RegExp(HomeUrl,'gi'),'').toString().toLowerCase();
if (s.length > 2)
{
if (sUrl.indexOf(s) == 0) menu[i].className = "active";
}
}
}
}
<body onload="findLocation()">
<ul id="navPyra">
<li><a id="nav_HOME" class="active" href="cssmenu1.asp">HOME</a></li>
<li><a id="nav_Myinfo" href="cssmenu1.asp?mode=myinfo">Myinfo</a></li>
<li><a id="nav_Member" href="cssmenu1.asp?mode=listmember">Member</a></li>
<li><a id="nav_FreeBoard" href="cssmenu1.asp?bid=free">FreeBoard</a></li>
<li><a id="nav_Logout" href="cssmenu1.asp?mode=logout" >Log out!</a></li>
</ul>
</body>
Function HTTP_HOST()
Dim tmp
tmp = "http://" & Request.ServerVariables("SERVER_NAME")
IF Request.ServerVariables("SERVER_PORT") <> "80" Then
tmp = tmp & ":" & Request.ServerVariables("SERVER_PORT")
End IF
HTTP_HOST = tmp
End Function
2가지의 예제를 통해서 배울 수 있는 항목은 CSS Class Selector 와 Javascript를 이용해서 각 링크에 동적인 메뉴선택 효과를 줄 수 있다는 점입니다.
설명이 미흡할 수 있으나, 예제파일에 대하여 직접 소스를 보시면 쉽게 이해하실 수 있습니다.
이미지 메뉴를 사용하는데 있어서 가장 많이 쓰이게 되는 효과는 바로 롤오버(Roll Over)입니다.
롤오버를 사용하기 위한 방법은 자바스크립트로 효과를 주었던 방법이 있는데, 이제는 CSS만으로도 가능합니다.
복잡한 자바스크립트 코드를 사용할 필요가 없으니 시간을 번 셈이죠.
▶ 예제 실행
위의 예제에서는 CSS만으로도 이미지 롤오버(Rollover)가 되는 것을 보여주고 있습니다.
/* CSS만으로 가능합니다 */
A.rollover img { border-width:0px; display:inline; }
A.rollover img.over { display:none; }
A.rollover:hover { border:0px }
A.rollover:hover img { display:none; }
A.rollover:hover img.over { display:inline; }
CSS Rollover에 대하여 좀 더 다양한 정보를 얻고 싶으시다면 http://pmob.co.uk/을 방문해주세요
2006. 8. 15. 09:40
사용자(클라이언트)들의 정보를 파악하여 그들의 상황에 알맞은 좀 더 멋진 화면을 구성하거나, 코드를 만드는데 필요한 것은 역시 정보입니다.
웹이 발전하면서 사용자들의 요구에 맞게 웹페이지가 변하기 시작했습니다.
웹이 사용자의 정보를 얻어 가공하고, 사용자의 요구에 맞게 코드를 구성하고 개인화 하는데는 아주 약간의 시간이 필요했을 뿐입니다.
이번에 소개할 것은 간단하게 클라이언트의 정보를 모아주는 Javascript Function 입니다.
깔끔하고, 간단하게 웹의 클라이언트 기반에서 얻을 수 있는 쓰임새 있는 유용한 정보를 모아오는 소위 Tracker기능의 자바스크립트 합수입니다.
이미 웹 개발자들에게서 많이 알려져 있는 <IMG>이미지 태그를 통해서 스크립트를 실행하는 방법으로 정보를 얻는 방법을 다들 아시리라 생각합니다.
* 이미지 태그로 주소를 실행하는 방법을 통해 필요한 정보들을 해당 파일로 보내는 방법입니다.
<img src="http://주소/파일.php?p1=value1&p2=value2&p3=value3....." width="1" height="1" border="0" style="visibility:hidden;" />
example)
http://주소/counter.php?Doc_Url=/test.php&Ccpu=x86&
CuserAgent=mozilla/4.0 (compatible; msie 6.0; windows nt 5.2; .net clr 1.1.4322)&
Clang=ko&Cje=1&Cce=1&Cref=bookmark&Ctz=9&Ccd=32&Cswh=1280*1024&
Cid=ua=IE&ver=6.0&lang=ko&resolution=1280x1024&color_depth=32&platform=Win32&url=http%3A//www.ssemi.net/&refer=
하지만 AJAX가 생긴 이래로 수많은 스크립트 방식에 변화가 찾아오게 되었습니다.
아니 정확히는 XMLHttpRequest/XMLHTTP의 쓰임이랄까요?
AJAX가 유명해지고 구글에서는 Google Analytics를 공개했고, 이전부터 국내에서는 랭키닷컴의 카운터/웹로그 분석의 웹로그 분석 사이트들이 정보를 모으고 통계를 내고 있었습니다.
자! 간단하게 클라이언트 브라우져의 정보를 추적해봅시다!!
Tracking Client Browser Infomation
사용자 브라우져의 기본적인 유용한 정보를 추적합니다
▶ View Source
// Your site address here!
var HomeUrl = "http://ssemi.tistory.com";
function Tracker()
{
var ustr = navigator.userAgent;
var info = [];
var is_safari = ustr.indexOf("Safari") != -1;
var is_op = ustr.indexOf('Opera') != -1;
var is_ie = ustr.indexOf('MSIE') != -1;
var is_ff = ustr.indexOf('Firefox') != -1;
if (is_op)
{
info['ua'] = 'Opera';
info['ver'] = new RegExp('Opera ([0-9.]+)','gi').exec(ustr)[1];
}
else if (is_ie)
{
info['ua'] = 'IE';
info['ver'] = new RegExp('MSIE ([0-9.]+)','gi').exec(ustr)[1];
}
else if (is_ff)
{
info['ua'] = 'Firefox';
info['ver'] = new RegExp('Firefox\/([0-9.]+)','gi').exec(ustr)[1];
}
else if (is_safari)
{
info['ua'] = 'Safari';
info['ver'] = new RegExp('Safari\/([0-9.]+)','gi').exec(ustr)[1];
}
else
{
info['ua'] = 'Unknown';
info['ver'] = '';
}
var refer = document.referrer || '';
var url = document.location.href.replace(new RegExp(HomeUrl,'gi'),'');
info['lang'] = navigator.userLanguage ? navigator.userLanguage : navigator.language ? navigator.language : '';
info['resolution'] = screen.width && screen.height ? screen.width + 'x'+ screen.height : '';
info['color_depth'] = screen.colorDepth ? screen.colorDepth : '';
info['platform'] = navigator.platform ? navigator.platform : '';
info['url'] = escape(url.replace(new RegExp('#.+?$','gi'),''));
info['refer'] = escape(refer.indexOf(HomeUrl) == -1 ? refer : '');
data = [];
for (var i in info)
data.push(i+'='+info[i]);
var s = data.join("&");
}
▶ 사용자 정보
코드를 보면 알 수 있듯이 변수 s에 기록하는 방문자 정보는, 클라이언트쪽에서 브라우져, 브라우져 버젼, 운영체제, 언어설정, 화면 해상도, 컬러수, 레퍼러, 현재 보고 있는 페이지 정보를 전송합니다.▶ 결과
ua=IE&ver=6.0&lang=ko&resolution=1280x1024&color_depth=32&platform=Win32&url=http%3A//ssemi.tistory.com/&refer=
▶ 응용하기
변수 s에 클라이언트 정보가 담기기 때문에 해당 변수를 서버로 전송합니다.전송할때는 위에서 말한 XMLHttpRequest/XMLHTTP를 사용하여 전송합니다.
var ajax = new Ajax();
ajax.loadText('/Tracker.php?rnd='+Math.random(),'POST',s);
* Ajax()는 사용자 정의 개체로서 본 내용에서는 제공하지 않습니다.
(출처를 확인하거나 XMLHttpRequest/XMLHTTP를 통한 전송 코드 입니다)
서버쪽(Tracker.php)에서는 방문자 IP(REMOTE_ADDR)와 이 IP를 가지고 국가 정보를 기록할 수 있습니다. (use ip2nation)
▶ 마치며
실제로 본 코드로는 할 수 있는 것이 아무것도 없다고 해도 과언이 아닙니다.웹의 특성상 클라이언트의 정보를 수집하고, 가공해서 보여주는 것은 서버에서 처리해야 하기 때문입니다.
본 내용에서는 서버에서 처리하는 내용을 넣지 않았습니다. 클라이언트의 정보를 수집까지는 도와드려도, 가공하는 몫은 여러분에게 달려 있기 때문입니다.
본 내용에서의 중요점은 간단한 함수 하나를 가지고 정보를 가져오는 것 + XMLHTTP/XMLHttpRequest를 통해 전송하는 방법에 대한 내용만을 전해드립니다.
Practice Yourself!!
- Wizz님의 블로그 | 마이위쯔블로그 통계 페이지의 소스 및 설명를 사용/인용 하였습니다 :)
2006. 8. 7. 08:53
Written by Ssemi™(semin Seol), www.Ssemi.net
개발자의 필요 덕목 중 개발능력도 물론 중요하지만, 문서화는 매우 중요한 요소입니다.
문서화 능력 하나로 인해 같은 개발능력을 갖고 있는 개발자라 할 지라도, 차이점이 존재하게 만들 수 있기 때문이지요.
Stored Procedure(저장 프로시져) 코딩을 쉽게 하자에 이은 2탄은 바로 테이블 정의서를 쉽게 만들어 보는 것입니다.
사수에게 테이블 정보를 전달 받을 때, 혹은 부사수에게 테이블에 대한 내용을 알려줄때 유용하게 사용하실 수 있습니다.
Document Table List
MSSQL Eterprise Manager의 다이어그램을 출력하기 용의하게 변경한 ASP 스크립트 파일입니다.
▶ 미리보기(Preview)
이곳에서 미리보기 가능합니다 (새창으로 띄우실려면 shift + 마우스 클릭)
▶ 다운로드(Download)
invalid-file▶ 사용법(How to use)
파일을 열어보시면 아래와 같은 부분이 있습니다. 해당 정보를 입력해주세요.'--------------------------------------------------------------------------
' // 사용자 지정 사항
'--------------------------------------------------------------------------
' 디비 연결 - DB Connect
'--------------------------------------------------------------------------
Dim DBSRV, DBName, DBID, DBPW
DBSRV = ""
DBName = ""
DBID = ""
DBPW = ""
'--------------------------------------------------------------------------
' 개인 정보 - Personal Info
'--------------------------------------------------------------------------
ProjectName = "TABLE INFOMATION"
YourName = "Your Name"
'--------------------------------------------------------------------------
' 종이 픽셀 설정 (Default : A4)
PaperHeight = "1010" ' A4용지에 맞는 종이 높이값
'--------------------------------------------------------------------------
▶ 주의사항
- 이 스크립트의 실행은 DBMS가 MSSQL임에 한해 실행되고 보여집니다.
- 인터넷 익스플로러(Internet Explorer) + A4용지에 최적화 되어있습니다
- 파이어폭스(Firefox)에서는 용지 중앙에 아주 알맞게 출력됩니다. (단 테이블이 이쁘질 않음 ㅜ_ㅜ)
- 출력 용지를 변경하실 때에는 IE메뉴 - 파일 - 인쇄 미리보기를 통해 PaperHeight 의 값을 설정해주시고 출력한다면 좀 더 멋진 결과물을 받으실 수 있습니다.
2006. 8. 1. 16:13
Recent comment