웹미니 - 블로그: 9월 2008

2008년 9월 30일 화요일

[(x)html]뒤,앞,새로고침,창닫기,새창띄우기

뒤로

앞으로

새로고침

창닫기

새창

2008년 9월 29일 월요일

[제로보드XE] 웹미니 ver4.5 버전 레이아웃/로그인 스킨배포

안녕하세요.

제로보드XE를 사용하다가 텍스트큐브로 옮기면서 기존에 사용하던 웹미니4.5 버전 스킨을 배포합니다.

레이아웃스킨과 로그인 스킨 총 두개입니다.

수정할 부분이 있어서 다소 햇갈린 부분이 있지만, 이미지에 대한 경로 수정이니 설명글을 잘보시고, 설치해보세요.

미리보기 - http://web.webmini.net (당분간만 열어두겠습니다.)

webmini_skin.zip

질문은 해당글에 댓글로 남겨주세요.

로그인 스킨부분입니다. 보시는 바와 같이 Daum 스타일풍으로 디자인 되었습니다.

전체적인 레이아웃 모습입니다.

로그인 후에 상단에 '마이페이지' 에 마우스 오버시 개인관련 정보가 나타납니다.

2차메뉴는 위와 같이 보여집니다.

다음은 스킨에 대한 간단한 설명입니다. 천천히 따라만 해주세요. 이미지 관련해서 수정사항이 몇군데 있습니다.

1. webmini_skin.zip 압축을 풉니다.
2. 압축을 풀면 webmini_main / webmini / images 총 3개의 폴더가 존재합니다.
3. webmini_main (레이아웃스킨) 은 본인의 계정 /layouts/ 에 위치시키시면 됩니다.
4. webmini (로그인스킨) 은 /widgets/login_info/skins/ 에 업로드합니다.
5. images (이미지) 는 로그인시 상단에 보이는 화살표 버튼이니 원하는 곳에 업로드합니다.

수정사항

먼저 로그인 스킨의 로그인전의 '아이디/비밀번호' 이미지 입니다.
webmini(로그인스킨) 안의 login_from.html 파일을 여시고, 16~17 쯤에 /widgets/login_info/skins/webmini/images/default/login_id.gif 부분을 찾으셔서 자신의 로그인스킨 경로로 수정해주세요.
만약 제로보드 zbxe 폴더안에 존재한다면 zbxe/widgets/.... 이런식으로 되겠군요...
마찬가지로 그아랫줄에 /widgets/login_info/skins/webmini/images/default/login_pass.gif 부분을 찾으신후 위와 같은 방법으로 자신의 경로로 수정해주세요.

로그인 스킨 이미지는 수정이 되었네요..

다음은 레이아웃 관련 상단 로그인후에 미니영역 버튼 이미지 입니다.
webmini_main (레이아웃스킨) 안에 js/webmini.js 파일을 여시고, 72,76줄에 이미지를 맨처음 5번의 images 폴더 안에 있는 이미지 주소로 수정해주세요.

webmini_main(레이아웃스킨) layout.html 파일을 여시고, 27줄쯤에 /images/button/btn_mini_off.gif 를 찾으신후 위와 같은 버튼 이미지 주소로 수정해줍니다.
아래쪽으로 내려와서 39번째쯤에 '웹미니 - 웹속에 작은 공간','http://www.webmini.net' 이부분을 자신의 홈페이지 주소와 제목으로 수정해주시면 됩니다.

* 본스킨은 마음데로 수정하셔도 되며, 출처같은건 남기실 필요없습니다. 마음내키시면 웹미니 링크하나 걸어주시면 됩니다.^^

IE6/7에서 글자가 짤리시는 분들 보세요.

죄송하지만, 이파일을 해당 레이아웃 css 파일에 덮어씌워주세요.. 레이아웃스킨 안에있는 css 파일 입니다.

default.css

참고로 : 오페라, 사파리, ie6/7 , 크롬, 파폭에 맞추었습니다.

추가 : 로고부분에 마우스 오버시 alt 가 Webmini 로 뜨는데 이것도 같이 수정해주세요.

layout.html 파일을 여시고 alt="Webmini" title="Webmini" 부분을 찾으셔서 자신의 로고 대체 텍스트명을 적어주세요.

3차 메뉴 펼침기능은 아래 링크에 해답이 있습니다. (토리세상)님이 알려주셨습니다. 감사합니다.
http://www.zeroboard.com/?mid=zbxe_user_tip&search_target=title_content&search_keyword=%ED%8E%BC%EC%B9%A8&document_srl=16342642

2008년 9월 26일 금요일

[IT뉴스]위자드닷컴 추천 블로그 모집

위자드닷컴에서 추천 블로그를 모집하고 있네요. [관련내용보기]

블로그를 하다보면 위자드닷컴에 제공하는 위젯을 많이 보셨을겁니다.

신청방법

http://blog.wzdworks.com/228 에 댓글을 올리시면 됩니다.

[필수] 위 포스팅에 비밀댓글로 블로그 주소와 내 블로그 소개, 그리고 주로 올라오는 포스팅의 종류를 아래 카테고리를 참고하셔서 간단히 남겨주시면 됩니다.

관련내용을 트랙백으로 날리시면 선정되는데 도움이 된다고 하네요.^^

엔터테인먼트
패션
뷰티
시사
역사
정치
경제
여행
책
사진
취미
스포츠
요리/음식
IT
과학
비디오
오디오

신청기간: 2008년 9월 23일 (화) 부터 2008년 9월 30일 (화) 까지

자세한 사항은 직접 들어가셔서 확인하시고, 깜짝 선물이 있다고 하니 참여한번 해보세요.

2008년 9월 22일 월요일

[사진]사랑

[CSS]강제 줄바꿈 word-break:break-all;

간혹가다가 영문으로된 글자가 자동으로 떨어지지 않고 옆으로 길게 늘어나 레이아웃이 깨질때가 있습니다.

그럴때 word-break:break-all; 를 해당 class 나 style="word-break:break-all;" 식의 인라인 스타일로 적용해 보세요.

참고로 해당소스는 비표준 입니다.

참고주소 : http://www.webmini.net/css/102120

[유머]언제봐도 재미있는 경제파리

언제 봐도 재미있는 경제 파리 ㅋㅋ

[유머]5초안에 웃겨드리겠습니다.

대략난감 -..-

[잡담]내 눈이 잘못됐나?

A와 B글자가 있는 배경이 같은색이라네요.. 포토샵에서 색을 찍어보세요..

2008년 9월 21일 일요일

[사진]토리

[여행]사이판 호핑투어

사이판 여행기
이번에는 호핑투어 입니다.
30~40 인승보트를 타고 크루징을 하다가 중간에 배를 정박하고, 낚시를 합니다.
바다 낚시라곤 이번이 두번째라 완전한 초짜임에도 불구하고 1등으로 고기를 잡았지 뭡니까? ㅋㅋ 자리가 좋았나봅니다.

무슨 물고기 인지는 몰라도 색깔이 참 예쁘네요.

물이 깨끗해서인지 물고기가 참 잘잡히더군요..
신혼여행 패키지로 갈시 아시다시피 여러팀과 같이 다니게 됩니다. 잡은 물고기들은 바로 회를 떠주는데, 같은팀과 소주한잔 먹으면서 친해질수 있는 기회가 호핑투어라고 할수있습니다.

재미있는 선택관광중에 하나라고 볼수있습니다.
간혹 배멀미를 하시는 분들이 있지만, 가시게 되면 꼭 한번 해보시길 추천합니다.^^;

[여행]신혼여행 사이판 정상에서

신혼여행 간지가 벌써 몇달이 지났는데, 이제서야 포스팅을 합니다.
주위에 여행사 다니시는 분이 있어 편하게 신혼여행을 갔다온거 같습니다. 그런데 옵션 포함이 되지 않은 상품었다죠? ㅋㅋ 그래서 우리는 옵션을 하나씩 선택했습니다. 그중에 ATV (산악 오토바이)도 옵션중에 하나였습니다.

이유인즉 사이판 정상을 올라갈수 있어서 였습니다. 작은섬이라 그런지 정상에서 사이판 전체를 볼수가 있었습니다.

사이판은 우리나라와 달리 잠깐씩 뿌려지는 열대성 폭우인 '스콜' 이 자주와서 정상까지 오토바이타고 올라가는데도 우비를 입을수 밖에 없었습니다.

일반 오토바이와 다르긴 하지만 소실적 오토바이 타던 실력으로 부룽부룽~~ 신나가 올라갔습니다. 물론 와이프를 태우고 말이죠? '가문의 위기' 의 신현준과 김원희의 장면을 생각하시면 될듯합니다. ㅋㅋㅋ

역시나 까불까불거리다, 진흙이 와이프 옷에 튀어서 혼구녕 났던 기억이 납니다.
정상에 도착해서 신기한 풀을 발견했는데 만지면 움직이는 풀이던데 이름이 미모사(신경초) 라고 하더군요.

사이판은 산위로 올라갈수록 갑부라고 합니다.

구름속에서 비를 맞는 기분은 참 색달랐습니다.
'스콜' 현상이 사라지고 우리는 정상에서 잠깐의 포토타임을 가졌습니다. 남는게 사진이라지요.

사진 찍힌걸 보니 생각보다 맑게 나왔군

나 집으로 돌아갈래~~~
정상이라 그런지 바람이 굉장했습니다. 사진을 보니 울트라맨 같군요.

정상에서 내려오는길에 다시 울트라맨 변신~~
생각보다 사진이 잘나왔네요.

미션 썩쎄쓰~
다음 일정을 위해 고고씽~

[여행]일본 후지쯔에서

2007년 마지막을 일본에서 보냈는데, 오다이바 후지쯔본사에서 새해 행사로 포토엽서로 인쇄를 해주길래. 친구 커플과 함께...

우리의 컨셉은 노홍철의 가는거야~~ ㅋㅋ

[잡담]집들이...

결혼(5월18일)후 집들이를 7월4일에 했는데, 이제서야 포스팅을 합니다.

결혼후 한두달정도는 정신없이 지나가더군요.. 토,일요일에는 거의 쉬질못했던거 같습니다.

그래도 저희 UI팀은 빨리해야할거 같아서 제일 먼저 했다죠..

<-- 즉서카메라로 찍어서 스캔을 받았더니, 화질이 많이 떨어지네요.^^;

제가 제일왼쪽이고, 팀장님부터 웹디자이너분 까지 이미 술이 떡이된 상태군요. ㅋㅋ

사이판에서 사온 '발렌타인 25년산' 의 뚜껑을 이날 열고야 말았습니다.

술을 덜먹은 상태에서 마셨어야하는데, 지금 생각해보니 참아쉽습니다.

이날 제와이프가 피곤한 몸을 이끌고 음식을 준비해줘서 지금도 고맙게 생각하고있습니다.

이날 와주신 분들께 감사드리며, UI팀 화이팅 입니다.^^

[사진]길

일본 도쿄에서...

[웹표준]DTD에 따른 브라우저 박스크기변화

먼저 이글은 http://zine.standardmag.org/200802/20 와 같은 내용임을 알려 드리며 다시한번 테스트 해본 결과입니다.

크로스브라우징으로 인해 시간낭비 및 생각하지 않던 것들때문에 야근을 하는 경우가 종종 발생하죠. 참 안타까운 현실입니다.
알려진 크로스브라우징 팁 가운데 DTD의 선택도 중요한 부분을 차지 하고 있다는건 여러 글들을 통해 접했으리라 생각합니다.
그래서 DTD에 따른 박스크기 변화를 다시한번 테스트해 보았습니다.

테스트 박스는 공통적으로 width = 150px / height = 100px / padding = 30px / border = 3px 값을 주었을때 입니다.

먼저 DTD를 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 로 했을 경우에 결과입니다.
소스는 다음과 같습니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body { margin:30px; }
#wrap { width:150px; height:100px; padding:30px; border:3px solid #ccc; font-size:12px; }
</style>
</head>

보시는 바와 같이 파이어폭스를 제외한 IE6 / 7 은 지정한 가로/세로 값으로 보여지며 border 과 padding 값을 포함하고 있는 반면 파이어폭스는 지정한 가로/세로 값에서 border 값과 padding 값이 추가된 사이즈로 박스가 보여집니다.

다음은 DTD 가 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 로 했을 경우 입니다.

소스는 다음과 같습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body { margin:30px; }
#wrap { width:150px; height:100px; padding:30px; border:3px solid #ccc; font-size:12px; }
</style>
</head>

이처럼 DTD에 따라 각 브라우저 별로 다르게 보임을 알수 있습니다.

오페라와 사파리(3.1) 역시 파폭과 동일하게 보여지며 DTD와 관계없이 padding 값과 border 값만큼 지정한 박스보다 커짐을 알수 있었습니다.

역시 IE만 혼자 노는걸 알수 있군요.. 참고 되셨으면 좋겠네요..^^

[정보]favicon(패비콘) 만들어주는곳

favicon (패비콘) 을 간단하게 만들어주는 사이트 입니다.

http://www.html-kit.com/favicon

패비콘이란 주소창에 보여주는 아이콘을 말합니다.
gif,jpg,png 등으로 올리시고 변환하시면 됩니다.
패비콘이 원일경우나 뒤에 배경이 투명으로 할때는 gif,png 등으로된 배경이 투명인 이미지로 만드시면 됩니다.

변환하시고 다운로드 하시면 extra 라는 하위폴더가 있고 그안에 icon 으로 된 파일이 투명이며 처음 보여지는 favicon.icon 이란 파일은 투명이 아닌 아이콘 입니다.

[사진]일본 신호등

일본 도쿄 신호등

[사진]무인 모노레일

일본 무인 모노레일

[사진]요크셔테리어

지금은 같이 없지만, 예전에 키웠던 요크셔테리어 (토리) 미용후

[사진]사이판 마나가하섬

사이판 마나가하섬

[사진]일본 우에노공원

일본 우에노 공원

[사진]사이판

[Javascript]자동으로 년도,월,일 나오게하기

2006.3.28 화 오전 12:32

이런식으로 나타납니다. 아래소스를 원하시는 위치에 삽입하세요.

<div id="divTime">
<script type="text/javascript">
function getFullToday(){
var yIdx='일월화수목금토';
var today = new Date();
var buf = "";
yy=today.getYear();
mm=today.getMonth() + 1;
dd=today.getDate();
h=today.getHours(); if(h>12){h-=12;ap='오후';}else{ap='오전';}
m=today.getMinutes();
yo=yIdx.charAt(today.getDay())+'';
buf=yy+'.'+mm+'.'+dd+' '+yo+' '+ap+' '+h+':'+m+'';
return buf;
}
function putsTime()
{
if ( typeof(document.all.divTime)=="object" ) {
document.all.divTime.innerHTML = "" + getFullToday() + " ";
}
setTimeout("putsTime()", 1000);
}
putsTime();
</script>
</div>

[Javascript]마우스 오버시 레이어창 뜨기(파폭,익스지원)

마우스 오버시 레이어창 띄우는 팁입니다.

<a href="#" onmouseover="view(true)" onmouseout="view(false)" style="text-decoration:none; ">가나다라마바사</a>

오버시 보여질 내용입니다.

<div id="spec1" style="position:relative;display:none;">
마우스 오버해보세요.
</div>

여러가지로 응용해보세요.

[제로보드4]짱구버전 설문조사 추출스킨

제로보드4 설문조사 추출 스킨입니다.

가로사이즈:150 세로사이즈:200 정도 잡으시면 되겠습니다.

위에 파일을 다운받으시고, dbconn.php파일을 자신의 계정에 맞게 수정해줍니다.

<?
$host_name = "localhost"; // 호스트 네임
$user_name = "아이디"; // db 아이디
$db_name = "디비네임"; // db 네임
$db_password = "비번"; // db 비번
$zero_path = "http://자신의 계정주소/bbs"; // 제로보드의 위치
?>

제로보드 폴더명이 bbs면 자신의 계정주소만 바꿔주시면 됩니다.

그리고 vote.php파일을 여시면 6번째줄에

$id = "pds_vote"; //설문조사 게시판이름

이부분이 있는데 이부분을 자신이 쓰고 있는 설문조사 게시판이름으로 바꿔줍니다.

두줄 내려가면

$log_image = "http://자신의 계정주소/backzzanggu_vote/img"; //이미지 경로

이부분도 자신의 계정주소를 적으시고, 몇줄 더내려가다 보면

@font-face {font-family:웹정;src:url(http://웹폰트주소/jung9.mwf);}

웹정으로 사용하실분은 웹폰트주소 입력해주시고, 그렇지 않는분은 이한줄을 삭제하시고,

웹정으로 써진부분을 굴림이나 돋음등으로 바꿔줍니다.

이제 이스킨을 불러봅시다. 아이프레임으로 부를시 이스킨 불러들일 위치에 아래 소스를 삽입합니다.

<iframe src=http://자신의 계정주소/backzzanggu_vote/vote.php frameborder="0" marginwidth="0" marginheight="0" width="150" height="200" scrolling="no"></iframe>

참고로 위에 우리집설문조사 부분을 바꾸실려면 box_top.gif 파일을 수정하시면 됩니다.

인크루드로 부를시 <? include ("backzzanggu_vote/vote.php") ?> 이소스를 스킨들어갈 원하시는 위치에 삽입하시면 됩니다.
단 이스킨이 들어갈 문서의 확장자 명이 htm이나 html이아닌 php 이여만 합니다. ex)main.php

ps) 새창으로 결과보기를 띄우실 분은 vote.php 파일을 메모장으로 여신후 _self 로 검색후 이부분을 _blank 로 수정하시면 됩니다.

backzzanggu_vote.zip

[제로보드4]짱구버전 최근게시물 세트

제로보드4 최근게시물 스킨 (세트)입니다.

압축을 풀면 bzgu 폴더안에 3개의 폴더가 있는데 bzgu 폴더를 제로보드 폴더 (bbs)안에 latest_skin 폴더에 업로드합니다.

★최근게시물 설치법

-최근게시물이 보일 해당 페이지 html 맨위에 아래소스 삽입

<?
$_zb_url = "http://자신의계정주소/bbs/";
$_zb_path = "/제로보드절대경로/";
include $_zb_path."outlogin.php";
?>



-최근공지 보일 위치에
<? print_bbs("bzgu/bzgu_notice", "공지사항", "보여질게시판이름", 2, 30)?> 소스삽입
-최근게시물 보일 위치에
<? print_bbs("bzgu/bzgu_bbs", "자유게시판", "보여질게시판이름", 5, 15)?> 소스삽입
-최근겔러리 보일 위치에
<? print_gallery("bzgu/bzgu_gallery", "포토앨범", "보여질겔러리", 2,70,70,2)?> 소스삽입

이미지사이즈와 보여질 목록수 글수는 자신의 홈피에 맞게 수정하세요.

* 압축을 풀었을때 폴더명을 바꾸실경우 위에 소스 폴더명도 바꾼폴더명으로 수정해주세요.

bzgu.zip

[제로보드4]한장 최근이미지 스킨

제로보드4 최근이미지 스킨입니다.

다운을 받으시고 압축을 풉니다.
bzgu_gallery 라는 폴더가 생성되면 폴더채로 bbs/latest_skin 에 업로드 하시고 해당 페이지 보일 곳에 아래 소스를 삽입합니다.

<? print_gallery("bzgu_gallery", "원하는문구", "게시판아이디", 1,125,90,1)?>

여기에서 원하는 문구와 게시판 아이디만 자기에 맞게 수정하시고요. 주의할점은 뒤에 1,125,90,1 에서 세로사이즈 90은 조절하셔도 되나 125는 그대로 두셔야합니다. (크기를 수정할경우 테이블이 깨집니다.)

가로사이즈 : 178px
세로사이즈 : 163px

bzgu_gallery.zip