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

제로보드 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을 수정하면 된다.. 

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

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

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

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

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

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

표준 브라우져에서는 잘보이던 둥근박스가 한심한 브라우져인 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의 버그에 대해 함... 포스팅하겠습니다..