Jump To VB.NET

1. input Element 의 새로운 Type
web form 은 10년이 넘도록 checkbox, radio, password, select, file, submit, text 와 같은 몇개의 입력타입만 가지고 있었습니다. 많은 이들이 그동안 javascript 와 씨름하느라 몸고생, 맘고생 많이들 하셨으리라... ^^

이젠 새롭게 몇가지?의 Type 이 추가되었습니다.

1-1. datetime, week, month, date, time
날짜 관련 Type 들입니다.
Web Browser 들마다 지원하는 Form  이 다른데요...
Opera 가 젤루다 좋은 것 같아요. 그래서 Browser 비교는 internet explore 9 과 opera 11 과 했습니다.
현재 PC 에 internet explore 10 을 설치할 수 없어서 image Capture 가... ^^;

Markup은 아래와 같이...

입력합니다.

datetime 부터 이미지로 확인해 보죠...

Opera 에서는 날짜 선택 Control 이 rendering 되네요... ^^

다음은 date Type 입니다.

똑같이 날짜 선택 Control 이 나타나죠?
month Type 은 date Type 과 동일하게 나타납니다.

다음은 Week Type 입니다.

날짜 선택 Control 좌측에 Week 가 표시되어 있는 것을 보실 수 있습니다.

다음은 time type.
시간을 선택할 수 있도록 Spin Control 을 rendering 합니다.



1-2. email
email 을 받아들이는 input type 입니다.
뭐 type 에 email type 을 부여한다고 해서 달라지는 것이 있을까?
email Type 을 지원하지 않는 Web Browser 는 text type 으로 인식을 할 것이고 Web Browser 에 따라서는 Validation Check 까지 할 수 있도록 지원해 줄 것입니다.

(참고 : naradesign.net)


또한, iphone 의 경우에는 input field 에 커서를 가져갔을 때 "@" 와 "." 이 포함된 Screen Keyboard 를 띄워 줄것입니다. 

(참고 : naradesign.net)



1-3. url
이번엔 URL type 입니다.
Web Browser 에서는 text type 의 외관과 별 차이가 없으므로 iphone 에서 어떻게 보이는지만 확인하도록 하죠.

 

이미지 하단을 보시면 "/" 와 ".com" 버튼이 보이실 겁니다.
URL 에 맞게 Screen Keyboard 가 배치되어 있군요.


1-4. color
Color Type 은 여러분이 생각하시기에도 Color 를 선택할 수 있는 Control 이 나타나야 한다고 생각하지 않으십니까?

Opera 에서는 구현이 되어있군요.
먼저 단순한 Color 선택 Control 이 나타나고 "Other..." 버튼을 Click 하게 되면 Color 대화상자가 뜨는 군요...


1-5. search
Search Type 또한 외관은 Text Type 과 다르지 않습니다. 그래서 iphone 의 모양을 살펴보도록 하겠습니다.

보시는 바와 같이 이미지 하단 우측의 버튼이 "Search" 버튼으로 바뀌어 있는 것을 보실 수 있습니다.


1-6. number
이번엔 number Type 입니다.

일단 숫자를 마우스로도 입력할 수 있도록 Spin Control 로 rendering 하고 있고요.

iphone 에서는 Screen Key Board 의 상단에 숫자 Key 가 배열되어 있는 것을 보실 수 있습니다.


1-7. range
range Type 은 입력형태를 number Type 에서 제공할 수 있는 Spin Control 과는 다르게 Slide Control 로 rendering 합니다.



1-8. tel
tel Type 의 경우는 완전히 숫자만 입력하지요.
iphone 에서는 아래와같이 숫자 입력 Screen Keyboard 가 나타나는 군요... ^^


1-9. file
file Type 의 경우 예전에는 하나의 input Tag 에 하나의 파일만 선택할 수 있었습니다.
하지만 HTML 5 에서는 multiple 속성을 주어 여러 파일들을 선택할 수 있고
accept 속성을 사용하여 MIME type 을 선택하여 파일들을 filtering 할 수 있습니다.


위 Tag 를 Markup 하면 아래 이미지와 같은 파일 선택 대화상자가 나타나며 image 를 Filtering  할 수 있습니다. 

2. input Element 의 새로운 Attribute

2-1. placeholder

PlaceHolder 가 뭐냐구요?

위 이미지를 보시면 비어있는 TextBox 에 미리 Text을 넣어 두는 것인데요... 사용자가 Click 을 하거나 Control 에 Focus 가 가게되면 Placeholder Text 는 잽싸게 사라지죠.
이젠 이 기능을 javascript 의 도움없이도 사용할 수 있게 되었답니다.

이렇게 말이죠...

2-2. autofocus
기존의 페이지들은 Autofocus 기능을 Javascript 를 이용해서 구현을 했습니다. 하지만, 구현하는 것이 그리 만만하지는 않았죠. 구현보다도 구현후에 페이지 Loading 과 사용자의 엑션 사이에서 문제가 좀 있었습니다. Page Loading 중 사용자가 입력을 하고 있는 상황이라면 사용자가 원하지 않는 곳(Page Loading 후에 autofocus 가 위치한 곳) 에 입력을 하고 있을 수 있습니다.
사이트 로그인을 하겠다고 id 란에 id 를 입력하고 password 란에 password 를 입력하고 있는데... 그 순간 Focus 가 javascript 에 의해서 다른 입력 Field 에 가 버려서... 입력한 Password 가 훤히 다 보인다면? ㅋㅋㅋ
사용자는 쬐끔 퐝당하겠죠? 이런 경험 한번쯤 있으실지도...

이젠 javascript 를 사용하지 않아도 됩니다. autoscript 속성을 설정하면 page 가 Load 되자마자 Focus 가 설정된 곳으로 이동할 것입니다.
또 Script 가 아닌 Markup 으로 동작하는 것이기 때문에 모든 Web Browser 에서 똑같이 동작할 것이구요. (Web Browser 가 설정해 놓았다면요... 옵션으로 제공할 수도 있겠죠.)

그리고 autofocus 는 다음과 같이 설정하면 됩니다.


2-3. formaction
formaction 속성을 사용하면 Page Form 의 action 이 되는 대상 Page에 가기전에 input Element 단에서 대상 Page 를 바꾸어 버릴수 있습니다. 

위 Markup 의 내용을 보면 "woolla.aspx" 페이지로 이동할 것이 "woojja.aspx" 페이지로 이동하게 되겠죠...


3. 새로 추가된 Element

3-1. Keygen Element
Keygen Element 는 form 을 전송할 때 키를 생성하는 Control 입니다. form 이 전송되면 비밀키와 공개 키를 생성하여 비밀키는 Client 측에 저장하고 공개키는 서버에 전송합니다. HTML 5 에서 규정하는 Key 의 Type 은 "RSA" 뿐이므로 keytype 속성에는 "rsa" 만을 사용할 수 있습니다. 지정하지 않아도 기본값으로 지정합니다.
이젠 Keygen 요소를 사용하여 기존 ActiveX 를 사용하던 방식을 떨쳐버릴수 있을 것입니다.  기다려보도록 하죠...



3-2. Output Element
Output Element 는 무언가의 계산 결과를 나타냅니다.
range Element 와 output Element 를 함께 사용하는 예를 살펴보도록 하지요.

output Element value 속성을 넣을 수 없으므로 주의하시길...

3-3. progress Element
Progress Element 는 작업의 진행정도를 나타냅니다.

 

3-4. meter
meter Element 는 한정된 범
meter Element 는 한정된 범위에서의 값을 나타내고 싶을때 사용하는 것으로 최솟값과 최댓값을 지정할 수 없는 곳에서는 meter Element 를 사용할 수 없습니다.

예를 한번 볼까요?

지금까지 새로 추가된 Element 들 중 중요하다고 생각한 것들을 중심으로 간략하게 살펴보았습니다.

어떤가요? 지금까지 고생하던 것들이 조금은 사라질 것 같지 않습니까? ^^
저만 기분이 좋아진걸 까효? ^^;

마지막으로 페이지하나 소개하려합니다.
사용하는 Web Browser 를 이용하여 아래 Page 를 가셔서 input type 의 속성 지원여부를 확인할 수 있습니다.
http://miketaylr.com/code/input-type-attr.html

한번 방문해 보시기 바랍니다.

아 참...
위 내용들은 본인의 생각도 물론 많이? 포함되어 있지만

image 파일을 동적으로? 넣어야 할 일이 생겼습니다.
"동적으로" 라는 말에 "?" 를 붙인 이유는
앞으로 진행할 작업이 동적이라고는 하지만 XML 파일에 추가를 시켜줘야하고, 이미지 파일을 Embedded Resource 로 등록을 해줘야 하기 때문입니다. ㅋㅋㅋ
그럼 다시 컴파일을 해줘야 하니까요...

위와 같이 image 들을 Embedded Resource 로 등록을 하게되면 (Build Action 을 Embedded Resource 로 설정해 놓은 것을 확인하자)
저번 Article 에서 언급했듯이
Reflector 를 이용해서 살펴보게되면 assembly 내에 아래 그림과 같이 등록되어 있는 것을 알 수 있다.

(실행파일을 만들면 좋겠지만 귀차니즘으로 인해 현재 제작중인 Application 의 내용을 Capture 를 하다보니 수정하고 손으로 편집하고... 그래서 좀 조잡하네요. 이해해 주세용 ^^' )

그럼 imagelist control 에 등록할 이미지들이 어떤 것들인지 정의할 XML 파일의 내용을 보면 아래와 같다.

위 녀석을 읽어서 아래와 같이 Loop 를 돌면서 imageList Control 에 Add 한다.


Line 10 을 살펴보게되면 imageList 에 image 를 Add 할때 strKey 라고 하여 image 에 Key 를 부여할 수 있다.

이와 같이 이미지를 등록하는 방법을 선택한 몇가지 이유 중에 하나가 Key 를 등록하기 위해서 였다. ^^

Embedded Resource 가 아닌 Assembly 의 Resource 에 등록을 하고 imageList 에 image 를 Add 하는 방법을 써보려했으나 그건 좀 생각할 것이 좀더 많아서 다음 번에 구현해보려한다.


그럼 행복한 고수되셔요...


woojja ))*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

2-3. article Element
article Element 는 블로그에 포스트된 글들, 뉴스사이트의 기사들의 묶음 같은 독립된 하나의 컨텐츠를 나타내며, 게시판 글이나 블로그 포스트의 댓글들, 위젯, 가젯영역 또한 article Element 의 영역이라 할 수 있겠다.
아래 그림을 참고하자.
각 포스트들은 Section 으로 나뉘고 Section 들을 하나의 article Element로 감싸고 있는 모습을 볼 수 있다.
단순히 페이지의 메인 컨텐츠라고 해서 전체를 article Element 로 감싸서는 안되므로 해당 컨텐츠가 영역의 성격에 적합한지 항상 다시한번 체크해 보아야 할 것이다.
 

2-4. aside Element
aside Element 는 보충기사, 사이드바, 광고 와 같이 Main 컨텐츠와는 관련이 적어 분리될 수 있다고 생각되는 것에 사용한다.
또한 이전 글의 nav Element 에서 살펴봤듯이 nav Element 들을 Group 화 할때도 사용할 수 있다.
컨텐츠에 직접적으로 관련이 되어 있어서 만약 삭제되면 컨텐츠내용이 구성되지 않는 내용이 있다면 그 부분은 aside Element 를 사용하면 안된다.
위 이미지의 경우는 main Content 로서 내용을 설명하고 있으므로 aside Element 를 사용하면 안되겠지만. 위 그림의 aside 부분이나 아래 그림의 도서쇼핑몰의 추천 도서과 같은 내용은 Main Contents 와는 직접적인 관계는 없으므로 aside Element 를 사용하기에 적합하다고 할 수 있다.

aside Element 의 경우 컨텐츠의 내용과 제작자의 의도에 따라서 다른 Element 로 사용할 수 있으므로 Outline 구성 Element 중에서 조심스럽게 사용해야하는 Element 중 하나다.

2-5. hgroup Element
hgroup Element 는 제목과 이에 따르는 소제목이나 부제, Catchphrase 를 그룹화하기 위해 사용하는데, h1~h6 Element 만 포함할 수 있다.

HTML 5 의 hgroup Element 를 사용하기 이전, HTML 4.01 에서 아래와 같은 index 를 가진 Page를 제작하기 위해서는

뭐 간단히 만든다하면...

아래 같이 표현이 될 것이다.

그런데, 만약에 한 Depth 더 내려가야한다면? ㅡㅡ'
어떻게 표현해야 할까?

HTML 4.01 까지는 한계가 있었다.
HTML 5 부터는 Outline 구성Element 에는 HeadLine Element Level의 높고 낮음에 따라 Outline 이 결정되며 H1 이나 H2와 같은 높은 Level 의 Headline Element 들도 이제는 각 Section 이나 Article 같은 Outline 구성Element 어디에서나 사용할 수 있게되었다. 

그럼, 이번엔 다음 이미지를 보자

 
이 HTML 문서의 붉은 색 줄
Headline Tag 다음 P Tag 를 이용해서 Headline 을 설명해주고 있다.
겉으로 보기엔 차이가 나지 않는다.
하지만 아래 Mark UP 을 보면 둘의 차이를 알 수 있는데 hgroup 의 용도를 알 수있을 것이라 생각한다.

위 파란색 Section 의 <P> Tag 는 H2 Headline 의 내용임을 나타낸다.
하지만 붉은색 Section 의 <P> Tag 는 Hgroup 에 해당되는 내용임을 나타낸다. 이와 같이 Headline 을 여러개로 묶을 필요성이 있을때 Hgroup Element  를 사용하게 된다.

아래 내용의 경우 위 Headline 을 Hgroup 으로 묶을 수 있을 것이다.

2-6. Header, Footer Element
Header Element 는 Section 의 Header 를 나타낸다.
Header Element 에는 HeadLine Element 나 hgroup, nav Element 를 넣는다.
Footer Element 는 Section이나 Page 의 Footer 를 표현한다.
Section 의 저자정보나, 관련링크, 저작권표기등을 표현하는데 사용한다.
몇번을 사용가능하지만, 사용하는 위치에 따라서 각각의 의미가 달라진다.
page 의 Body Tag 내의 Footer 는 Page 의 Footer, 블로그 포스트등의 article 내의 Footer 는 블로그 포스트에 관한 Footer 정보가 된다.
Footer Element 는 주로 페이지나 Section 의 마지막에만 사용하는 것은 아니다.   

아래는 스타일시트가 적용되어 있지는 않아 썰렁하지만, Blog Site 의 Header 와 Footer 를 표현해 보았다.

3. Text 의미 부여 Element
Text 의미 부여 Elemnet 에는 a, em, strong, small, cite, i, b, span 등 여러 Element들이 있다. 그 중 HTML 5 에 추가된 대표적인 mark, date Element 에 대해서 알아보도록 하겠다.

3-1. mark Element
mark Element 는 설명을 위해 특정키워드를 강조한다거나 인용문의 일부를 강조하기위해 또는 검색결과의 검색 키워드를 강조하는등의 시각적 주목효과를 Text 에 주려 한다는 것을 표현하기 위해 사용한다.

보는 바와 같이 mark Element 를 사용하여도 외관상 Browser 에는 나타나지 않는다. 외관은 CSS 를 사용하여 표현을 해야할 것이다.

3-2. Time Element
Time Element 는 Browser 나 Robot 등이 시간을 정확히 이해할 수 있어야 한다는 것을 전제로 만든 Element 라고 한다. 그러므로 애매한 시점을 나타내는 표현에 이 Element를 사용하면 안된다.

Time Element 표현하는 방법은 아래와 같다.

Summary Element 는 Open 속성을 가지고 있는데 이 속성은 Details Element 의 상세정보를 기본적으로 보여줄지, 숨길지 여부를 나타낸다.

위 Markup 과 그림을 보면 알수 있 듯이 단순히 Text 를 표시하고 있는데... 내용을 표시하고 숨기는 기능은 javascript 를 사용하여 제어한다.

아래 Site 를 참고 해보면 어떨까?  ^^
http://remysharp.com/demo/details-with-js.html

 
4-2. Menu Element 와 Command Element
Command Element는 사용자가 호출할 수있는 명령을 나타낸다.
아래 그림과 같은 명령아이콘을 구성할 수 있을 것이다.

Menu Element 는 Form Control List 나 Command List 를 만들때 사용하는데 Command Element 는 Menu Element 내에 포함시켜 사용해야하며 Radio Button 이나 CheckBox, Button 을 이용하여 명령어 박스를 만들 수 있게 해준다.
Command Element 는 nav Element 와는 성격이 조금 달라서 URL 링크나 Form Action 을 처리하지 않는다.

아래는 Command Element 와 Menu Element 에 대한 MarkUP 예이다.