IT 기술 따라잡기

어제 세계 최고의 기획자로 부터 야바위 게임 스토리 보드를 전달 받았습니다.
기획자가 너무 훌륭해서 스토리 보드만 가지고도 충분히 코딩을 할 수가 있겠네요. ^^
기획자로부터 자세히 설명을 듣고 이렇게 스토리보드 까지 받았습니다.

이제 프로그래머는 나름대로 objects 들과 함수들에 대한 설계를 했을 테고 또 Flow Chart 를 그려서 어떻게 앱이 진행될지 그려 보았을 겁니다.

좀 더 완벽하게 준비하는 스타일의 개발자라면 Use Case 도 한번 정리 해 봤겠죠...
물론 이 내용들은 하나의 문서에 정리 돼 있겠구요.

이제 코딩을 시작하겠습니다.

display.setStatusBar(display.HiddenStatusBar)
-- Graphics-- [Background]
local bg = display.newImage('bg.png')

일단 아이폰에서 status bar 를 안보이도록 하구요.
백그라운드 이미지는 앱이 시작하면서 끝날때까지 유지 되니까 함수(function) 내가 아니라 이렇게 앱 시작하면서 display를 해 놓습니다.

그 다음엔 각 objects를 담을 변수들을 만듭니다.

-- [Title View]
local title; local playBtn; local creditsBtn; local titleView

여긴 게임 첫 화면에 나올 objects를 정리했습니다.
게임 제목과 플레이 버튼,크레딧 버튼이구요. 이 첫 화면 객체들을 담을 그룹으로 titleView를 사용할 겁니다.

-- [Credits]
local creditsView -- 첫 화면에서 나올 credit 이미지가 들어갈 변수입니다.

-- [Bank Credits]
local bank; local bankText

게임 화면에서 좌측 상단에 들어갈 숫자(bank)와 이미지(bankText) 변수 입니다.

-- [Shells]
local s1; local s2; local s3; local shells;

3개 shell에 대한 변수 이구요. 이 3개 shell 들을 담을 로컬그룹 변수 shells입니다.

-- [Ball]
local ball -- ball 이미지를 담을 변수입니다.
-- [Button Bar]
local buttonBar -- 아래 진한 색 네모를 표시할 이미지를 담을 변수입니다.
-- [Bet Button]
local betBtn     -- 게임 시작 버튼 이미지를 담을 변수 입니다.
-- [Message Text]
local msg        -- 왼쪽 아래 안내 문구를 담을 변수 입니다.
-- [GameView]
local gameView  -- Game 화면에 있는 모든 변수
-- [Alert]
local alert-- alert 이미지 담을 변수
local moveSpeed = 600  -- shell 움직이는 스피드
local totalMoves = 5      -- shell 움직이는 횟수

자 여기까지 야바위 게임에서 사용할 모든 objects에 대한 변수를 선언했습니다.
세계최고의 기획자가 스토리보드에서 언급한 모든 객체를 생성했구요.
또 프로그래머가 화면 전환할 때 사용하기 위해 각 화면별 objects들의 localGroup으로 사용할 변수들도 선언했습니다.
그리고 스피드,움직이는 횟수같은 개념적인 객체에 대한 변수까지 다 선언했습니다.
변수의 갯수가 총 20개네요.
20개의 objects들이 이 게임을 만들어 나갈겁니다.
출연자들이죠. 주연도 있고 조연도 있고...
이제 스토리보드 대로 (시나리오대로) 움직임을 만들 차례입니다.

그러기 위해 함수(메소드)를 선언합니다.

-- Functions
local Main = {}
local startButtonListeners = {}
local showCredits = {}
local hideCredits = {}
local showGameView = {}
local placeBet = {}
local randomShellMove = {}
local checkMovesLeft = {}
local revealBall = {}
local alert = {}

이 앱에서는 총 10개의 메소드가 사용됩니다.

-- Main Function
function Main()
    title = display.newImage('title.png', display.contentCenterX - 123, 40)
    playBtn = display.newImage('playBtn.png', display.contentCenterX - 25.5, display.contentCenterY - 10)
    creditsBtn = display.newImage('creditsBtn.png', display.contentCenterX - 40.5, display.contentCenterY + 45)
    titleView = display.newGroup(title, playBtn, creditsBtn)
  
    startButtonListeners('add')
end

첫번째 함수는 Main()함수입니다.
이 소스코드 맨 마지막을 보시면 이 메인 함수를 호출합니다.
Main() 부분이죠. 그러니까 이 앱은 이 Main()부터 시작합니다.
그러니까 첫화면에 display될 제목과 플레이/credit 버튼을 화면에 그립니다.
그리고 이 title화면의 객체들을 titleView라는 localGroup으로 그룹화 합니다.
(여기서 bg는 빠졌습니다. 왜냐하면 bg는 모든 화면에 다 등장할 거거든요.)

그리고 startButtonListeners()라는 함수에 add라는 인수를 전달하면서 호출합니다.

function startButtonListeners(action)
    if(action == 'add') then
        playBtn:addEventListener('tap', showGameView)
        creditsBtn:addEventListener('tap', showCredits)
    else
        playBtn:removeEventListener('tap', showGameView)
        creditsBtn:removeEventListener('tap', showCredits)
    end
end

메인에서 호출된 함수인데요.
메인에서 add를 인수로 던졌죠?
안에 내용을 보니까 add가 인수일 경우에는 플레이버튼과 크레딧 버튼에 리스너를 답니다.
플레이버튼을 누르면 showGameView() 함수를 실행하고 크레딧버튼을 누르면 showCredits() 함수를 실행하게 됩니다.
만약 인수가 add가 아니라면 이 두 리스너를 remove합니다.

우선 크레딧 버튼을 눌렀을 때 실행될 showCredits() 함수를 보겠습니다.

function showCredits:tap(e)
    playBtn.isVisible = false
    creditsBtn.isVisible = false
    creditsView = display.newImage('credits.png')
    transition.from(creditsView, {time = 300, x = -creditsView.width, onComplete = function() creditsView:addEventListener('tap', hideCredits) creditsView.x = creditsView.x - 0.5 end})
end

메인함수에서 크레딧 버튼을 누르면 실행되는 함수입니다.
처음에 플레이 버튼과 크레딧 버튼을 안 보이도록 만듭니다.
그리고 creditsView 이미지를 만들구요. 이 이미지를 transition합니다.
0.3초동안 왼쪽에서부터 서서히 나올 겁니다.
이미지가 다 나오면 이 이미지에 리스너를 답니다.
이 creditsView 이미지를 클릭하면 hideCredits() 함수가 실행 됩니다.

function hideCredits:tap(e)
    playBtn.isVisible = true
    creditsBtn.isVisible = true
    transition.to(creditsView, {time = 300, x = -creditsView.width, onComplete = function() creditsView:removeEventListener('tap', hideCredits) display.remove(creditsView) creditsView = nil end})
end

크레딧 이미지를 클릭하면 실행되는 함수 입니다.
아까 안 보이도록 했던 플레이버튼과 크레딧 버튼을 모두 다시 보이도록 합니다.
creditsView를 transition.to를 이용해서 왼쪽으로 사라지도록 합니다.
다 사라지면 아까 만들었던 creditsView에 대한 리스너를 remove합니다.

여기까지가 첫 화면에서 크레딧 버튼을 누르고 나서 다시 원래 화면으로 돌아오기 까지 진행시키는 함수들 입니다.

다음엔 첫 화면에서 플레이 버튼을 누르면 실행되는 showGameView() 함수입니다.
본격적으로 게임이 시작 되는 부분입니다.

function showGameView:tap(e)
    transition.to(titleView, {time = 300, x = -titleView.height, onComplete = function() startButtonListeners('rmv') display.remove(titleView) titleView = nil end})
    -- [Bank Credits]
    bank = display.newText('5', 18, 5, native.systemFontBold, 14)
    bank:setTextColor(234, 170, 12)
    bankText = display.newImage('bankText.png', 7.5, 25)

    -- [Ball]
    ball = display.newImage('ball.png', 228, 142)
  
    -- [Shells]
    s1 = display.newImage('shell.png', 50, 114)
    s2 = display.newImage('shell.png', 195, 84)
    s2.name = 's2'
    s3 = display.newImage('shell.png', 340, 114)
    shells = display.newGroup(s1, s2, s3)
  
    -- [Button Bar]
    buttonBar = display.newImage('buttonBar.png', 0, 270)
    msg = display.newText('Click Bet to start', 1, 307, native.systemFont, 9)
    betBtn = display.newImage('betBtn.png', 223, 275)
  
    betBtn:addEventListener('tap', placeBet)
  
    gameView = display.newGroup(bank, bankText, ball, shells, buttonBar, msg, betBtn)
end

실제 게임화면으로 넘어오면 처음에 실행되는게 이전 화면의 객체들을 없애는 작업입니다.
아까 첫 화면 객체들은 titleView라는 localGroup으로 그룹화를 했었습니다.
transition.to를 이용해서 이 titleView를 왼쪽으로 이동시키고 다 이동되면 startButtonListener에 rmv라는 인수를 전달하면서 실행시킵니다.
startButtonListener는 아까 add를 인수로 전달하면서 불렀던 함수인데요.
인수가 add가 아니면 첫 화면의 플레이버튼하고 크레딧 버튼의 리스너를 remove하도록 돼 있었습니다.
그러니까 첫화면의 객체들을 사라지게 하고 이 객체들에 할당된 리스너들도 다 remove 한 겁니다.
그 다음으로는 text를 출력할 bank를 만들고 위치시켜주고 색도 지정합니다.
그리고 bankText 이미지도 지정된 위치에 display합니다.
다음은 ball 이미지를 지정된 위치에 display하구요. shell 3개를 나란히 display합니다.
여기서 ball이 들어가 있게 될 shell은 별도로 name을 s2라고 할당합니다.
그리고 이 shell들을 shells라는 변수에 그룹화 시켜 놓습니다.
다음에 하단에 buttonBar를 표시하고 msg Text를 표시합니다.
그리고 betBtn을 표시하고 이 이미지에 리스너를 답니다.
이 이미지를 누르면 paceBet() 함수가 실행됩니다.
맨 마지막에는 이 게임 화면에 있는 모든 objects를 gameView변수로 그룹화 합니다.
나중에 화면전환 할 때 사용하기 위해서 입니다.


function placeBet:tap(e)  
    -- Place Bet
    bank.text = bank.text - 1;
    -- Remove Button Listener
    betBtn:removeEventListener('tap', placeBet)
    -- Change Msg
    msg.text = ''
    -- Reset Total Moves
    totalMoves = 5
    -- Hide Ball
    transition.to(s2, {time = moveSpeed, y = s2.y + 30, onComplete = randomShellMove})
end

betBtn을 누르면 실행 될 placeBet()함수입니다.
이 함수에서는 bank.text를 -1해서 다시 display합니다.
그리고 betBtn이미지의 리스너를 remove합니다.
다음으로는 msg.text를 아무것도 표시하지 않도록 고치구요.
shell이 몇번 움직일지 그 숫자를 다시 지정합니다.
(지금은 초기 설정값이랑 같은데 만약에 점점 더 움직이는 횟수를 늘리고 싶으면 이 부분에서 코딩해 주면 됩니다.)
다음은 s2를 아래로 내립니다. 그러면 공을 덮어서 안 보이게 됩니다.
완료 되면 randomShellMove() 함수가 호출 됩니다.

function randomShellMove()
    local randm = math.floor(math.random() * 2) + 1
  
    local shell1 = shells[randm]
    local shell2
  
    if(shell1 ~= 3) then
        shell2 = shells[randm + 1]
    elseif(shell1 ~= 1) then
        shell2 = shells[randm - 1]
    end
  
    ball.isVisible = false
  
    totalMoves = totalMoves -1
  
    transition.to(shell1, {time = moveSpeed, x = shell2.x, y = shell2.y})
    transition.to(shell2, {time = moveSpeed, x = shell1.x, y = shell1.y, onComplete = checkMovesLeft})
end

여기는 3개의 shell을 움직이는 로직입니다.
아마 이 앱에서의 핵심 부분일 겁니다.
이 로직은 여러분이 연구해 보세요.
이것보다 더 좋은 로직을 생각해 보셔도 되구요.
이 로직에 대한 해석은 생략하겠습니다.
하여간 로직대로 shell3개를 5회 움직입니다. 이때 ball은 안보이도록 하구요.
shell2가 다 움직이면 checkMovesLeft()를 호출합니다.

function checkMovesLeft()
    if(totalMoves > 0) then
        randomShellMove()
    else
        s1:addEventListener('tap', revealBall)
        s2:addEventListener('tap', revealBall)
        s3:addEventListener('tap', revealBall)
      
        -- Change Msg
        msg.text = 'Click where the ball is'
        msg:setReferencePoint(display.TopLeftReferencePoint)
        msg.x = -20
    end
end

이 함수에서는 totalMoves를 먼저 체크합니다. 0이 아니면 randomShellMove()함수를 다시 호출합니다. 이렇게 해서 총 5번 randomShellMove()함수가 실행 될 겁니다.
totalMoves가 0 이면 각 shell에 모두 리스너를 답니다.
tap 하면 revealBall함수가 실행되도록이요.
그리고 msg.text는 Click where the ball is 로 바꿔 주시고 그 위치를 바로 잡아 줍니다.

function revealBall:tap(e)
    -- Remove Shell Mouse Listeners
    s1:removeEventListener('tap', revealBall)
    s2:removeEventListener('tap', revealBall)
    s3:removeEventListener('tap', revealBall)
  
    -- Move Ball to correct position
    ball.x = s2.x + 75
    ball.y = s2.y + 150
    ball.isVisible = true
  
    -- Give credits if correct guess
  
    if(e.target.name == 's2') then
        bank.text = bank.text + 2
        -- Change Msg
        msg.text = 'Correct! Click Bet to play again'
        msg:setReferencePoint(display.TopLeftReferencePoint)
        msg.x = -20
    else
        msg.text = 'Wrong! Click Bet to play again'
        msg:setReferencePoint(display.TopLeftReferencePoint)
        msg.x = -20
    end

    -- Reveal Ball
    transition.to(s2, {time = moveSpeed, y = s2.y - 30})
  
    -- Add Bet button listener
    betBtn:addEventListener('tap', placeBet)
  
    -- Check for bank credits
    if(bank.text == '0') then
        betBtn:removeEventListener('tap', placeBet)
            alert()
    end
end

이 함수에서는 호출되면 일단 3개 shell에 할당된 리스너를 모두 remove합니다.
그리고 ball의 위치를 두번째 shell 즉 s2 안으로 위치시키고 이 볼이 보일 수 있게 합니다.
터치한 shell이 s2이면 즉 ball이 있는 shell이면 msg.text를 Correct! Click Bet to play again 으로 표시하고 그 위치를 바로 잡습니다. 그리고 s2가  아니면 Wrong! Click Bet to play again 을 표시하고 그 위치를 잡습니다.
그리고 s2를 transition.to를 이용해서 위로 올립니다. 그러면 ball이 나오겠죠?
이제 게임을 다시 시작할 수 있도록 betBtn에 리스너를 다시 달아줍니다.
만약 bank.text가 0 이면 그 리스너를 다시 없애고 alert() 함수를 실행합니다.

function alert()
    alert = display.newImage('alert.png')
    alert:setReferencePoint(display.CenterReferencePoint)
    alert.x = display.contentCenterX
    alert.y = display.contentCenterY
    transition.from(alert, {time = 300, xScale = 0.3, yScale = 0.3})
  
    msg.text = ''
  
    alert:addEventListener('tap', restart)
end

이 함수에서는 alert이미지를 transition.from을 이용해서 display하구요.
msg.text를 아무것도 표시 안 합니다.
그리고 이 alert이미지에 리스너를 달아서 tap하면 restart()함수가 실행되도록 합니다.

function restart()
    display.remove(gameView)
    gameView = nil
    display.remove(alert)
    alert = nil
  
    Main()
end
이 함수에서는 게임화면에 있는 모든 객체들(gameView)을 remove합니다.
그리고 alert화면도 remove합니다.
그리고 Main()을 실행시켜 게임을 다시 시작하도록 합니다.

Main()
이 부분은 앱이 처음 시작할 때 Main()을 호출하는 부분입니다.

이번엔 야바위게임을 같이 살펴봤습니다.
게임 설계가 아주 모범적으로 잘 돼 있는것 같습니다.

저도 이 모범적인 설계를 배우고 싶어서 공부 자료로 사용했습니다.
코딩이 아주 깔끔하네요.

아래 원래 소스 파일이 있습니다.

이 훌륭한 정보를 같이 공유한 Carlos에게 고마움을 표해야 겠네요.

오늘은 Corona SDK 로 만든 돈 넣고 돈 먹기 게임을 공부해 보겠습니다.
예전에 장터에 가면 사발이 세개 있고 그 중 한개에 구슬이나 주사위를 넣은 다음 막 돌린 다음 그 주사위가 어디에 있는지 알아 맞추는 놀이가 있었죠?
야바위라고 어른들이 그러셨는데....

Carlos Yanez 라는 개발자가 이 야바위를 모바일 애플리케이션으로 개발 했습니다. Corona SDK로요.
그리고 그 소스를 공유했습니다.

제가 보기엔 아주 프로그램이 알차게 잘 돼 있는 것 같습니다.
이 소스코드를 분석하면 아주 공부가 잘 될 것 같습니다.
(그리고 이 야바위 게임이 전 세계적으로 있었나 보네요. 몰랐는데......)

아래 각 게임 화면들을 캡쳐 했습니다.

이걸 게임 개발 하기 전에 개발자가 받은 Story Board 라고 생각을 해 보죠.
아주 훌륭한 기획자라면 이렇게 디자인까지 다 된 스토리보드를 개발자에게 줄 거예요.
그런데 너무 그런거까지 기대하지 마세요. 디자인 까지는 안 되더라도 모바일 이미지 내 objects 배치해서 주는 기획자도 드물거예요.
그냥 볼펜으로 끄적인 스토리 보드만 줘도 감지덕지죠.
안 에 들어가는 Objects 들하고 있게 될 Event 들 하고 그 이벤트로 인해 진행되는 object 들의 behavior 만 잘 정리 되면 되죠 뭐.

하여간 아래 내용은 세계에서 최고로 개발자에게 편하게 기획하는 기획자가 만든 앱의 스토리보드라고 생각해 봐요 우리.

1. 첫 화면

Objects (객체들)

:  bg 배경이미지, title 게임 제목,  playBtn 플레이 버튼, creditsBtn 크레딧 버튼

Events/Behavior (이벤트)

: playBtn 누르면 현재화면 중 배경만 남고 모두 없어짐 -> 게임 화면으로 옮김

  현재 화면 객체들 왼쪽으로 slide 되면서 없어질 것

: creditsBtn 누르면 Credits를 보여 줌

  플레이와 크레디트 버튼 없어지고 크레디트 이미지가 왼쪽에서 slide 되면서 나옴

2. Credit 화면 (Credit 버튼 누르면 나옴)

Objects

: Credits 이미지

  나머지 bg와 title은 이전화면에서 없어지지 않고 그대로 있음

: Events/Behavior

  Credits 이미지를 클릭하면 이미지가 왼쪽으로 사라짐

  1번 화면이 다시 나옴

3. 게임 화면

objects

: bg 배경화면 그대로

: bank 왼쪽 상단 숫자, 처음엔 5자가 표시 됨

: bankText BANK 이미지

: ball

: s1/s2/s3 shell 3개

: buttonBar 밑에 진한 사각형

: msg 좌측 하단에 메세지, 처음에 Click Bet to start 가 표시 됨

: betBtn 게임 시작 버튼

Events/Behavior

betBtn 버튼에 tab 리스너를 담.

betBtn을 누르면

- Bank 숫자에서 -1을 함

- betBtn 리스너를 Remove 함

- msg 텍스트를 없앰

- 위로 올라간 shell 이 ball 을 덮음

- shell 을 총 5번 움직임. 움직임 속도는 600으로 함. 랜덤하게 움직임

4. Shell 이 다 움직이고 User 의 선택을 기다리는 화면, 선택한 후 화면

objects

: 게임 화면이므로 3번 게임화면과 똑 같음

Event/Behavior

: msg는 Click where the ball is 를 표시함

: 각 shell 에 리스너를 담

: 어떤 Shell 을 클릭해도 공이 있는 Shell이 올라감

: 공이 있는 Shell 을 클릭하면 bank+2를 해 줌, msg는 Correct! Click Bet to play again 을 표시해 줌

: 공이 없는 Shell 을 클릭하면 msg는 Wrong! Click Bet to play again을 해 줌

: betBtn 에 다시 리스너를 담,

: bank 가 0점이면 alert() 화면을 띄움

5. Game Over 화면 (Alert)

Objects
: alert 이미지
Event/Behavior
: msg는 표시 안 함
: alert 이미지에 리스너를 담
  클릭하면 게임을 재 시작 함


자 여기까지가 바로 세계에서 제일 훌륭한 기획자가 만든 스토리 보드 입니다.
기획에서 이정도만 해주면 개발자는 아주 편하겠죠?

이제 이 것을 토대로 Flow Chart 도 만들어 보고 Use Case 도 만들어보고 나름대로 함수(클래스) 설계도 해 보세요.

아마 그러면 실력향상에 아주 도움이 될 겁니다.

다음 시간엔 이 스토리 보드를 가지고 소스 코딩을 해 보겠습니다.

이전 글에 이어서 계속 HTML5 의 Form 에 대해 알아보겠습니다.

*** type="color"
이 기능도 아주 매력적인 기능입니다.
색을 유저가 고를 수 있게 도와주는 기능인데요. 단지 HTML의 Input 태그에서 type만 color로 해주면 됩니다. 너무 간단한데 아직까지는 Opera에서만 지원이 되나봐요.
어제 코드에 아래 코드를 추가해 주세요.
            <label for="background-color">Choose a calor for background(Opera 11 only) :</label>
            <input id="background-color" type="color" /> <br/>

이렇게 유저가 색을 고를 수 있구요. Other를 누르면 좀 더 다양한 색을 고를 수 있습니다.

*** type="range"
이 기능은 한정된 숫자 범위 중에 유저가 입력 없이 Drag나 Touch 로 숫자를 선택할 수 있는 기능입니다.
일반 웹페이지에서도 사용할 수 있겠지만 모바일에서 훨씬 유용하게 사용될 수 있을 것 같네요.
<label >Forget about writing, just slide.</label>
 <input type="range" min="1" max="10" step="1" value="1"/><br/>

number type 과 같이 미니멈,맥스멈, step을 설정할 수 있습니다. 물론 대부분의 input 에서 지원되는 value 도 지정할 수 있구요.
위 화면은 오페라 브라우저 입니다. 다른 브라우저들에서는 다르게 나올 수 있습니다. HTML5가 지원이 안 되는 브라우저에서는 안 나올 수도 있구요.
모바일에서는 안드로이드, 아이폰 모두 HTML5 를 지원하니까 다 제대로 나올 겁니다.

*** type="file"
파일 업로드 할 때 사용할 수 있습니다.
여러 파일을 한꺼번에 업로드 하는 것 을 지원 하려면 multiple을 사용하시면 됩니다.
실제로 업로드(서버로)를 하려면 Server side script 언어인 PHP,JSP,ASP 등을 사용해야 합니다.
<input type="file" name="multiplefieldupload" multiple /><br/>

*** datalist
사용자에게 여러 리스트 중에서 하나를 선택하도록 할 때 datalist 를 이용합니다.
이 경우 <input > 태그의 type은 text 이지만 이외에 list="aaa" 라고 따로 리스트를 지정해 줍니다.
그리고 <datalist id="aaa">로 datalist 태그를 만들고 그 안에 원하는 리스트를 넣으면 됩니다.
그리고 유저가 리스트 중 하나를 선택하면 이 값을 받아서 display 할 수도 있습니다.
예전에는 모두 javascript로 작성했는데 HTML내에서 아주 간단하게 처리할 수 있네요.
아래 코드를 넣어 보세요.
<label> <h6>요즘 인터넷에 떠도는 이명박 대통령이나 친인척 관련 비리 루머들이 있습니다. <br/>
                여러분은 이중 어느것이 진실이고 실제로 어느것이 이명박 대통령과 관계가 있다고 생각하시나요? :

</h6>
            <input type="text" name="mbbiri" list="mbbiri"/>
                <datalist id="mbbiri">
                    <option value="주가조작BBK실소유주">
                    <option value="내곡동사저비리">
                    <option value="부산저축은행비리">
                    <option value="4대강 비리">
                    <option value="인천공항매각비리">
                    <option value="삼화저축은행비리">
                    <option value="모두다 관련이 있다">
                    <option value="아무것도 관련이 없다">
                </datalist>
            </label> <br>
            <label> You have entered:
                <output onforminput="this.value=mbbiri.value" />
            </label><p>

브라우저에서 실행합니다.

유저가 textbox를 선택하면 프로그램적으로 얘기하면 이 textbox가 활성화 되면 이렇게 리스트가 출력 됩니다.

그리고 유저가 이 리스트 중 아무거나 선택을 하면 그 선택한 값을 이렇게 출력 할 수도 있습니다.

조금 정치적인 예문이었죠?

인터넷 뉴스 보면 나오니까... 들은 얘기들인데... 내 생각은 말 못하겠어요... ^^

그래서 급하게 '아무 말 못하겠다'를 하나 더 만들어서 그걸 선택해 버렸네요.

쫄지 말아야 되는데... :)

아 그리고 론스타 비리, 디도스 부정선거 비리도 있는데 깜빡했다.. 아쉽네...

지난번에도 썼었는데..

학생은 하라는 공부하고 직장인들은 경제를 위해서 열심히 일해야 합니다.

그리고 국민들은 열심히 정치에 참여해야 합니다.   ^^

이 기능도 오페라 브라우저에서는 잘 됩니다. 그런데 다른 브라우저에서는 잘 되는지 모르겠네요. 제가 테스트하던 크롬에서는 안되네요.

***  placeholder

input box를 보면 미리 연한 글씨로 글자가 쓰여져 있는 경우가 있습니다. 유저가 그 textbox를 클릭하면 이 연한 글자는 지워지고 유저가 원하는 글자를 입력할 수 있게 되는데요. 이 연한 글자(guide)가 나오도록 하는 것이 placeholder 입니다.

<input type="text" placeholder="Type Anything"> <p>

보시면 맨 아래 input box에 Type Anything이라는 글자가 미리 나와 있죠?

*** Required

회원가입을 하다보면 id, password 같은 것들은 필수 입력 항목입니다.

이 필수 입력항목을 넣지 않고 버튼을 누르면 이 입력 항목을 넣으라는 메세지가 나오죠?

예전에는 이것을 모두 JavaScript로 했는데 HTML5에서는 자체적으로 이 기능을 제공하고 있습니다.

방금 전 placeholder 했던 tag에 required 를 넣어 보세요.

<input type="text" placeholder="Type Anything" required> <p>

이렇게 Required 를 한 input box에 아무것도 안 넣고 버튼을 누르면 값을 넣으라고 메세지가 나옵니다.

브라우저 마다 똑 같이 나오는 것은 아닙니다. 처음 것은 Opera 이고 두번째 것은 Chrome 입니다. 기능은 제공하지만 모양이나 문구는 다르게 나옵니다.

*** date,time,month,week

유저에게 날짜등을 입력받을 때 달력이 뜨게 하는 기능이 있습니다.

아직까지는 이 기능 구현할 때 아주 복잡한 자바스크립트를 사용합니다.

하지만 HTML5에서는 아주 간단하게 이런 기능을 구현할 수 있습니다.

다만 이것도 오페라 브라우저에서만 지원이 되는 것 같습니다.

<label> Choose a date :
            <input type="date"/>
            </label><br/>
            <label> Choose a time :
            <input type="time"/>
            </label><br/>
            <label> Choose a month :
            <input type="month"/>
            </label><br/>
            <label> Choose a week :
            <input type="week"/>
            </label><br/>

이렇게 해당 칸을 클릭하면 달력이 뜹니다. 그냥 단지 type="date" 했을 뿐인데 아주 근사한 달력이 제공 되네요. (오페라에서만.. 아직 까지는...)

보시다 시피 date 타입은 연월일, month 타입은 연월 그리고 week 타입은 선택한 주가 1년중 몇번째 주인지가 나옵니다.

time은 1~24시간이 표시됩니다. 분단위로 위아래로 움직일 수 있고 직접 type 도 가능합니다.

여기까지 HTML5이 Form 에 대해서 알아 봤습니다.

그럼.. 새해 복 많이 받으세요....