발진!! 아스라다

Fake : 1 위조하다(counterfeit);(되는 대로) 꾸며내다, 날조하다(fabricate) 《up》
2 속이다(deceive);좀도둑질하다, 훔치다;윤색하다
3 …인 체하다, 가장하다(pretend)
4【스포츠】 페인트하다 《out》
5【재즈】 즉흥 연주하다(improvise)

여기서는 '가장하다' 또는 '속이다'의 뜻이 어울릴것같다.

initMouseEvent

void initMouseEvent(String  typeArg,

                    boolean canBubbleArg,

                    boolean cancelableArg,

                    org.w3c.dom.views.AbstractView viewArg,

                    int detailArg,

                    int screenXArg,

                    int screenYArg,

                    int clientXArg,

                    int clientYArg,

                    boolean ctrlKeyArg,

                    boolean altKeyArg,

                    boolean shiftKeyArg,

                    boolean metaKeyArg,

                    short buttonArg, 

                   EventTarget  relatedTargetArg)

initMouseEvent 메소드는,DocumentEvent 인터페이스에 의해 작성된 MouseEvent 의
값을 초기화할 경우에 사용합니다. 이 메소드는,MouseEvent 가 dispatchEvent 메소드를
개입시켜 디스팟치 되기 전에 한해 불려 갑니다만, 필요한 경우는 초기화할 단계에서 여러
차례 불려 가는 일도 있습니다. 여러 차례 불려 갔을 경우는, 마지막 호출이 우선됩니다.

파라미터:

typeArg - 이벤트의 형태

canBubbleArg - 이벤트를 버블 할 수 있을지 어떨지

cancelableArg - 이벤트의 디폴트 액션을 억제할 수 있을지 어떨지

viewArg - Event 의 AbstractView

detailArg - Event 의 마우스의 클릭수

screenXArg - Event 의 화면상에서의 x 좌표

screenYArg - Event 의 화면상에서의 y 좌표

clientXArg - Event 의 클라이언트의 x 좌표

clientYArg - Event 의 클라이언트의 y 좌표

ctrlKeyArg - Event 의 사이에 Ctrl 키가 밀렸는지 어떠했는지

altKeyArg - Event 의 사이에 Alt 키가 밀렸는지 어떠했는지

shiftKeyArg - Event 의 사이에 Shift 키가 밀렸는지 어떠했는지

metaKeyArg - Event 의 사이에 Meta 키가 밀렸는지 어떠했는지

buttonArg - Event 의 mouse button

relatedTargetArg - Event 에 관련하는 EventTarget

위 코드를 복사해서 실행해 보자.

버튼을 번갈아 눌러보자
어떤 일이 일어나는가?

상사의 생일 선물로 데스노트를 주문했다.
다이어리를 사려고 쥐마켓에서 둘러보다 이걸 봤다.
라이토가 적었던 이름들이 수록되어있단다 ㅋㅋ
절대 기존 중국산과는 다르다는 판매자의 강력한 메세지!!
목걸이가 탐이 났지만, 워낙에 글씨 쓰는걸 싫어해서 참았다.

키 입력 이벤트는 다양한 곳에 쓰이고 있다.
은행사이트의 계좌 입력 폼이라던지, 금액 입력 폼,
기타 이메일 입력 폼이나 키입력에 따른 처리가 필요한 어떠한 경우라도
키입력 이벤트는 쓰여진다.


위 코드를 예를 들어보면,
금액을 입력 하는 폼이므로 숫자 이외의 값이 들어가선 안된다.(경우에 따라서는 콤마도 출력 할 수 있겠지만 숫자만 입력으로 받아들이고 콤마는 내부적으로 처리해주는것이 좋겠다)

keydown 이벤트를 걸어준 이유는 사용자로부터 입력 받은 값을 체크해서
숫자가 아니면 키입력을 흘려버려야 하기때문이다.
만약 keyup 이벤트를 걸면 입력한 문자 or 숫자가 폼에 먼저 찍힌다음 이벤트 핸들러를 통해서
걸러주게 되므로 keydown이 좋은 선택이 되겠다.

keypress의 경우 firefox같은 모질라 계열의 브라우져에서 지원하지 않으므로 크로스 브라우징이
필요한 페이지에서는 사용 할 수 없다.

한가지 주의 해야 할 점은 키입력 이벤트 발생 시점이 IE와 모질라가 서로 조금씩 다르다는 것이다.
이 부분의 처리는 코드를 직접 보자.

우선 위 코드를 크로스브라우징이 가능하도록 수정하자.
인라인 스크립트는 지양해야 하므로 이벤트 핸들러를 따로 지정해주자.

폼

스크립트

다듬어지지 않은 코드이지만 그리 길지 않은 코드이다.
이벤트핸들러 priceEvtHandler를 살펴보면
keyValue 값으로 분기를 한다.
백스페이스는 입력된 숫자의 삭제를 위해 필요하므로 꼭 넣어 줘야 하며
엔터키의 경우는 필요에 따라 코드를 작성해주면 된다.
여기서는 아래쪽 분기문이 중요하다.
키코드 48~57은 기본키 0에서 9까지의 아스키코드값이고
96~105는 숫자패드 0에서 9까지의 아스키코드값이다.
사용자 입력이 이 범위를 벗어나면 이벤트를 그냥 흘려보내야 한다.
이때 이벤트를 흘려보내는 방식이 IE와 Mozila가 서로 다르다.
IE는 property값을 변경하고 Mozila는 메서드를 호출함으로써 이벤트를 흘려보낸다.

위 코드를 조금 바꿔보았다.
아스키값으로 비교하는 대신에 정규식을 사용하였다.
훨씬 깔끔(?)해 보이나??

거대한 화이트보드에 빼곡히 적힌 단어들...
그들은 저 화이트 보드를 채우기 위해 얼마나 많은 생각을 했을까?

HTML에서 가장 많이 쓰이는 태그는 아무래도  <table>이 아닐까 한다.
표를 그리기 위한 table태그지만 레이아웃을 잡을때도 그 역할을 톡톡히 해내는
만능 태그이다. 물론 레이아웃용으로 쓰이는건 지양해야 하지만 말이다.

<table> 알맞게 쓰기

테이블을 그리기에앞서 테이블의 용도를 먼저 생각해야 한다.
<table>태그의 존재이유는 바로 '표'를 표시하기 위함이다.
표란 말 그대로 엑셀의 시트처럼 가로세로 칸이 나뉘어진 틀을 의미한다.
학급의 학생 목록이나 은행 계좌 거래 내역같은 일정한 형식의 내용들이 반복되는 경우
표를 써서 알아보기 쉽게 표현할 수 있다.
하지만 HTML에서 표를 그리는 역할을 맡은 <table>태그는 본래의 임무보다 과도한 일을 묵묵히
수행하고 있다.
페이지의 레이아웃을 잡기 위해 쓰이기도 하고 간격을 맞추기 힘든 부분에 <table>을 써서
꼼수로 간격을 맞추기도 한다.
이것은 코드와 디자인의 분리를 더욱 어렵게 만들고 나아가 필요 없는 부하를 유발한다.
실제로 <table>태그는 <div>태그에 비해 처리 속도가 늦다고 한다.
학생은 학생답게, 남자는 남자답게, <table>은 테이블답게....??


또한 가장 많이 쓰이는 태그이다보니 가장 많은 잘못된 습관을 야기시키기도 한다.
대표적으로 form태그와의 혼용문제이다.

흔히 form태그가 들어가면 공백이 생긴다는 이유로 form태그를 table 태그 안에 넣는 경우가 있다.

하지만 위는 아주 잘못된 태깅이다.
폼태그의 공백은 css에서 form{margin: 0}을 설정해 주는 것만으로 깔끔하게 처리가 된다.
다음과 같이 폼태그가 테이블 태그를 감싸는 것이 올바른 태깅이다.

또 <tr></tr>과 <tr></tr> 사이에는 폼태그가 들어가면 안된다.
단, <td></td>사이에는 허용이 된다.


다음으로 흔히 접하게 되는 잘못된 사용예는 테이블에 그룹핑을 하지 않는 것이다.
표준 테이블의 모양은 다음과 같다.

단, tfoot는 필요에 따라 빼도 상관 없다.

이렇게 그룹핑을 함으로써 얻어지는 잇점은 다음에 살펴볼 테이블의 속성에 있다.


속성(Attribute)

1.rules

rules는 셀의 경계선을 나타내는 방법을 지정하는 속성이다.
위의 테이블에 border="1" 속성을 추가해 보자.
테이블의 모든 셀들이 작은 박스로 나뉘어 구분되어진다.
이제 rules="cols" 속성을 추가해 보자.
외곽선을 제외한 가로줄이 모두 없어졌다.
rules의 값을 rows로 바꿔보자.
이번엔 세로줄이 모두 사라지고 안보였던 가로줄이 나타난다.
만약 이 속성값을 모르고 있다면 각 셀마다 일일이 css로 border 값을 설정해주느라 태그가
엉망진창이 되버릴것이다.

rules 의 속성 값에는 cols,rows,all,groups,none 가 있다.


2.frame

frame는 테이블의 외각선을 나타내는 방법을 지정하는 속성이다.
rules와 더불어 css노가다를 획기적으로 줄여주는 속성이다.

frame의 속성 값에는 void,above,below,lhs,rhs,hsides,vsides,box,border 가 있다.



스타일(CSS)

3.border-collapse

border-collapse는 css이다.
보통 테이블에 border속성을 주면 값이 1이라도 선이 굵게 나와 보기 좋지 않다.
이떼 style="border-collapse: collapse;" 라고 스타일을 지정해주면
얇은 선으로 표시가 되어 한결 깔끔해진다.
테이블에 border속성을 주지 않고 style로 border: solid 1px #000000; 과 같이 border를 만들었다면
이 문서를 프린터로 인쇄 하면 선이 보이지 않는 문제가 있다.
하지만 테이블에 border값을 주고 스타일로 collapse를 지정함으로써 위와 같은 문제를
해결 할 수가 있다.

border-collapse 속성 값에는 collapse,separate 가 있다.

4.table-layout

테이블의 각 셀에 width,height값을 주지 않으면 브라우져가 자동으로 셀의 내용에 맞게
크기를 계산하여 그리게 된다. 하지만 셀에 width,height 값을 주어도 셀의 내용이 커지면
셀의 모양이 흐트러지게 된다.
이럴때 table-layout css를 사용하면 셀의 넓이를 정확히 고정시킬수 있다.
style="table-layout: fixed;" 이렇게 스타일을 지정하면 셀 내용에 상관없이 지정한 크기로 그려진다.

table-layout 속성 값에는 fixed,auto가 있다.



위의 테이블의 속성,css는 테이블을 그리는데 있어 가장 기본적인 것들이다.
더 세세한 내용은 http://www.w3c.org 홈페이지에서 HTML의 Table 명세를 보거나 테이블관련 CSS를 보면 쉽게 정보를 얻을 수 있다.
다시한번 강조하지만 테이블로써 레이아웃을 잡는건 아주 잘못된 습관이다.
테이블의 탄생 목적은 표를그리기 위함 이라는것을 명심하자.

"Markup Language 인 HTML에서 올바른 태그는
선택이 아닌 필수이며 코더의 의무이다."

렌더링 계산 방식의 차이

DIV로 레이어를 잡을때 가장 골치 아픈 문제가 레이어의 위치를 잡기가 어렵다는것이다.
테이블처럼 마음대로 위치를 잡는 일이 여간 힘든게 아니다.
이리 해도 안되고 저리 해도 안되서 결국엔 그냥 테이블로 짜는 경우가 허다하다.
하지만 테이블 본연의 임무는 표(grid)를 표시하는 일이니 억지로 다른일을 시키면 안되겠다.

아직까지는 모질라와 IE양대 진영의 브라우져간 렌더링 방식의 차이로 인해
코드 하나로 두 버전의 브라우져에서 동일한 표현을 하기는 쉽지 않다.
표준을 지키지 않는 IE때문에 개발자들만 이리저리 피곤하다.

W3C의 제안은 width값에 Border+Padding+Margin 값을 합산하는걸 표준으로 정하고 있다.
하지만 IE는 반대다.
width 값에서 Border+Padding+Margin을 뺀다.

firefox에서 가로 100px, border: 1px,padding: 10px; margin: 10px;의 박스를 그리려면
1*2 + 10*2 + 10*2 = 42
42 + 100 = 142
즉 내용이 들어갈 공간(content)의 크기는 100px이 지만 실제 표시되는 박스의 크기는 142px이 된다.

ie에서는 100-42 = 58 이므로 박스 사이즈는 100이지만
내용이 들어갈 공간의 크기는 58px이 되는것이다.



자리잡기

float,clear 두개의 속성만 이해하면 레이어의 자리잡기는 끝난다.


위 코드를 FireFox 에서 실행해 보자.

가로로 두개씩 세 줄에 걸쳐 박스 6개가 출력된다.

flat: 속성을 주면 div는 왼쪽 또는 오른쪽으로 정렬이 된다.


clear: 속성은 float: 속성을 끝내는 속성이다.

위 코드에서 바스 하나를 추가 하면 2번 옆으로 가서 붙는다.
아래쪽에 새로운 박스를 추가 하려면 다음과 같이 clear: 속성을 추가 한다.


2번 박스에서 float: 속성 값이 left 였기 때문에 clear: left 로 left로 지정된 floating을 끝내는 것이다.
float: right 였다면 clear: right 로 속성 값을 주면 된다.
단, clear: both 는 left와 right 를 모두 포함한다.

이 코드를 IE에서 실행해 보자.

1,2,4,6번 박스가 첫줄에 모두 표시가 되고
3,5번에 아래로 이어진다.

이것은 IE가 CSS를 올바로 해석하지 못하기 때문이다.
http://positioniseverything.net/ 이곳에 가면 IE의 버그를 확인할 수 있다.

12월 16일 토요일 낮 12시
대전 파라다이스웨딩홀 1층 루비홀

유학에서 중요한 개념 중 하나가 위기지학(爲己之學)입니다. 위기지학은 위인(人)지학과 대비됩니다. 위기지학은 자기를 위한 학문을 일컫고, 위인지학은 남을 위한 학문을 일컫습니다. 약간 과장해 말하자면, 유학의 기본적 태도는 배워서 남주자가 아니라 배워서 나 좋자입니다.(출처: 애자일 이야기)

목수가 자기손으로 자기가 살 집을 짓듯,
도예가가 자기손으로 자기가 쓸 그릇을 빚듯,
프로그래머도 자기손으로 자기가 쓸 프로그램을 만든다라...

나를 위한 무언가를 만드는것은 쉽지만 어렵다.
책임의 무게가 없고 안하면 그만이다라는 안이한 자세로 임하면
절대 할 수 없는일이다.

저는 작지만 유용한 프로그램들을 매일 작성할 것을 추천합니다. 누군가가 똑같거나 혹은 더 나은 걸 이미 만들었다는 데에 절대 신경쓰지 마세요. 유용성과 복잡성 간의 균형 감각을 얻기 위해서는 당신 자신이 만든 프로그램의 유용성을 직접 느껴봐야만 합니다. --워드 커닝햄

큰것은 만드는데 오래 걸리는 만큼 결과를 확인하기 어렵다.
작은것을 만들며 성취감을 맛보는것 역시 큰일을 하는것 못지 않게 중요하다.
성취감을 맛본자만이 성공으로 가는 길을 알 수 있다.