お前の悲しみは僕には切望

Dreamweaver 구동시 자바스크립트 에러가 발생했을 경우에는 

윈도우즈는 문자코드로서 CP949코드를 사용한다. CP949코드는 KS완성형코드 KS_C5601의 확장코드로서 현대한국어를 거의 수용할 수 있게 하였다.

하지만 FTP 클라이언트는 서버에서 흔히 사용되는 언어코드인 EUC_KR이나 UTF-8코드로 세팅되는 경우가 많다.

문제는 윈도우즈에서 FTP를 한글을 업로드하고 재 다운받고자 하면 8BIt 문자 코드에러가 생길 수 있다는것.

이럴때는 FTP클라이언트에서 아래와 같이 세팅해주면 된다.

  
위는 filezilla에서 세팅된 모습. 이렇게 설정하면 코드 문제없이 사용할수 있다. 

제로보드 XE.. 아직 나는 제로보드 XE라고 부르고 있지만 정식 명칭은 Xpress Engine이다..
제로보드4 시절의 유져들이나 타보드 유져들은  XE를 못마땅하게 여기는 분들도 많으나 내 생각으론 사실 전세계 어디를 내놔도 XE만한 PHP 고급 웹페이지 저작 솔루션만한건 없다고 생각한다.

단순히 게시판뿐만 아니라 쇼핑몰을 구현하는 XESHOP, 트위터기능, 블로그기능, 다국어기능등이 훌륭하게 기능하고 있고, 또한 위젯의 붙이기나 최근글 가져오기, 갤러리, 포럼, 웹진등의 구현등이 단순히 두세번 클릭에 이루어진다니 이보다 더 좋은 웹페이지 저작 솔루션은 없다고 본다.

솔직히 PHP코드나 CSS스타일을 아무것도 모르는 초보자들도 XE사이트에서 제공되는 몇개의 다운로드만으로 훌륭한 웹사이트를 금방 구현할 수 있다.

다시금 훌륭한 점은 XE의 레이아웃과 모듈이다. XE안에서 레이아웃을 작성하고 등록하고 나면 그 사이트 안에서는 언제든지 레이아웃을 불러들여와 쓸수 있다. 또한 레이아웃은 또다시 타 사이트를 제작할때 똑같이 불러들여와 쓸수 있는 장점이 있다. 

또한 모듈... 여러 개발자들이 개발하는 XE용 유틸리티나 저작도구들을 모듈디렉토리아래에 설치만 하면, 금방 XE안에서 모듈로서 작동한다. 확장성과 개방성은 단연 세계 탑이다.

그러나 이러한 XE에서도 단점이 여럿 존재한다.

레이아웃의 사용은 일부 사용자들에게 자신만의 웹사이트 디자인을 제한을 거는듯한 느낌을 준다. 이 문제는 약간의 사고의 변환만으로 쉽게 해결할수 있다. 

동적인 레이아웃을 개발하여 사용할수도 있고 정적인 메뉴를 가지는 레이아웃을 타 보드처럼 작성해서 사용하는 방법도 있다. 결국엔 나중에 보면 아무런 제약이 없다.

또한 가장 안타까웠던것은 확장변수의 사용이었다.

확장변수라함은 XE에서 제공되는 폼만들기 기능이다.

견적폼등을 만들떄 HTML코드와 자바스크립트를 써가면서 많은 시간을 할애한다. 그렇게 만든 견적폼들은 메일함수를 통해서 관리자의 메일에 보내지는 정도로 끝난다. (대개의 우리나라 중소 사이트 제작자들은 이 방법을 사용하고 권유한다.)

메일을 쓰는것도 나쁘지 않으나, XE를 사용하면 자체 데이타베이스에 저장되고 후에 데이타베이스 기능으로서 훌륭히 작업할수 있다..

하지만 제공되는 XE의 확장변수는 완벽한 기능을 제공하지만, 장난치는듯한 느낌을 줄정도로 모양새가 안이쁘다.


각 th마다 세로크기가 틀려져 중구난방처럼 보인다던지....
한줄 입력값은 가로크기의 조절이 없는것...

색지정이 없어 단조로워 보인다든지... 일부러 둘러싸는 border를 주지 않았으면 허전하면서도 오와 열이 안맞는 인상의 폼이 되었을것이다.

XE의 확장변수 기능은 매우 훌륭하다. 하지만, 돈을 주고 사이트를 구입하는 사람들에게 기술적인 우의를 설명하는것보다도.. 그들의 눈에는 오와 열이 정리되고 보다 그럴싸한 색으로 백그라운드 칼라를 준 폼형식을 원한다..

그래서 이번 사이트 제작에선 확장변수를 구성하는 확장변수용의 스타일들을 원본 파일에서 수정을 하였다.

   
보드의 solid 처리를 dotted로 주어 텍스트보다 라인이 강조되는듯한 느낌을 지웠고..th의 크기를 40px로 주어 텍스트가 늘어나도 표의 세로크기가 변하지 않게 만들어주었다. 타이틀의 배경색깔을 변경하고 필수항목의 *표시는 빨간색으로 처리토록 하였다.

또한 게시글 작성도 보드를 dotted로 주어 보다 눈이 편하게 약하게 디스플레이 되도록 하였고...

중간 중간 푸른색의 도움말을 올려서 툴을 이용하지 않고 직접 작성한것 같은 느낌을 주도록 하였다. 물론 한줄 입력칸도 수정을 해서 미련하게 넓어보이는것을 알맞은 크기로 변경시켰다.

하지만 이렇게 만들려면 원본소스를 수정을 가해야 한다. 수정을 가하고 나면 다른 XE용 게시판에서 동일한 현상이 일어나므로 약간의 주의가 필요하다.

xe는 최근에 일반게시판과 확장된 bodex를 동시에 제공한다.
그러므로 bodex의 스킨중 하나를 수정토록 했고.. bodex > xe_default스킨의 write_form.html과 write.css,common.css에 수정을 가했다.

CSS를 조금만 아는 사람은 쉽게 수정할 수 있다.

.bodexWrite .extraVarsList { width:98%;border-top:1px solid; border-bottom:none; margin:10px 0 0 0; }
.bodexWrite .extraVarsList th { font-weight:normal; text-align:left; padding:4px 0 4px 10px; border-bottom:1px dotted; border-right:1px dotted; height: 60px; background-color: #f2f2f2; border-left:1px dotted;}
.bodexWrite .extraVarsList td {border-bottom:1px dotted; padding:4px 0 4px 10px; border-right:1px dotted; }

write.css의 이 부분을 수정하면 확장변수용 표의 모습을 수정할수 있게 된다..배경색이라든가... 폰트라든가.. 심지어는 배경그림도 넣을수 있게 되니 좀 더 자유로운 모습의 폼이 될수 있다..

.extraVarsList tr td .text { margin-right:10px; width:30%;  }
.extraVarsList tr td .email_address { margin-right:10px; width:200px;  }
.extraVarsList tr td .homepage { margin-right:10px; width:300px; }
.extraVarsList tr td .tel {margin-right:10px; width:40px; margin-right:10px; }
.extraVarsList tr td .textarea { margin-right:10px; width:90%; height:80px; font-size:12px; }
.extraVarsList tr td ul { margin:0; padding:0; list-style:none; }
.extraVarsList tr td ul li { display:inline-block; margin-right:10px; }
.extraVarsList tr td ul li input[type="text"] { margin-right:5px; vertical-align:middle;}
.extraVarsList tr td .date { margin-right:10px; width:100px;  }
.extraVarsList tr td .address { margin-right:10px; width:300px;  }

이 부분을 수정하면..입력칸이나 입력칸의 색등을 제어할수 있다...


또한 폼의 윗부분 위와 같이 간략하게 바꾸어 버렸다. 이것은 write_form.html을 약간 수정하면 고칠수 있다...
다른 부분.. 본문글이 들어가는 곳을 수정하거나 파일첨부란을 수정하고 싶은면 module > editor > skin > 아무스킨 > editor.html을 수정하면 된다.. 

하지만 이럴 경우 다른 보드에도 영향을 미치니... 게시판 속성 설정에서 추가설정에서 그냥 깨끗하게 처리하는 정도로 끝내버리도록 하자....

이번엔 홈페이지에 폼을 작성할시 방문자에 의해 폼을 추가할수 있는 기능을 포스팅하고자 합니다.

붓글씨체를 만들기 위해서 가감히 일러스트를 등지고.. 페인터11을 다운.. 트라이얼 버젼을 쓰기로 하였다..

한달 쓰고 포맷작전으로 나가서 굳히 크랙에 목매달지 않을련다..

그런데 이거이.. 한글윈도우와는 유니코드상에 문제가 있어서 오류가 발생한다..

그 문제는 이것으로 해결할수 있다..

페
인터 실행파일을 가감히 어플로케일을 통해서 영어윈도우로 인식하게 해서 사용하면 된다..

설치는 그다지 어렵지 않으니.. 어렸을적 일본야동 게임이 도움이 되었다..ㅋㅋ

현재 내가 쓰고 있는 델노트북 델 인스피리온 6400 캐나디언 제품..나에게는 정말로 많은 기회를 준 컴퓨터...ㅋ
아직도 쓰는데 있어서는 별 불편함이 없어서 쓰고 있답니다...

모든 드라이버를 정리해서 올려놔야죠..아! XP전용 드라이버들입니다.

Adobe Creative Suite 5 Master Collection

저는 웹퍼블리싱을 위해서 클라이언트 환경에서는 CS3 + Editplus + putty + filezilla 를 대개 주 업무로 이용합니다.

맨처음 웹개발 환경을 만났을때는 고작해봤자 윈도우즈에서 기본적으로 제공하는 메모장과  윈도우즈에서 기본적으로 제공하는 ftp shell을 이용했던 적이 한참전이었던거 같네요...

지금은 통합적으로 Adobe사에서 웹디자인, 웹퍼블리싱 툴을 제공하고, 드림위버도 자체 ftp기능을 가지고 있네요..( 여러 툴들이 ftp를 제공하지만.. 파일질라 클라이언트 만한 ftp 클라이언트는 개인적으로 없다고 생각되어지네요. 알ftp의 경우 포트번호 21번이 아닌경우 서버환경에 따라 접속이 원할하지 않는 경우가 많은데 파일질라의 경우에는 거의 그런적이 없네요..)

포토샵의 경우 레이어와 블러쉬.. 미리보기 기능등에 대한 대폭적인 기술혁신이 CS5를 통하여 선보이고 있다고 하네요..저의 경우에는 웹디자이너 아닌 관계로 포토샵의 기본적인 툴개념밖에 이해하고 있지 못해서 포토샵이나 일러스에 관해 포스팅하는것은 어불성설이라고 보여지는데...

드림위버에 관해서는 CS5버젼에 대한 포스팅을 한번 해보려고 하고 있습니다..

CS5에서 역점적으로 중시한 툴은.. 웹표준에 관한 각 브라우져들간에 테스트입니다.
CS4는 써보지도 않아서 잘 모르겠지만 CS5에서는 Onion Skin View 기능으로 각 브라우져들간의 차이를 보여주는 기능이 들어가 있다고 하는군요..

저의 경우에는 IE8을 기준으로 작성하고 IETEST라는 프로그램(ie6,7테스트)과 파이어폭스,크롬으로 각 브라우져간에 방탄웹기능을 마크하고 있는데 이번 드림위버는 각 브라우져간에 생길수 있는 차이와 그에 대한 해결을 해줄수 있다고 하니 설치부터 기대가 큽니다. 

다음 포스팅은 드림위버CS5 버젼에 대한 총체적인 느낌을 포스팅해보겠습니다..

여러 스크롤 메뉴의 소스를 받아다가 실험해봤지만..
마지막으로 낙찰된거이.. 이 소스이다..

흠.. ie전 버젼에서도 ff,chrome에서도 무리없이 잘돌아가고..
테이블로 구성되어 있어서 다른 구성요소들과도 문제점도 없다..



 <script language=javascript>
<!--
var isDOM = (document.getElementById ? true : false);
var isIE4 = ((document.all && !isDOM) ? true : false);
var isNS4 = (document.layers ? true : false);
var isNS = navigator.appName == "Netscape";

function getRef(id) {
if (isDOM) return document.getElementById(id);
if (isIE4) return document.all[id];
if (isNS4) return document.layers[id];
}

function getSty(id) {
x = getRef(id);
return (isNS4 ? getRef(id) : getRef(id).style);
}

var speed = 5; //작을 수록 빠름..
var fixWidth = 949; //[수정해야함]고정 픽셀

function moveRightEdge() {
var yMenuFrom, yMenuTo, yOffset;
var loopTime = 10; //1000 = 1초, 100 = 0.1초

if (isNS4) {
 yMenuFrom = _floater.top-220; //[수정해야함]
 yMenuTo = windows.pageYOffset; // 위쪽 위치
 var pWidth = window.innerHeight; //브라우져 안쪽 가로 길이
} else if (isDOM) {
 yMenuFrom = parseInt (_floater.style.top, 10)-220;//[수정해야함]
 yMenuTo = (isNS ? window.pageYOffset : ((document.documentElement.scrollTop) ? document.documentElement.scrollTop:document.body.scrollTop)); // 위쪽 위치
 var pWidth = (isNS ? window.innerWidth -14 : document.body.clientWidth);; //브라우져 안쪽 가로 길이
}

//if( pWidth > fixWidth ) _floater.style.left = (pWidth / 2 ) + ( fixWidth / 2)
_floater.style.left = fixWidth + "px";
//alert(document.documentElement.scrollTop);
if (yMenuFrom != yMenuTo) {
yOffset = Math.ceil(Math.abs(yMenuTo - yMenuFrom) / speed);
if (yMenuTo < yMenuFrom)
yOffset = -yOffset;
if (isNS4)
_floater.top += yOffset;
else if (isDOM)
_floater.style.top = parseInt (_floater.style.top, 10) + yOffset;
}
//alert(_floater.style.top);
setTimeout ("moveRightEdge()", loopTime);
}

document.write('<div id="floater" style="left: 949px; top:220px; width:208px; height:310px; z-index:1; visibility: visible; position: absolute"> ');
document.write('<table width="208" border="0" cellpadding="0" cellspacing="0">');
document.write('<tr><td><a href="[링크할곳]booking"><img src="[링크할곳]page/images/scroll1.jpg" width="208" height="62" border="0"/></a></td></tr>');
document.write('<tr><td><a href="[링크할곳]hune"><img src="[링크할곳]page/images/scroll2.jpg"  width="208" height="52"border="0" /></a></td></tr>');
document.write('<tr><td><img src="[링크할곳]page/images/scroll3.jpg" width="208" height="81" /></td></tr>');
document.write('<tr><td><img src="[링크할곳]page/images/scroll5.jpg" width="208" height="54" /><td></tr>');
document.write('<tr><td background="images/scroll4.jpg" height="55px">&nbsp;<td></tr>');
document.write('</table>');
document.write('</div>');//[수정해야함]

//div 밑에 위치해야 한다.
//오른쪽 스크롤 스크립트 시작

if (isNS4) {
 var _floater = document["floater"];
 _floater.top = top.pageYOffset;
 _floater.visibility = "visible";
 moveRightEdge();
} else if (isDOM) {
 var _floater = getRef('floater');
 _floater.style.top = (isNS ? window.pageYOffset : document.body.scrollTop);// + 100;
 _floater.style.visibility = "visible";
 moveRightEdge();
}

//-->
</script>

 <현재 잘 돌아가네...>

 

디자이너가 포샵이나 일러스트로 만들어준 둥근모서리 박스...
디자이너는 너무 쉽게 만들어주지만.. 그것을 코딩화하는 웹퍼블리셔에게는 그리 쉬운 작업이 아닙니다.

아니 어쩌면 아주 짜증나는 일이기도 합니다. 그것을 구현 못하면 그것도 못하냐 하는 하대투의 눈초리가 더 주먹을 불끈쥐게 만들죠.. 

왜냐하면 박스라는것은 내용이 늘어나거나 박스가 커지면 그에 맞게끔 박스도 변형이 되어야 하니깐 말이죠.

그런데 의도한대로 웹으로 둥근 박스를 만들었다 할지라도..

표준 브라우져에서는 잘보이던 둥근박스가 한심한 브라우져인 ie6에서는 깨지고 하는 현상이 많이 발생하지요..

내 브라우져에서는 잘보이던 박스가 납품처 사장의 브라우져에서 깨져버린다면, 아니.. 납품처 사장에게는 어캐 어캐해서 넘어갔다고 쳐도.. 대학교 다니는 사장의 아들의 브라우져에서 깨져버린다면.. 참으로 난감한 일이 발생하고 말죠..

자 그럼.. 이제 부터 쓰는 포스팅은.. 어떤 웹브라우져에서도.. 어떤 폰트가 얼마큼 커져도  박스가 깨지지 않게 하는 실무에서 많이 쓰이는 코딩을 소개합니다.

1. 우선적으로 박스 이미지를 준비해야 겠죠...

 이미지 없이 둥근 박스를 코드로만 만든다고들 하는데 현재 최신 버젼의 파폭과 사파리에서는 box-rounded 속성이 적용되고 있습니다. 하지만,ie계열에서 안되면 의미가 없는것이 되겠죠...특히 ie6에서 안되면 상용 웹페이지에서는 의미가 없겠죠.... 그리고 코드로만 둥근 웹박스를 만든다는것은 어디까지나 개인의 만족을 위해서는 해볼만한 가치입니다만.. CSS라는것이 코드의 간결화를 위해 태어난것인데... 목적을 상실한다면 차라리 table로서 둥근박스를 만드는것보다 못한 일이 되겠죠.. 그래서 이미지를 이용해서 박스를 만들어보도록 하겠습니다. 


포토샵의 박스툴의 rounded rectancle tool을 이용해서 둥근박스를 만듭니다.
(만드는게 구찮으시면 일러스트에서 둥근박스를 만들어 가져오면 구찮은 작업을 안해도 됩니다. 포샵있는 컴터에 대개는 일러스트는 같이 있으니깐요...)


위와 같이 둥근 박스를 이미지로 만들었습니다.

포샵은 잠깐 손을 놓구 에디터로 와서 둥근박스안에 들어갈 내용을 임시적으로 만듭니다.

<div id="box"> <p class="contents">방탄 둥근 박스 만들기</p> <p class="contents2">from AKAS</p> </div>

요따구로 우선 엘리먼트들을 만듭니다.

이제 박스에 맞게끔 이미지를 잘라야 합니다.



우선 아래와 같이 잘라줍니다.

자른 이미지가 요따구로 생길겁니다.

left.gif

right.gif

이제 CSS스타일을 적용해봅시다.. 우선 아래와 같이 적용해봅시다.

#box {  float:left; background:url(right.gif) top right no-repeat; }
.contents { background: url(left.gif) top left no-repeat; font-size: 30px;}

실험을 위한것이니 폰트사이즈도 30정도로 줘보고 박스안의 컨텐츠 크기에 따라 박스너비가 커지게 하기 위해 float: left를 줍니다.
그럼 다음으로 contents2에 대해서 속성을 부여해봅시다.

.contents2 { background:url(left.gif) bottom left no-repeat; }



자 이제 오른쪽 아래를 처리해야 겠군요..
앞의 div 코드를 변형해봅니다.

<body> <div id="box"> <p class="contents">방탄 둥근 박스 만들기</p> <p class="contents2"><akas>from AKAS</akas></p> </div>

속성을 주기위해 <akas></akas>식으로 양옆을 만들어줍니다.
그리고 속성을 줘보죠..

.contents2 akas { background:url(right.gif) bottom right no-repeat; }

이러면 어떻게 보일까요?



이제 패딩과 마진을 줘서.. 각 위치를 잡아줘야 합니다.

content엘리먼트의 여백을 0으로 줍니다.
그러면 왼쪽상단 모서리가 올라가게 됩니다.


콘텐츠와 박스가 붙어서는 아무런 일도 못하게 되죠..
content 엘리먼트의 패딩값을 적절수준으로 줍니다..
단 bottom의 값은 0으로 주어야 합니다. bottom을 0으로 주지않으면 content2엘리먼트와 20간격이 생겨져 버리겠지요..padding 20, 20, 0, 20

.contents { margin: 0px; padding: 20px; padding-bottom: 0px;  background: url(left.gif) top left no-repeat; font-size: 30px; }

content2도 content엘리먼트와 각격을 주지 않기 위해 여백을 0으로 주고 엘리먼트가 박스안으로 들어와야 하니 왼쪽 패딩만 위와 같이 20패딩을 줍니다. padding 0 , 0 , 0, 20
.contents2 { margin: 0px;  background:url(left.gif) bottom left no-repeat; padding: 0px; padding-left:20px;  }

박스안으로 콘텐츠들이 들어오게 되죠...
자 이제 박스를 닫아주기 위해 만든  합니다.  추가해준 <akas></akas>엘리먼트에 속성을 부여해야 겠네요..


contents2엘리먼트를 블록화해보죠..
display: block을 줍니다.. 이 속성은 해당 엘리먼트가 블럭화되어 보여집니다.. 간단히 이야기하면 html코드에서 div선언을 하지않아도 div처럼 블럭화 되어 보여준다는  뜻입니다.

블럭화 되면서 백그라운드 이미지가 표시되면서 박스가 완성되어 집니다.

자 이제 content2도 오른쪽 아래쪽 여백을 주어야 겠죠...padding: 0, 20px, 20px, 0
.contents2 akas { display:block; background:url(right.gif) bottom right no-repeat; padding: 0px; padding-right: 20px; padding-bottom: 20px;   }




완성된 둥근 박스 테두리입니다.. 완성 소스이고요..
#box {  float:left; background:url(right.gif) top right no-repeat;}
.contents { margin: 0px; padding: 20px; padding-bottom: 0px;  background: url(left.gif) top left no-repeat; font-size: 30px; }
.contents2 { margin: 0px;  background:url(left.gif) bottom left no-repeat; padding: 0px; padding-left:20px;  }
.contents2 akas { display:block; background:url(right.gif) bottom right no-repeat; padding: 0px; padding-right: 20px; padding-bottom: 20px;   }

물론 이건 누군가 개발해논것을 가져다 쓴거구요.. 이런 고차원적인 생각은 전 할수 없죠...
다만.. 원래 베껴쓰는것도 나쁜일이 아니죠... 기법을 배워가는건데요..

하지만 이 소스를 실무에 적용하려 하니 문제가 좀 있군요..

원본 이미지 그림보다도 div이 커져버리면..방탄웹이 되지못하는 그런 상황이 옵니다..즉 그럼 아무 의미없는거 아닌가..ㅋㅋㅋ

어쨋든 다음엔 ie6의 버그에 대해 함... 포스팅하겠습니다..

1. 새로운 문서를 열고 정중앙에 일직선의 패스를 상하로 준다.

2. 레이어를 하나더 추가하고 단면을 패스로 그려준다.

3. 유리병에 적당한 색깔 (#eff6fc)을 외곽선으로 주고(바탕색은 없음으로..)
Effect-3D-Revolve(효과-3D-축중심 회전)메뉴를 선택한다...



4. 옵션을 보고 회전축을 잘 조종해서 만들려고 하는 각도의 3차원 이미지를 만들고...
Surface-shading Color를 이용하여 조명을 주어 어두운 부분과 밝은부분을 만들자...

(프리뷰 명령으로 랜더링후의 모습을 볼수있다..단 컴퓨터가 어느정도 속도가 나와야 한다.)

5. 위와 같은 방법으로 일러스트에서도 간단한 3D입체 백터이미지를 만들수 있음을 ...

젠장..ㅋ 왜 유리잔이 아니라 보리차 잔이 되어버린겨..ㅋㅋ

1. 배경으로 쓰일 그림을 불러온다.
2. 패스툴의 Freeform Pen Tool을 선택한다.


3. 메뉴아래 빨간부분으로 표시된 패스옵션 아이콘을 클릭하고...
4. 임의대로 원형의 패스를 대충 그린다.


5. 타이프툴(Type Tool)을 선택하고 패스에 마우스를 가져다 대면 펜과 X표시된 곳에 문자를 쓰면 된다.


6. 임의의 폰트로 알아서 글을 쓴다음...


7. 레이어 Blending Option의 Stroke로 효과를 한번 내본다..
8. 패스툴이 걸리적 거리면 패스팔레트에서 하단 아무 여백이나 클릭한다..

9. 자신의 의도한 폰트와 크기를 주고...완성시킨다..

제로보드 XE를 쓰다보면..
제로보드4가 아쉬울때가 있다..

포토샵으로 레이아웃을 만들고 자유롭게 최근글목록이나 갤러리를 가져다 쓰고 싶곤하지만...
XE에서는 레이아웃을 강요하는 느낌이 있다.. 사실상..이것은 유져들의 무지땜에 생긴일...

제로보드4처럼 사용하기 위해서는..단순히 레이아웃->편집->에서

모두 다 삭제후..
<!-- 컨텐츠 시작 -->
            {$content}

만 넣어주면 자유롭게 쓸수 있게 된다..
물론 드림위버나 나모로 작업한 홈페이지도 제로보드 XE의 외부페이지를 이용하면 자유롭게 쓸수 있다..

더욱이 이 외부페이지에는 제로보드가 제공하는 각종 위젯을 자유롭게 붙일수 있어서...
더욱 자유로운 홈페이지 구성을 할수 있다..

나의 경우에는 솔직히 요새의 경우 제로보드가 없으면.. 홈페이지 작업이 구찮을 정도로 제로보드 XE에 많이 의존하고 있다..

제로보드 XE가 자유도가 떨어진다는 그런 헛소리랑은 이제 집어치우자..ㅋ

제로보드XE에서 아무것도 없는 레이아웃 적용상태이다

모르는 사람들이 많아서.. 포스팅한번 해봅니다.

보통 이 사실은 .. PC수리하시는 분들이 많이 들 안갈켜주는것인데요.. 그들 밥벌이라..
파워가 나갔는데 애꿎은 부품갈라고 하시는 분들이 많아서.. 

간단히 파워가 나갔는지 안나갔는지만  이상유무를 체크하는것이 되겠습니다.


컴퓨터를 뜯으면 전원을 공급하는 전원장치와 컴퓨터 보드를 연결하는 메인 전원줄을 봅니다.
신형이든 구형이든 방법은 같습니다..
위의 그림에서 빨간색으로 표시된 부분..즉 녹색선과 그 옆의 검은선을 이었을경우에는 자동으로 팬이 돌아가게 됩니다.

클립이나 쓰다 버린 전기선등으로 4번째 푸른부분과 검은 부분을 연결하여 보세요..파워서플라이의 팬이 돌아가면 전원공급장치는 이상이 없다는 뜻이 됩니다.

만약 AS기사가 보드나 램의 교체를 요구하는 경우..위의 방법을 이용해서 파워의 이상유무를 체크하시면..
파워에 이상이 있는데.. 애꿎은 CPU,램,비디오카드등의 교체를 요구하면..
바로.. 뭐라 하심 됩니다..

* 주의 - 클립등으로 연결시에는 클립에 전기가 통하게 되니 몸에 이상이 올수 있으므로 반드시 전기용 장갑이나 연결후에 전원코드를 넣는 방법을 택하시기 바랍니다.  

XE와 같은 통합 솔루션으로 홈페이지를 작성하는 작업을 할때, 가장 신경쓰이는 부분이 외부페이지작업인듯 하다. 물론 XE도 페이지 메뉴를 통하여 위젯을 삽입하거나 모듈을 읽어오거나 직접 작성할수 있지만 드림위버로 제작하는것보다  제약이 많이 따르기 때문이다.

특히 form이나 회원의 로그인정보가 필요한 외부페이지에 대하여는 실로 난감함 문제가 아닐수 없다.

이 문제를 해결 방법은 ...

<?  define('__ZBXE__', true);  require_once('config/config.inc.php');  $oContext = &Context::getInstance();  $oContext->init();      $logged_info = Context::get('logged_info');  $id = $logged_info->user_id;      if($logged_info)     {   echo("    로그인 하셨네요.^^    <br>$id 회원님이시네요.   ");  }  else  {   echo("    로그인 해주셔야죠.^^      ");  } ?>

가장 중요한 부분은 노란색부분으로 표시된 부분이다. xe가 설치된 경로 바로아래 config디렉토리를 해당소스가 들어가는 php파일의 상대경로나 절대경로로 표시해주면 된다. 어려우면 /home/test/public_html/xe/config 이런식으로 절대경로로 표시하자..
그 다음으로 눈여겨 봐야할것이..

노가다를 통해서 로그인정보를 작성했다. XE안에서 함수부분으로 정의되어 있겠지만.. 소스를 찾는것보다 작성하는게 빠르다고 생각했다.

XE는 식별자(이후 xe로 표시)_member_group 테이블에 그룹 권한을 정의한다. 보통 관리자는 group_srl : 1 준회원 : 2 정회원 :3 으로 디폴트 정의되어있다..

xe_member테이블에는 회원 개개인의 member_srl을 갖는다. 위 소스에서 id로 xe_member테이블을 검색하여 해당 아이디의 member_srl을 찾고 xe_member_group_member테이블에서 해당 member_srl을 찾은값으로 group_srl을 가지고온다..

그러면 id와 그룹권한을 가지고 php코드를 자유롭게 작성할수 있다. 물론 xe_member 테이블에는 그외 모든 사용자정보가 들어있으니 언제든 검색해서 불러오면 되고 세션을 자유롭게 XE와 공유할수 있다. 

또 다른 방법으로는 $logged_info변수에는 회원정보에 들어가는 모든 데이타가 저장된다.
echo $logged_info->nick_name."; 이런식으로 변수명을 정해주면 로그인된 회원의 닉네임이 출력된다.
그와 같은 방법으로 로그인정보를 이용하여 외부페이지에 적용하면 된다.

     : -----0 [member_srl]
     : -----1 [user_id]
     : -----2 [email_address]
     : -----3 [email_id]
     : -----4 [email_host]
     : -----5 [user_name]
     : -----6 [nick_name]
     : -----7 [homepage]
     : -----8 [blog]
     : -----9 [birthday]
     : -----10 [allow_mailing]
     : -----11 [allow_message]
     : -----12 [denied]
     : -----13 [limit_date]
     : -----14 [regdate]
     : -----15 [last_login]
     : -----16 [is_admin]
     : -----17 [description]
     : -----18 [profile_image]
     : -----19 [image_name]
     : -----20 [image_mark]
     : -----21 [group_list]
     : -----22 [is_openid]



 

웹개발자들을 위한 툴..

사이트의 CSS정보나 디비젼등의 정보를 알수있는 웹개발자들의 필수품


다운로드 : https://addons.mozilla.org/ko/firefox/search?q=web+developer&cat=all&advancedsearch=1&as=1&appid=1&lver=any&atype=0&pp=20&pid=5&sort=&lup=

에서 얻을수 있다. 파이어폭스에서 링크로 이동하여 다운을 받으면 다운즉시 설치에 들어간다.


파이어폭스 웹 디벨로퍼를 이용하여 작업하고 있다.

티스토리 초대장 5장 발부합니다.
많지는 않지만 내 블로그에 오셔서 신청하시는 분만 발부해드립니다.
수고들 하세요..

KISA정책인지 white domain이니  하는 바람에 개인서버 운영자는 자신의 도메인을 이용하여 sendmail을 운영하는것이 사실 헛수고가 되었다..

고정ip의 경우 KISA에서 수고스럽게 white ip로 변환시켜주지만, 돈없는 유동ip이용자는 절대 변환시켜주지 않는다. 대안은 무엇이냐? 바로 Gmail을 이용해서 imap을 쓰는것이다..

DNS서버를 이용하지 않고 도메인 등록사의 DNS서버를 이용한다면, 도메인 등록사에 gmail이용 부가서비스가 있으면, 다행이나 없다면 아래와 같이 MX항목과 CNAME을 바꿔달라고 요청해야 한다.

@ IN MX 30 ASPMX5.GOOGLEMAIL.COM.
@ IN MX 30 ASPMX4.GOOGLEMAIL.COM.
@ IN MX 30 ASPMX3.GOOGLEMAIL.COM.
@ IN MX 30 ASPMX2.GOOGLEMAIL.COM.
@ IN MX 20 ALT2.ASPMX.L.GOOGLE.COM.
@ IN MX 20 ALT1.ASPMX.L.GOOGLE.COM.
@ IN MX 10 ASPMX.L.GOOGLE.COM.
@ IN MX 10 aspmx.l.google.com.
mail IN CNAME ghs.google.com.
calendar IN CNAME ghs.google.com.
sites IN CNAME ghs.google.com.
docs IN CNAME ghs.google.com.

도레지의 경우 도메인 부가서비스가 매우 맘에 드는 기업이다..
하지만 가비아의 경우 GMAIL보다는 MS의 Live mail을 밀고있다.. Gmail을 쓰기위해서는 운영자에게 따로 메일을 보내거나 고객상담란에서 따로히 요청해야 한다...

MS Live Mail의 경우 POP3는 유료이다..

http://www.google.com/apps/intl/ko/business/index.html로 접속해서 구글메일에 자신의 도메인용 메일을 신청한다. 신청후 이메일을 활성화 시켜야 한다. (가입할때 표준형으로 가입하여야 무료메일을 쓸수있다. 고급형을 쓸경우는 50$을 지불하여야 하고, 무료형은 50개의 계정만 생성할수 있다. 50개의 계정이라면 거의 넉넉한 수준이라고 할수있다..규모가 있는 기업들은 50달러를 지불하면 되니깐..)

활성화되면 위와 같이 운영중이라는 메세지가 뜨면 OK...

Outlook이나 Exchange Mail에서의 세팅은 다음과 같다.
서버유형

pop3가 아닌 imap이다.

로그인정보에는 xxx@mydomain.com 이런식으로 구글에서 해준것으로 해주어야 한다.
outlook에서는 수고스럽게 smtp로그온 정보도 넣어주어야 하고..


보안인증 SPA를 이용하면 안된다...

이제 ~ 지메일을 이용하여 자신의 도메인을 가지고 메일구성을 할수있다..
sendmail이여..~ 아쉽다.. 이제 php용 mail함수를 이용하지 못한다니.. 아쉽기만 하다.. 웬놈의 KISA 정책..그렇다고 스팸이 사라지나.. 머리들 하고는.. 

 

IE8이 갑자기 맛이 가는 바람에, 6으로 다운그레이드 했다. 다운그레이드 후에, 컴퓨터가 요동치는 혼란이 오더니, 속도감이 극감하기 시작했다. 

그래서 싹 포맷하고 다시 윈도우를 설치하고...

여러 브라우져들을 설치했다.

나는 한마디로 아무 브라우져나 다 쓴다..

http를 쓸때면 닥치는 대로 아무 브라우져나 열고 쓰기때문에.. 나름대로의 특징이 있는듯 하다..

그런데 왜 같은 기능의 여러 브라우져들을 위와 같이 설치하고 쓸까? 그것은 모든 브라우져를 만드는 그룹이나 회사들이 그들 나름대로 인터넷 환경을 주도하려는 욕심에서 기인한다.

가히 20세기 후반부와 21세기는 정보혁명 속에서 살고 있다고 해도 과언이 아니다. 그동안 침묵했던 시민들은 인터넷을 통하여 시민의 정치 참여가 본격화 되어 막강한 정치적 힘을 발휘하고 있으며, 각 문화, 사회, 단체,지식,산업간의 정보는 모두 인터넷으로 총망라되고 있는 실정이다. 집에서 PC만 키고 브라우져만 열면, 세상의 모든 지식,뉴스등을 접할수 있다. 또한 아시아의 사람들이 남미의 사람들과도 실시간으로 추가적 비용없이 대화하거나 정보를 바로 바로 나눌수 있다. 

즉 커뮤니케이션에 있어 시간과 물리적인 제약을 없애준것이, 바로 HTTP로 대변되는 인터넷의 핵심이다. 또한 굳이 강의실에서 강의를 듣지않아도 강의의 내용을 습득할수 있으며, 도서관에 가서 책을 찾지 않아도, 그에 상응하는 정보를 지식의 총망라인 인터넷안에서 얻을수 있다. 은행에 가지 않아도 현금을 이체하거나, 확인할수 있으며,쇼핑센타에 가지 않아도, 쇼핑물을 구입할수 있으며, 구직시장에 나가지 않아도 구직정보를 얻을수 있다.  

이런 혁명의 모든 행위의 첫 관문이 인터넷 브라우져이다. 인터넷 브라우져를 독점하는 자가, 곧 가까운 미래에서의 정보문화의 혁명을 주도할수 있기 때문이다.

그러므로, 관련 브라우져 제작체들은 사활을 걸고, 브라우져 전쟁에 돌입하고 있다. 아마도, 국가간의 전쟁이나 고대 십자군운동만큼의 인간문명의 전환점이 될것은 확신한다.

그런데~ 왜 인터넷 브라우져들을 많이 설치해놓고 사용하느냐?

그것은 바로 W3C라는 단체를 알면 쉽게 이해될수 있다.

W3C는 World Wide Web Consortium의 줄임말로 월드와이드 웹 협회라는 말이다. 이, 단체는 왜 만들어졌고, 왜 있는것인가 하면.. 세계에서 쓰이는 월드와이드웹 즉 http와 관련된 국제 표준을 정하는곳이다.

즉 http와 관련된 제반사항들의 사유화를 막고, 나름대로 국제적으로 협의하여 표준코드를 만들자는 협회이다. 이단체에는 여러 국제기관들과 업체,그룹들이 회원으로 등록되어 있으며, 이곳의 역활은 http와 관련된 컴퓨터언어와 코드등을 표준화하여 공고하여  일개단체나 회사에 의해 독점적으로 진행될수 있는 웹의 사유화를 막고자 만들어 진것이다. (일개단체나 회사라면 어디일까? 딱 떠오르곳이 있기는 하다.)

1. 파이어폭스 & 네스케이프 (Firefox & Netscape Navigator)

안정성 : 10/10  속도 : 9 /10  한글호환 : 10/10  웹표준 : 10/10  개발자편의 12/10 인터페이스 : 8/10 확장성 10/10 

헐, 인천북구도서관 노트북실... 인터넷속도 장난 아니네...

시설도 깨끗하고.. 조용히 앉아서 작업이나 해야겠네..


이젠 일부러 서울에 올라가서 작업하지 않아도 쾌적한 공용도서관에서 작업해야 겠다.. 집에서는 집중력이 다소.. 

우선 첫 예문을 통해서 CSS의 편리성을 한번 맛보자.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css" > * { margin:0; padding: 0; } #mybox { margin: 10px; padding: 5px; width: 700px; background: #FFCC00; } #mybox .tel { margin: 10px; padding: 5px; width: 650px; background: #FF3300; color:#FFFFFF; }  </style> </HEAD> <BODY> <div id="mybox">いったい朝鮮のいつの時代に、たとえばアチキといったふうな朝鮮固有の名前がなくなり、うまれもつかぬ漢民族の姓名になってしまったのであろう。 <p class="tel">どうやわ新羅（しらぎ）のころらしい。しかしこれほどの文化大革命がいつごろであったかが、朝鮮史をいくら読んでもよくわからない。通説では、六世紀のはじめごろの新羅の王室や貴族のあいだでは金姓、朴姓があったようだが、同時に固有朝鮮名ももっていた。すべての人民が漢姓をもちいるようになったのは、新羅の最盛期以後に、おそらく政治的理由以外の――たとえば氏族の自然膨張といったふうな――社会的事情でそうなったのかもしれない。ともかくこの一事でもわかるように、上代朝鮮史というものはわかりにくい。</p> <div align="right">司馬遼太郎</div> </BODY> </HTML>

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </HEAD> <BODY> <table width="713" border="0" cellspacing="0" cellpadding="0">   <tr>     <td colspan="3" bgcolor="#FFCC00">いったい朝鮮のいつの時代に、たとえばアチキといったふうな朝鮮固有の名前がなくなり、うまれもつかぬ漢民族の姓名になってしまったのであろう。</td>    </tr>   <tr>     <td width="35" bgcolor="#FFCC00">&nbsp;</td>     <td width="638" bgcolor="#FF3300"><span class="tel style1">どうやわ新羅（しらぎ）のころらしい。しかしこれほどの文化大革命がいつごろであったかが、朝鮮史をいくら読んでもよくわからない。通説では、六世紀のはじめごろの新羅の王室や貴族のあいだでは金姓、朴姓があったようだが、同時に固有朝鮮名ももっていた。すべての人民が漢姓をもちいるようになったのは、新羅の最盛期以後に、おそらく政治的理由以外の――たとえば氏族の自然膨張といったふうな――社会的事情でそうなったのかもしれない。ともかくこの一事でもわかるように、上代朝鮮史というものはわかりにくい。</span></td>     <td width="40" bgcolor="#FFCC00">&nbsp;</td>   </tr>   <tr>     <td height="13" bgcolor="#FFCC00">&nbsp;</td>     <td colspan="2" bgcolor="#FFCC00"><div align="right">司馬遼太郎</div></td>    </tr> </table> </p> </BODY> </HTML> <p><

갑자기 만든거라.. 그림이 형편없다..ㅎㅎ

상단의 코드와 하단의 코드는 비슷한출력을 보여준다. (적색박스안이 검은색만 틀리고 다른 보여주는것은 상당히 비슷하다)

아래의 코드는 HTML코드을 이용해 Dreamweaver에서 작성한것이고 위의것은 에디트 플러스를 가지고 CSS코드로 만든것이다. 바깥박스의 색을 바꾸고 싶다면 위의 경우는

#mybox 의 background: #FFCC00;부분만 수정하면 된다.

하지만 아래의 경우 셀속성을 일일히 바꾸어주어야 한다. (물론 표속성으로 만들어주면 괜찮지만)

또한 지금 만든 이 그림을 이동하고 싶을때는? CSS코드는 x축과 y축을 px로 나타내주기만 하면 이동한다.(레이어와는 틀린 개념이다.) 하지만 테이블로 작성했을경우 이동하기 위해서는 다시 더 큰 표를 만들어주어야 한다.

웹을 만드는 사람이 포토샵으로 한장의 레이아웃을 만들었다고 치자..CSS와 보통의 HTML코드와 어느코드로 작업하는것이 쉬우며, 실현이 빠를까?

CSS코드로 만드는것이 대답이다. 위의 예제를 실행해보고, 아래의 코드가 쉽다는 사람은 좀 생각할 여유를 만들기 바랍니다.

이번장은 왜 CSS를 써야만 하는가에 대한 강좌였다. 다음 장은 선택자를 공부합니다.

(http://www.snowrice.com > moodle > Learn CSS에 기재됩니다.)

웹이 처음 만들어졌을때는 상당히 단순했다고 합니다. HTML문법 양식이 매우 단순한것이어서, 누구든 쉽게 HTML문법을 이용하여 문서를 작성했다고 합니다.

그러나, 인간의 욕구는 너무나도 큰것이어서, 계속적으로 웹의 변화를 요구했습니다. 처음 그림과 단순한 글만 올릴수 있던 HTML코드는 테이블,폰트,심지어는 멀티미디어까지 도입되며, 점차 시각적인 인간의 욕구의 목적으로 점점 한계성에 부딛치고 맙니다.

이에 HTML의 보조적인 역활을 할수있는 CSS코드가 W3C를 통해 이세상에 나오게 됩니다.각 브라우져사들은 W3C의 권고안을  받아들여, 브라우져에 CSS기능을 기능을 첨부시킵니다.

2009년 오늘날 CSS도 진화하여 CSS3에 이르게 되지만, 그간 CSS코드의 굴곡도 많았습니다. 애플과 모질라 MS사등의 CSS코드에 대한 해석이 각자 틀렸기 때문입니다.

각 브라우져사들은 각자 자기만의 CSS코드를 해석하여, 브라우져를 출시했으며, 결국엔 윈도우즈를 등에 업은 MS사의 승리로 끝났습니다.

MS윈도우의 explorer와 Macintosh의 safari의 레이아웃이 틀렸던점이 바로 CSS코드의 적용 차이때문입니다.

이 3사는 CSS3의 국제코드의 준수를 약속했고, 표준 CSS3에 입각한 새로운 버젼들을 내놓게 됩니다.

Explorer 7.0 , Safari 3.0 , Firefox 2.0이 약속한 국제 표준의 CSS3를 적용한 브라우져들이며, 이 브라우져들은 이제 국제표준 CSS코드 적용으로 이제는 약간의 차이만 보일뿐 매우 비슷합니다. 이는 , 곧 그간 MS편중의 브라우져시장 경쟁에 치열한 전쟁을 예고하고 있습니다. 브라우져를 잡는 기업이, 곧 인터넷을 잡는 기업이 될테고, 세계의 정보를 장악할테니깐요… 그만큼 CSS해석은 아주 중요한일입니다.

 

 

CSS가 적용된 문서(좌)와 CSS가 적용되지 않은 문서(우)

브라우져.

적어도 홈페이지를 만드는 사람들에게는 3가지의 브라우져는 반드시 필요합니다.

Apple사의 Safari 와 Mozilla사의 Firefox MS사의 Explorer입니다.

애플사는 맥킨토시와 OS/ X이라는 무서운 하드웨어와 흡사 종교와도 같은 맥킨토시 신봉자들이 상당히 많습니다. 또한 모질라사의 파이어폭스는 리눅스 배포판들의 기본 브라우져이며 또한 개발자들에게 없어서는 안될 CSS Code Viewer가 ADD on 프로그램으로 제공된다는 HTML문서를 만드는 사람들에게는 없어서는 안될 브라우져입니다.

MicroSoft의 익스플로러는 전세계의 70%이상이 이 브라우져를 이용하니, 어쩔수 없이 있어야 하는것이고요…

이번에 공개된 사파리4는 애플이 항상 그래왔던 것처럼 가히 혁명적인 사용자 인터페이스를 가지고 있습니다. 또한 서버와 클라이언트간의 응답기간이 매우 빠르며 신속합니다.

그래서 사파리로 웹서핑을 하고 파이어폭스로 HTML을 수정작성하고  익스플로러로 디자인레이아웃의 체크를 하는가 봅니다.

 

사파리의 즐겨찾기기능, 커다란 멀티시어터에 앉아 사이트를 고르는 느낌을 준다.

Learn CSS를 하기전의 준비물-

1. EditPlus 3.0 (에디터 프로그램의 대강자)

빠른 코드입력,빠른검색,각종 언어코드 컨버터 기능들.. vi에 버금가는 이루말할수 없이 좋은 윈도우용 에디터다.

2. Dreamweaver - Editplus를 많이 이용하나, 아무래도 웹문서 전용 에디터도 필요하다.

3 웹서버

윈도우즈의 Xampp나 인터넷이 연결된곳이라면 호스팅 업체도 좋다. 도서관같은데서 랩탑으로 조용히 CSS코드를 입력하실분들은 역시 APMsetup이 최고..

Zeroboard XE를 이용해서 개인사이트를 문을 열었습니다. 도메인은
www.snowrice.com 입니다.

시스템비용은 한푼도 안들어갔고요..
개인 유틸리티 저장소와 무들에 대한 강의를 시작하려고 합니다.

잘되어야 할텐데요..

 SYSTEM INFO

Linux localhost.localdomain 2.6.18-1.2798.fc6 #1 SMP Mon Oct 16 14:54:20 EDT 2006 i686 i686 i386 GNU/Linux

processor       : 0 vendor_id       : GenuineIntel cpu family      : 15 model           : 2 model name      : Intel(R) Pentium(R) 4 CPU 2.00GHz stepping        : 4 cpu MHz         : 2000.136 cache size      : 512 KB fdiv_bug        : no hlt_bug         : no f00f_bug        : no coma_bug        : no fpu             : yes fpu_exception   : yes cpuid level     : 2 wp              : yes flags           : fpu vme de pse tsc msr pae mce cx8 mtrr pge mca cmov pat pse36 clflush dts acpi mmx fxsr sse sse2 ss ht tm up bogomips        : 4005.33

내용은...~!! 이미지 참조...

www.snowrice.com

네이버에서 글꼴을 한번 보기위해서 네이버 블로그 웹폰트를 실험해보았다.


흠..나눔폰트도 쓸만한듯.. 단 외국어가 어째...

linux- 테터툴스를 설치하자. 3. 도메인을 세팅하자.

리눅스를 통해 웹서버를 만들었다면 도메인도 있어야 한다. 다만, 웹서버라는것이 고정IP환경에서 움직이는 것이라, 우리가 쓰고 있는 보통의 인터넷으로는 무리가 따른다. 그러나 최근에는 가정집과 사무실에서 2대이상의 컴퓨터를 가지고 운영하는 곳이 많아졌다. 2대이상의 컴퓨터를 하나의 인터넷IP를 가지고 공유해서 쓰는것이다. 이럴경우 공유기라는 작은 리눅스박스를 사용하게 되는데, 공유기 자체가 리눅스의 매스컬레이딩 기능을 기계적으로 만들어놓은것이다. 모든 인터넷어텝터에는 MAC주소라는것이 있다. 실상 인터넷은 이 맥주소를 가지고 연결된다고 보면 된다. MAC주소는 한번 접속한 ip로 계속 통신하고자하는 속성이 있다. 그러므로, 공유기나 컴퓨터를 통해 인터넷에 접속하면, 별다른 ip차단이나 회선변경등이 없으면 계속 기존의 ip로 접속되는것이다. 또한 공유기 자체가 많은 전력을 소모하지 않는 이유로, 공유기의 전원을 OFF하지 않는 곳에 웹서버를 만들면 고정ip와 같은 효과를 얻을수 있다. 그러므로, 웹서버와 DNS서버를 만들기 위해서 고정ip를 꼭 사야하는 비용절감을 얻을수 있다. 하지만 안정적인 상용호스트로서의 기능을 발휘하고자 하면 고정ip의 확보가 절실하다. 정전이나 기타 생길수 있는 사태에 대비해야 하기 때문이다. 최근에는 SK브로드밴드에서 35000에 고정ip를 보급하는 서비스가 생겼다. 개인서버의 운영이 잦아지니 생긴 서비스로 볼수 있다. SK브로드밴드의 고정ip의 장점은 10M,100M이상의 속도를 보장한다는데 , 유리하다. 고정ip의 확보가 어려운 곳은 VPN서비스를 이용하여, 고정ip를 얻을수 있다. 보통 만원에서 4,5만원사이의 VPN서비스는 유동ip를 고정ip를 서비스하는 업체와 통신하여 자신의 인터넷환경이 고정ip처럼 쓰게 해주는것이다. VPN의 장점은 외국ip를 차단한 서버에 해당국가에서의 접속도 가능하다. 여기서는 리눅스를 이용하여 DNS서버를 구성하는 작업을 할것이다. DNS서버를 구성하면 도메인만 있으면 자신의 입맛대로 도메인을 구성할수 있다. 하지만 DNS서버는 DDOS공격에 노출되기 쉽다는 점을 상기하자. 그만큼 보안이 철저해야 하며, 실제 dns서버를 운영코자 할때도 많은 노력을 해야한다. DNS서버를 사용하지 않는 테터툴즈는 dynaminIP를 서비스하는 업체에 등록해서 사용하면 간단하다. 실제 최근에는 도메인을 통한 접속보다는 포탈을 통한 접속이 95%이상이기 때문에 구지 독립도메인을 유지해야 하는 절박함은 없다. 간단한 곳으로 http://www.aoo.to가 있으니 간단히 사용자등록하고 도메인을 얻을수 있다.  (단 다이나믹 서비스를 이용할때는 로그인문제가 어려울때가 있다. 포스팅을 하기위하거나 설정을 할때는 ip로 접속하면 된다.)

리눅스에 테터툴즈를 설치했으면, 이제 도메인을 설치해야 한다.

우선 페도라 코어에 DNS서버 데몬이 설치되어있다고 가정한다.
없으면

yum -y install caching-named
yum -y install bind

을 실행해 네임서버를 설치하자.

네임서버를 설치한후, 해야할일..!
도메인을 구입하는 일이다. 가비아나 도레지등 도메인을 사는 업체에서 구입하면 된다. .com .co.kr .pe.kr등.. 자신의 기호에 맞게 도메인을 사면 된다.

여기 까지는 누구나 할수 있는 일.. 다만..
여기서 부터 해야할일...

네임서버를 설정하는것이다.

우선 리눅스의 버젼에 따라 dns서버의 세팅이 다르다.
페도라 버젼 4.0이전에는 /etc/named에서 네임서버를 세팅할수 있었지만. 4.0 이후에는 /etc/named/chroot/var/named에서 세팅해야 한다. 네임서버의 보안때문에 이루어진 알이다. 쓰는 방법은 동일하다..

자신이 산 도메인 가령 koreaboy.com이라 하자.

koreaboy.com의 도메인 파킹을 위해서 해야할일... 도메인을 산곳에서 자신의 ip를 네임서버로 세팅하는 것이다. 이것은 시간이 약간 걸리는데 약 하루정도면 처리된다. 즉 세팅후 네임서버로의 기능은 약 하루정도후에 기능하는것이다.



각 도메인구입 사이트에서 도메인설정란을 보면 네임서버 설정 부분이 있다. 그곳에서 자신의 네임서버를 등록한다. 만약 koreanboy.com을 구입했다면 네임서버 설정 부분에서 ns.koreaboy.com으로 등록하고 네임서버의 ip설정에서 자기 자신의 서버의 ip를 등록한다. 그리고 나서 약 하루정도 기다리면 자신의 ip가 네임서버로 등록될것이다.

*주의할점 : 포트포워딩- 공유기를 쓰는 사람은 53번 포트를 포트포워딩해야 한다. DNS서버의 포트는 53번임을 주의하자..

참조: 리눅스의 서버설정 포트포워딩
http://bestakas.tistory.com/9
원격 로그인을 통해 서버에 접속하는 경우에는 vncserver를 통해서 포트포워딩 설정이 가능하다. 물론 웹호스팅을 하는 사람들은 호스팅업체에서 자동으로 도메인파킹을 해주므로 이런 설정은 불필요하다.

[root@localhost ~]# service vncserver restart VNC ?쒕쾭瑜?醫낅즺?섍퀬 ?덉뒿?덈떎: 1:root            [?ㅽ뙣] VNC ?쒕쾭 (??瑜??쒖옉?⑸땲?? 1:root                [?ㅽ뙣] [root@localhost ~]#

vnc서버가 구동되지 않았고 또한 재시동도 되지 않았다.... putty에서는 한글메세지가 제대로 출력되지 않으므로(한글 세팅이 필요하다.) 확인만 하면 된다. [?ㅽ뙣] 이 부분이 빨간색 표시가 된다면 실패라는 뜻이다.

vncserver세팅

[root@localhost ~]# rpm -qa | grep vnc vnc-4.1.2-3.fc6 vnc-server-4.1.2-3.fc6 [root@localhost ~]# vi /etc/sysconfig/vncservers

설치유무를 확인하고 vncserver설정화일을 연다. 설치가 안되었을때는 위의 vnc를 yum으로 업데이트내지 설치한다.

# The VNCSERVERS variable is a list of display:user pairs. # # Uncomment the lines below to start a VNC server on display :2 # as my 'myusername' (adjust this to your own).  You will also # need to set a VNC password; run 'man vncpasswd' to see how # to do that. # # DO NOT RUN THIS SERVICE if your local area network is # untrusted!  For a secure way of using VNC, see # <URL:http://www.uk.research.att.com/archive/vnc/sshvnc.html>. # Use "-nolisten tcp" to prevent X connections to your VNC server via TCP. # Use "-nohttpd" to prevent web-based VNC clients connecting. # Use "-localhost" to prevent remote VNC clients connecting except when # doing so through a secure tunnel.  See the "-via" option in the # `man vncviewer' manual page. VNCSERVERS="1:root" # VNCSERVERARGS[2]="-geometry 800x600 -nolisten tcp -nohttpd -localhost"

진한 표시로 된 부분을 입력후 저장한다.

[root@localhost ~]# cd /root [root@localhost ~]# pwd /root [root@localhost ~]# mkdir .vnc [root@localhost ~]# cd .vnc [root@localhost .vnc]# pwd /root/.vnc [root@localhost .vnc]# vncpasswd Password: Verify: [root@localhost .vnc]# ls -l total 4 -rw------- 1 root root 8 May  3 04:48 passwd

외부에서 vncserrver접속을 위해 해야하는 비밀번호 설정이다. 루트디렉로리 아래에서 .vnc디렉토리를 만들고 vncpasswd 화일 생성해서 루트로 접속가능한 비번을 설정해야 한다.

다시 아래의 명령으로 vncserver를 실행하자.

[root@localhost .vnc]# service vncserver start VNC ?쒕쾭 (??瑜??쒖옉?⑸땲?? 1:root xauth:  creating new authority file /root/.Xauthority New 'localhost.localdomain:1 (root)' desktop is localhost.localdomain:1 Creating default startup script /root/.vnc/xstartup Starting applications specified in /root/.vnc/xstartup Log file is /root/.vnc/localhost.localdomain:1.log                                                            [  OK  ]

OK메세지가 떨어졌다. 이제 클라이언트인 윈도우에서 리눅스의 Xwindows로 접속하자.

나는 tightVNC클라이언트 프로그램을 사용한다. 다운은 http://www.tightvnc.com/download.html에서 할수 있다. 윈도우즈용 tightvnc-1.3.10-setup.exe를 다운받아 설치하면 된다.

서버의 아이피와 :1 을 입력한다. 가령 서버가 211.0.0.1이라면 211.0.0.1:1로 입력한다.
vnc접속도 5901번 포트를 포트포워딩 해주지 않으면 외부에서 접속할수 없다.
접속이 되었으면 root와 비번을 입력하고 xterm메시지가 나오면 firefox &를 입력해 파이어 폭스를 실행한다. 파이어폭스는 자신의 윈도우에서 실행되는것이 아닌 외부의 자신의 서버에서 실행되는것이다. 그러므로 파이어폭스에서의 모든 행위는 서버컴퓨터에서 이루어짐을 이해하자. 공유기나 게이트웨이에 접속해서 53번 포트를 포트포워딩 하자.
이 포스팅은 테터툴즈 네임서버 설정이므로, vnc에 대한 고찰은 이쯤에서 넘어가자.


53번 포트를 포트포워딩 했으면 다음으로 해야 할일은 네임서버 설정이다.

가장 먼저 해야 할일은 named.conf설정하는 일이다.

[root@localhost named]# cd /var/named/chroot/etc
[root@localhost etc]# ls
localtime  named.caching-nameserver.conf  named.rfc1912.zones  rndc.key
[root@localhost etc]#

리눅스버젼에 따라서 named.caching-nameserver.conf 나 named.conf가 있는 시스템이 있다. 페도라코어 4에서는 /var/named/chroot/ 디렉토리가 없고 네임서버가 /etc/에 정의되어 있는 버젼도 있다. (bind버젼 9.2이전버젼은 named.caching-nameserver.conf 화일이 없고 9.3버젼이후에 보안강화를 위해 나타난 기능이다.)

네임서버의 보안을 위해, 네임서버의 설정을 chroot라는곳에 숨겨놓은것인데, 자신의 시스템에서 named.caching-nameserver.conf나 named.conf를 찾자.

named.caching-nameserver.conf가 /var/named/chroot/etc에 있는경우에는 처음 설치됐을때에서 보안을 약간 풀어주어야 한다. 53번 포트의 접속을 localhost외의 다른 곳에서의 접속도 가능하게 만들어 주어야 한다. 아래와 같이 빨간표시로 된곳을 유념하여 named.caching-nameserver.conf을 설정하자.

[root@localhost ~]# cd /var/named/chroot/etc [root@localhost etc]# vi named.caching-nameserver.conf // // named.caching-nameserver.conf // // Provided by Red Hat caching-nameserver package to configure the // ISC BIND named(8) DNS server as a caching only nameserver // (as a localhost DNS resolver only). // // See /usr/share/doc/bind*/sample/ for example named configuration files. // // DO NOT EDIT THIS FILE - use system-config-bind or an editor // to create named.conf - edits to this file will be lost on // caching-nameserver package upgrade. // options {         listen-on port 53 { any; };         //listen-on-v6 port 53 { ::1; };         directory       "/var/named";         dump-file       "/var/named/data/cache_dump.db";         statistics-file "/var/named/data/named_stats.txt";         memstatistics-file "/var/named/data/named_mem_stats.txt";         query-source    port 53;         //query-source-v6 port 53;         allow-query     { any; }; }; logging {         channel default_debug {                 file "data/named.run";                 severity dynamic;         }; }; view localhost_resolver {         match-clients      { any; };         match-destinations { any; };         recursion yes;         include "/etc/named.rfc1912.zones"; };

named.caching-nameserver.conf
화일의 설정이 끝나면 다음으로 zone화일을 추가해야 한다.

named.caching-nameserver.conf가 없는 시스템은 named.conf를 수정하면 된다.
named.caching-nameserver.conf가 있는 시스템은 named.rfc1912.zones이 named.conf와 같은 역활을 한다.

named.rfc1912.zones나 named.conf 에 자신의 도메인을 설정하자.


zone "자신의 도메인" IN {
        type master;
        file "자신의 도메인.zone";
        allow-update { none; };
};

마지막에 이 부분을 추가하자

다음으로 chroot디렉토리가 있는 시스템에는 /var/named/chroot/named에
chroot가 없는 시스템은 /named에
자신의도메인.zone화일을 만들어야 한다.

$TTL    86400 @               IN SOA  ns.자신도메인. root.자신도메인 (                                         42              ; serial (d. adams)                                         3H              ; refresh                                         15M             ; retry                                         1W              ; expiry                                         1D )            ; minimum                 IN NS           ns.자신도메인.                 IN MX 10        mail.자신도메인.                 IN A            자신의IP ns             IN A            자신의IP www         IN A            자신의IP ftp             IN CNAME        @ *               IN CNAME        @ mail           IN CNAME        www

설정후에 DNS서버가 모두 설정이 올바른가에 대해 체크해보자

[root@localhost named]# named-checkconf /etc/named.caching-nameserver.conf [root@localhost named]# named-checkconf /etc/named.rfc1912.zones [root@localhost named]# named-checkzone 자신도메인 /var/named/chroot/var/named/자신도메인.zone zone 자신도메인/IN: loaded serial 42 OK [root@localhost named]#

[root@localhost named]# service named restart named瑜??뺤??⑸땲??                                  [  OK  ] named瑜??쒖옉?⑸땲??                                  [  OK  ] [root@localhost named]#

네임서버 설정은 OK명령으로 설정 OK
다음으로 아파치 설정이다.

아파치에서는 httpd.conf에서 버추얼호스팅부분의 주석을 제거한다.

# Virtual hosts Include etc/extra/httpd-vhosts.conf

extra디렉토리로 이동해서 httpd-vhosts.conf를 수정하고 예시문은 모두 제거하거나 주석처리한다.

<VirtualHost *:80>     ServerAdmin 자신의 메일     DocumentRoot /home/blog/public_html     ServerName 자신의 도메인 </VirtualHost>

다시 아파치의 재구동

자신의 도메인으로 접속하여 보자.

앞장의 포스팅에서 아파치에서의 사용자계정과 데이타베이스를 설정했다. 이제 테터툴즈를 다운받아 설치하자.

우선 리눅스 및 웹호스팅 서버에서 자신의 계정으로 테터툴즈를 다운받자

[blog@localhost public_html]$ wget http://download.textcube.org/textcube-latest-core.tar.gz --11:41:07--  http://download.textcube.org/textcube-latest-core.tar.gz Resolving download.textcube.org... 218.38.16.28 Connecting to download.textcube.org|218.38.16.28|:80... connected. HTTP request sent, awaiting response... 302 Found Location: http://dev.textcube.org/svn/releases/textcube-1.7.8-core.tar.gz [following] --11:41:07--  http://dev.textcube.org/svn/releases/textcube-1.7.8-core.tar.gz Resolving dev.textcube.org... 218.38.16.28 Connecting to dev.textcube.org|218.38.16.28|:80... connected. HTTP request sent, awaiting response... 200 OK Length: 3096853 (3.0M) [application/octet-stream] Saving to: `textcube-1.7.8-core.tar.gz' 100%[==============================================================================================>] 3,096,853   10.4M/s   in 0.3s 11:41:07 (10.4 MB/s) - `textcube-1.7.8-core.tar.gz' saved [3096853/3096853] [blog@localhost public_html]$

다운로드 주소 : http://download.textcube.org/textcube-latest-core.tar.gz 이다.
wget명령으로 콘솔로 다운을 받자. 아니면 리눅스의 firefox를 사용하거나 윈도우즈에서 다운받아 압축을 풀고 ftp로 올린다.

압축을 푼다.

[blog@localhost public_html]$ tar -xvf textcube-1.7.8-core.tar.gz

단 문제점이 있다. 압축이 풀리면 tc디렉토리 아래에 설치된다.
mc로 모두 public_html아래로 옮기자.

[blog@localhost public_html]$ export LANG=c

1장에서 만든 블로그용 계정 홈페이지로 접속하자.
http://웹서버주소/~blog/setup.php


1장에서 만든 데이타베이스를 입력한다. 웹호스팅을 받는 분들은 호스팅업체에서 발행한 데이타베이스 정보를 입력한다.


이런 메세지가 뜰것이다.

웹 설정 파일: "/home/blog/public_html"에 .htaccess 파일을 생성할 수 없습니다. "/home/blog/public_html"의 퍼미션을 0777(으)로 수정해 주십시오. FTP 프로그램으로 권한을 수정하시거나 다음의 명령을 터미널에 붙여 넣으시면 됩니다 : chmod 0777 /home/blog/public_html 설정 파일: "/home/blog/public_html"에 config.php 파일을 생성할 수 없습니다. "/home/blog/public_html"의 퍼미션을 0777(으)로 수정해 주십시오. FTP 프로그램으로 권한을 수정하시거나 다음의 명령을 터미널에 붙여 넣으시면 됩니다 : chmod 0777 /home/blog/public_html 첨부 디렉토리: "/home/blog/public_html"에 attach 디렉토리를 생성할 수 없습니다. "/home/blog/public_html"의 퍼미션을 0777(으)로 수정해 주십시오. FTP 프로그램으로 권한을 수정하시거나 다음의 명령을 터미널에 붙여 넣으시면 됩니다 : chmod 0777 /home/blog/public_html 캐시 디렉토리: "/home/blog/public_html"에 cache 디렉토리를 생성할 수 없습니다. "/home/blog/public_html"의 퍼미션을 0777(으)로 수정해 주십시오. FTP 프로그램으로 권한을 수정하시거나 다음의 명령을 터미널에 붙여 넣으시면 됩니다 : chmod 0777 /home/blog/public_html 스킨 디렉토리: "/home/blog/public_html/skin"에 customize 디렉토리를 생성할 수 없습니다. "/home/blog/public_html/skin"의 퍼미션을 0777(으)로 수정해 주십시오. FTP 프로그램으로 권한을 수정하시거나 다음의 명령을 터미널에 붙여 넣으시면 됩니다 : chmod 0777 /home/blog/public_html/skin

콘솔이나 ftp프로그램으로 public_html을 777로 설정한다.

[blog@localhost ~]$ chmod 777 -R public_html/

모두 OK가 되면 설정OK 표시가 출력된다.

다중사용자와 단일사용자에 대해 묻는데, 자신의 알맞는 용도에 사용자설정을 한다.

다음으로 이메일과 자신의 정보를 입력한다.

입력이 끝나면 설치 OK


관리자 툴로 접속해서 자신의 취향에 맞게 블로그를 만들어 나간다.

http://웹서버주소/~blog/식별자/owner 가 관리자 툴이고
http://웹서버주소/~blog/식별자/ 가 블로그 접속 주소이다.

웹호스팅을 서비스 받는다면 1장과 3장은 읽을 필요가 없다. 그냥 테터툴스의 설치과정만 거치만 된다.

작업환경 : Fedora core 6.0
CPU : pentium 4 2.0
Memory : 256 MB
HDD : 40GB

설치형 블로그인 테터툴스를 설치해본다.

여기서 하는것은 우선 페도라 코어가 설치되고 아파치와 Mysql이 기본적으로 설치된 상황으로 가정해본다. 페도라 코어와 Mysql과 아파치의 설치에 대한 블로그는

http://bestakas.tistory.com/category/enjoy%20%26%20Linux
요기 블로그 가면 알수 있다. * xampp,컴파일등 여러가지 설치방법이 있다.

우선 본인의 시스템은 Mysql이 EUC_KR로 설치되어 있다.
EUC_KR로 세팅된 Mysql에서 UTF8용 데이타베이스를 설정하고, 테터툴스를 설치하겠다.
(이도 저도 싫은 분들은- 특히 웹서버의 컴파일버젼이 구찮은 분들은 lampp를 사용하시기 바란다. lampp는 xapmm의 리눅스버젼으로 php,mysql,apache가 압축이 풀리는 동시에 기본적으로 설치된다. 반드시 /opt/ 디렉토리에서 압축을 풀어야 하며..구동은 ./opt/lampp start로 쉽게 작동할수 있다. lampp는 utf8을 기본으로 설치하니 염려마시라.)

또한 아파치가 지금은 /usr/local/httpd/htdocs 에서만 접속가능하므로 , 사용자 계정을 통해 홈페이지를 서비스 하는 웹호스팅하는 방법도 소개하기로 한다.

우선 자신의 리눅스 시스템에 root로 접속해서 테터툴스용 유져를 만들자.

[root@localhost httpd]# adduser blog [root@localhost httpd]# passwd blog Changing password for user blog. New UNIX password: BAD PASSWORD: it is based on a dictionary word Retype new UNIX password: passwd: all authentication tokens updated successfully. [root@localhost httpd]#

blog라는 유져를 만들었다. 통상의 페도라 시스템이라면 /home/blog라는 디렉토리가 생성되었을것이다.

자.. 확인해보자.

[root@localhost httpd]# ls /home bestakas  blog [root@localhost httpd]#

유져만들기에 성공했음을 알수있다.

다음은 아파치의 가상호스팅부분을 세팅할것...mc를 이용해서 세팅할것이다. mc는 쉽게

[root@localhost httpd]# yum install mc

명령으로 설치할수 있다.

mc를 정상적으로 쓰기 위해서는 페도라가 한글모드가 아닌 영어 모드로 바꿔줘야 한다.
export LANG=c
명령으로 영문모드로 바꾸자.
다음으로 mc를 실행하자.

Windows 7 사양 , 윈도우즈7 시스템 사양

윈도7을 운영하기 위해서는 최소 2GB의 메모리와 15GB의 디스크 공간이 필요할 것으로 보인다.

 지난달 30일 미국 지디넷은 윈도7 베타버전, RC버전 등의 시스템 운영 요구사항을 통해 윈도7을 구매하려는 고객들이 필요한 최소 시스템 사양을 공개했다.

MS는 지난 1월 7일 윈도7 베타 버전을 공개하면서 이를 운영하기 위한 시스템 요구사항으로 1GHz 프로세서(32, 64비트), 1GB RAM, 16GB 디스크 공간이 필요하다고 명시했다.

이번에 발표한 RC버전에 대해서는 베타버전과 비슷하지만 32비트, 64비트 프로세서에 따라 필요한 RAM과 디스크 공간 최소사양은 별도로 표기됐다. 시스템 최소 요구사양은 다음과 같다.

1GHz 프로세서(32, 64-bit) ․1GB RAM (32bit), 2 GB RAM (64bit) ․16GB 디스크 가용공간(32bit), 20GB 디스크 가용공간(64bit)

 
 MS는 윈도7을 윈도XP 모드에서 사용하기 위해서 최소 2GB메모리, 15GB의 디스크 공간을 권장하고 있다.

MS는 정식버전의 권장사양이 베타, RC버전과 비슷할 것이냐는 질문에 대해서는 "아직 명확한 사양이 결정되지 않아 잘라 말하기는 어렵다"고 답했다.

참고로 윈도비스타는 1GHz 프로세서에 512MB RAM, 15GB 디스크 저장 공간을 권장하고 있다.

출처: http://www.zdnet.co.kr/ArticleView.asp?artice_id=20090501114257

---

1기가 램이 최소사양이라면 덩치가 얼만한지 알수 있겠군.
꿈도 꾸지 말아야 겠네. 비스타가 512메가 라고 해도 1기가에서 버벅거렸으니, 아마도 4기가는 넘어야 그래도 안정적인 작업이 가능하겠네여.

XP를 써도 왠만한건 거의 다 가능한데, 일부러 컴터를 바꿔가면서 windows7을 필요까지는 없을거 같네여.

XP를 너무 잘만들어서 MS가 고생하는군요...ㅋ Windows98을 너무 잘만들어서 ME가 장사가 안됐듯이...

내 생각에는 모든 코드의 UTF8사용, 빠른 익스플로러 , ssh,ftp클라이언트탑재 , 강력하고 빠른 인터넷 필터기능,다이렉트X 성능향상...이 기본탑재된 OS가 나왔으면 하네요..ㅋㅋ (딴 프로그램업체들 나가자빠지나..) 

포기해야겠네요..시스템 사양때문에....

참고로 전 Windows XP X64 SP3버젼과 노트북에서는 Windows XP x32 SP2를 씁니다.