Outsider's Dev Story

Stay Hungry. Stay Foolish. Don't Be Satisfied.

새롭게 맡은 프로젝트...

요즘은 계속 자바스크립트를 가지고 놀고(?) 있다. 파견이후에 어느정도 JAVA도 손에 익었고 JAVA쪽으로 다시 집중을 해보려고 생각하고 있었지만 예정되었던 내부프로젝트로 자바스크립트에 집중하게 되었다. 말그대로 순수 자바스크립트로만 이루어진 프로젝트....

겨우 다시 만지게 된 JAVA를 다시 놓치는 것 같아서 약간 불안감이 있기도 하지만 이건 나한테는 상당히 매력적인 프로젝트이기 때문에 요즘 거의 내 머릿속에는 이 프로젝트가 가득하다. 어떻게 구성해야 할지... 이 생각 저생각... 물론 당연히 저것만 하는건 아니다. 계속 수시로 다른 것들이 끼어들고 있지만 잽싸게 또는 비중고려해서 끝내고 프로젝트에 계속 관심을 두고 있다.

일단 자바스크립트라는 녀석은 상당히 재미있다. html이나 자바스크립트가 흡사 아무나 하는것 정도로 인식되던 예전에 비하여 웹표준이 강화되고 AJAX라는 녀석에 UX라는 개념까지 등장하면서 자바스크립트의 입지는 강해졌고 이젠 자바스크립트로 못하는것 빼고는 다 할 수 있다. 개발을 시작한 뒤로는 웹표준이나 자바스크립트의 이런 강세에 대해서 상당히 관심이 늘어났기 때문에 아예 맘편히 만질 수 있는 이런 기회는 상당히 맘에 든다.

자바스크립트는 Language라고 부르는 다른 것들과는 상당히 다르고 아주 유연한 구조가 재미있게 만드는 것 같다. 그리고 AJAX이후 수많은 프레임워크와 라이브러리의 지원으로 많은 지식이 없어서 수많은 것들을 구현해 볼수 있고 바로바로 가시적으로 그 결과를 볼 수 있다. 상당히 단순한 것 같으면서도 파면 팔수록 묘한 매력이 나온다.

그리고 자바스크립트는 클라이언트 사이드다. JSP나 ASP등처럼 서버사이드가 아니란 얘기다. 요즘은 이제 ECMAScript4나 Javascript 2의 등장으로 조만간 한번 큰 변화가 있을듯 하지만 당장 벌어질 일은 아니고 서버사이드가 ASP에서 PHP, JSP, ASP.NET등 수많은 변화를 하고 있는 가운데 html과 Javascript는 사용하는 추세는 달라지었을 지언정 그 본질은 그대로이다. 이건 한번 어느정도 투자해두면 두고두고 써먹을 수 있다는 얘기다.

그리고 이게 나한텐 가장 좋은 점인데 상당히 비중있다고 생각되는 프로젝트임에도 아직 신입티도 못벗은 우리에게 거의 위임이 되었다. 팀장님께 간단한 보고 외에는 설계부터 구현까지 완젼히 내맘대로다. 물론 내 동기랑 같이 하고 있지만 누구 눈치를 볼게 없다는 거다. 여태 하면서 설계도 없이 주먹구구식으로 진행되고 전체적인 그림도 전혀 없고 그냥 나오는 이슈를 처리만 하면서 전체구조자체가 망가지는 게 큰 불만이었고 이렇다할 의사결정이 안이루어지고 중간에 끼어서 아무것도 못하는게 좀 힘들었는데 이번에는 그렇지 않다. (신입 둘이 이걸 완젼히 맡았다는게 어찌보면 우리 회사의 구조적 결함이 반영된다랄 수도 있지만.....)

이것저것 내가 평소에 생각하던 것들과 이번 프로젝트에서 반영해야 할 것들.... 아는 건 별로 없지만 열심히 생각해서 기능분석서도 나왔고 일정도 대충은 잡고 기본적인 클래스 구조도 잡았다. 이것저것 어려운 부분도 있었지만 어찌어찌 하다보니 우리가 구상한 전체 구조의 틀은 나온 상태이다. 초반이라 좀 여유부리고 있긴 하지만 솔직히 어떤 문제가 돌출될지 혹 우리가 잘못 생각하고 있는게 있을지 전혀 감이 없으니 불안하긴 하지만 현재까진 제법 잘 오고 있다.

일단 맘껏 할 수 있으니까 좋다.... SVN도 하다가 치워버리곤 했는데 이번엔 프로젝트에 완젼히 물렸고 아마 끝까지 가지 않을까싶다. 설계라고 하긴 조촐하지만 구조도 잡아봤고 내가 좋아하는 prototype.js도 단순히 $만 쓰는게 아니라 이것저것 맘껏 사용해 보고 있다. 원래는 이슈트래커로 TRAC도 써볼까 했었는데 쉬운 녀석이 아니라 그것까지는 좀 무리일것 같아서 일단 보류했다.

이것저것 좀 피곤한 다른 일들이 있긴 하지만 이 프로젝트만은 지금 나한텐 충분한 만족감을 준다. 제발 무사히 완료되기를.....

2008/02/27 00:03 2008/02/27 00:03

li태그로 메뉴등을 가로로 배열하기

예전에는 페이지 디자인을 할 때 table이용해서 했기 때문에 테이블안에 테이블을 삽입하는 식으로 틀을 잡으면 어떤식의 레이아웃이라도 쉽게 잡을 수 있었지만 요즘에는 table보다는 div등을 이용해서 레이아웃을 잡는게 권장되고 있기 때문에 이런 방법은 쓸수가 없다.

그래서 메뉴등을 배열할때는 보통 ul, li를 이용해서 리스트에 css 스타일로 원하는 모양을 잡는 것 같다. 알다시피 ul, li는 리스트를 만드는 태그이고 스타일을 적용시키지 않으면 앞에 ● 표시가 붙으면서 리스트형태로 만들어지는데 css를 이용하면 원하는대로 배열시킬수 있다.


<ul>
    <li>menu 1</li>
    <li>menu 2</li>
    <li>menu 3</li>
    <li>menu 4</li>
    <li>menu 5</li>
</ul>

위처럼 html태그를 구성하고 이제 css로 스타일을 주면 된다.


ul {
    list-style:none;
    margin:0;
    padding:0;
}

li {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    border : 0;
    float: left;
}

ul에 리스트스타일을 주지 않고 필요에 따라 margin과 padding을 적절하게 준다. 가로로 배열하려면 float를 left로 주면 가로로 배열할 수 있다. li안에 글자가 들어갈때는 상관없지만 image(보통 메뉴는 이미지로 구성하니까..)를 넣는다면 border를 0을 주면 빈공간 없이 가로로 배열할 수 있다.

물론 여기서는 간단한 예제이기 때문에 스타일을 ul과 li에 직접 주었지만 실제사이트는 복잡하기 때문에 class를 주거나 id를 주어 스타일을 적용하는 것이 더 좋다. css는 포괄적으로 적용시키는 것보다는 필요한 만큼 해당 엘리먼트를 구체적으로 지정해서 주는 것이 더 좋기 때문에.....
2008/02/20 02:29 2008/02/20 02:29