반응형
블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
솔웅

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

카테고리


반응형
Corona SDK로 게임을 만들 때 어떻게 Level별 Lock 기능을 걸고 푸는지에 대해 샘플을 보면서 공부 해 보겠습니다.

오늘 소스는 개발자 peach pellen 이 만들고 공유한 소스코드입니다.
http://peachpellen.com/ 로 가면 많은 정보들도 있구요. 우리의 peach가 열심히 만들어서 공유하고 있는 다른 정보들도 접할 수 있습니다.
가서 댓글로 고마움을 표시하는 것도 좋은 일 인것 같습니다.

원본 파일은 아래에 올리겠습니다.


우선 main.lua를 보겠습니다. (지면을 줄이기 위해서 필요없는 주석은 지울께요.)
display.setStatusBar (display.HiddenStatusBar)
local director = require ("director")
local mainGroup = display.newGroup()
local function main()
    mainGroup:insert(director.directorView)
    director:changeScene("menu")
    return true
end
main()
첫째줄은 늘 그래왔듯이 iPhone의 status bar를 없애는 라인이구요.
두번째 라인은 director.lua 클래스를 require한 라인입니다.
이 director클래스는 일반 개발자가 만든 화면 전환용 클래스죠?
얼마전 코로나에서 화면전환용 api인 storyboard api를 제공하기 시작했으니 그 api를 사용해도 될 겁니다.
이 소스는 그 api가 나오기 이전에 만들어진 것이니 그대로 director 클래스를 사용하겠습니다.
director 클래스에 대해서는 이전에 살펴 본 적이 있으니 따로 설명하지는 않겠습니다.
세번째 줄은 mainGroup이라는 그룹을 만든것이고 그 다음줄에 main() 함수를 만들었습니다.
이 함수 안에서 mainGroup에 directorView를 insert합니다.
그 다음에 changeScene으로 menu.lua 파일로 스크린을 옮깁니다.
화면전환 효과는 아무것도 사용하지 않았네요.
마지막 줄은 이 main함수를 call 해 주는 겁니다.

이젠 그럼 menu.lua를 볼까요?

module(..., package.seeall)
-- BELOW is Director code
function new()
    local localGroup = display.newGroup()
-- ABOVE is Director code

require "saveit"

-------------------------------------------------------------------------
-------------------------------------------------------------------------
-------------------------------------------------------------------------
local function resumeStart()
            local path = system.pathForFile( "ourdata.txt", system.DocumentsDirectory )               
                local file = io.open( path, "r" )

                if file then
                    print("Loading our data...")
                    local contents = file:read( "*a" )
                    -- Loads our data
                   
                    local prevState = explode(", ", contents)

                        _G.onelock = prevState[1]
                        _G.twolock = prevState[2]

                    io.close( file )

                else
                    _G.onelock = 1
                    _G.twolock = 0
                end
            end
            -- Separates the variables into a table
 
local function onSystemEvent( event )
        if( event.type == "applicationExit" ) then             
                local path = system.pathForFile( "ourdata.txt", system.DocumentsDirectory )               
                local file = io.open( path, "w+b" )
                -- Creates the file where we save our data
               
                file:write( _G.onelock ..", ".. _G.twolock)         
                io.close( file )
            end
        end
        -- Saves our data

--BELOW THIS LINE IS ANSCA'S SAMPLE CODE (I don't mess with perfection)
-- explode helper function zomgdata
function explode(div,str)
  if (div=='') then return false end
  local pos,arr = 0,{}
  -- for each divider found
  for st,sp in function() return string.find(str,div,pos,true) end do
    table.insert(arr,string.sub(str,pos,st-1)) -- Attach chars left of current divider
    pos = sp + 1 -- Jump past current divider
  end
  table.insert(arr,string.sub(str,pos)) -- Attach chars right of last divider
  return arr
end
 
local function init()
        -- start and resume from previous state, if any
        resumeStart()  
        
        Runtime:addEventListener( "system", onSystemEvent )    
end
 
 
--start the program
init()
--ABOVE THIS LINE IS ANSCA'S SAMPLE CODE (You don't need to change it, so don't!)

----------------------------------------------------------------------
--                                SCENE SETUP                            --
----------------------------------------------------------------------
local background = display.newImage ("background.png")
localGroup:insert(background)
-- Sets the background

local leveloneicon = display.newImage ("level1icon.png")
leveloneicon.x = 50
leveloneicon.y = 40
localGroup:insert(leveloneicon)
-- Sets the icon for level one

local function gotoone (event)
director:changeScene("level1")
end
leveloneicon:addEventListener("tap", gotoone)
-- Go to level one when icon is tapped

local function gototwo (event)
director:changeScene("level2")
end
-- Function to go to level two

local function seticontwo (event)
if _G.twolock-0 == 0 then
local leveltwoicon = display.newImage ("level2locked.png")
leveltwoicon.x = 130
leveltwoicon.y = 40
localGroup:insert(leveltwoicon)
elseif _G.twolock-0 == 1 then
local leveltwoicon = display.newImage ("level2icon.png")
leveltwoicon.x = 130
leveltwoicon.y = 40
localGroup:insert(leveltwoicon)
leveltwoicon:addEventListener("tap", gototwo)
end
end
seticontwo()

----------------------------------------------------------------------
----------------------------------------------------------------------
-- BELOW is Director code
    -- MUST return a display.newGroup()
    return localGroup
end
-- ABOVE is Director code

모듈로 사용되기 위해 필요한 부분이 맨 처음 줄이구요.
그 다음은 Director클래스를 사용하기 위해 new()함수 안에 모든 코드를넣고 localGroup이라는 그룹을 만든 겁니다.
다음엔 saveit.lua파일을 require했습니다.
짧으니까 잠깐 saveit.lua 파일을 볼께요.
module(..., package.seeall)
function save( event )          
                local path = system.pathForFile( "ourdata.txt", system.DocumentsDirectory )               
                local file = io.open( path, "w+b" )
                -- Creates the file where we save our data if needed
                file:write( _G.onelock ..", ".. _G.twolock)         
                io.close( file )
                -- Saves our data
end
첫줄은 마찬가지로 모듈로 사용되기 위해 필요한 라인이구요. 그 다음에 save(event) 함수를 구현했습니다.
event가 인수로 있는 것으로 봐서 어떤 리스너에서 불러오지 않나 생각되네요.
함수 내용은 ourdata.txt를 쓰기 가능으로 열고 그 파일 안에 _Gonelock,_Gtwolock을 씁니다. 그리고 저장하면서 닫습니다.

이 기능이 menu.lua 어느곳에선가 불려져서 사용 될 겁니다.
다시 menu.lua로 넘어올께요.

첫번째로 resumeStart()함수를 보겠습니다.
이 함수에서는 ourdata.txt라는 파일을 엽니다.
만약 이 파일이 있으면 "Loading our data..." 라는 문장을 터미널에 print합니다.
그리고 파일 안의 내용을 읽어오구요.  explode 함수를 사용해서 쉼표 , 를 기준으로 파일 안의 내용을 나눕니다.
_G.onelock 에 첫번째, _G.twolock 에 두번째 내용을 저장합니다.
그리고 파일을 닫습니다. (이 때 저장됩니다.)
만약 파일이 없다면 (이 앱이 처음으로 실행 되는 경우가 됩니다.)
_G.onelock 에 1을 _G.twolock에 0을 넣습니다.

두번째로 onSystemEvent(event)함수를 알아볼까요?
이 함수는 event를 인수로 받기 때문에 어떤 리스너에서 Call하는 걸 겁니다.
밑에 보니까 앱이 최초로 실행 될 때인 Runtime 리스너에서 call하네요.
 Runtime:addEventListener( "system", onSystemEvent )
이 함수 내용을 보면 event.type 이 applicationExit일 경우 그러니까 앱이 종료 될 때 if 문 안에 있는 내용들이 실행 됩니다.
그 내용은 ourdata.txt를 쓰기 가능으로 열고 그 안에 _G.onelock,_G.twolock을 저장하고 파일을 닫습니다.
이 내용은 saveit.lua의 내용과 똑 같네요. 이렇게 중복된 코딩은 그렇제 좋은 방법은 아니죠. 저 같으면 이 내용도 saveit.lua 파일 안에 있는 함수를 call 해서 사용할 것 같습니다.
어쨌든 이 소스코드 분석을 하자면 그렇고.. 압축파일을 열어보시면 그 아래 peach가 직접 주석을 달아서 설명한 부분이 있으니까 한번 읽어 보세요.

그 다음엔 explode(div,str) 함수가 있습니다.
그 내용은 div 가 아무 내용이 없으면 false를 return 하구요.
아니면 pos와 arr을 0과 {} (테이블)로 선언합니다.
그리고 for문을 돌려 arr 테이블에 나누는 기준에 따라 string을 나눠서 저장합니다.
마지막엔 이 arr 테이블을 return합니다.

다음 함수는 init()함수인데요. resumeStart()함수와 런타임 리스너로 onSystemEvent를 call합니다.

그 밑에선 init()함수를 call 하고 있네요.

여기까지만 보면 최초로 init()이 불려지고 그 다음에 resumeStart() 그리고 onSystemEvent 함수가 불려지겠네요.

그 다음은 화면 셋업 부분입니다.
백그라운드 이미지를 표시하고 level1icon 이미지를 표시합니다. 그리고 두 이미지 모두 localGroup에 insert합니다.

그 다음은 gotoone(event)함수인데요. 이건 바로 아래 leveloneicon의 tap리스너에서 call 됩니다. 그 내용은 level1.lua화면으로 넘어 가는겁니다.

다음은 gototwo(event)함수로 내용은 level2.lua 화면으로 넘어가는 건데요. 이 함수는 seticontwo(event) 함수 내에서 call 됩니다.

즉 gotoone 함수는 무조건 실행되고 gototwo함수는 seticontwo 함수에서 일정 조건에 부합되면 실행이 되겠네요.

그러면 seticontwo(event)함수를 살펴보겠습니다.
만약에 _G.twolock-0이 0이면 leveltwoicon이 level2locked.png로 설정이 되구요.
이 변수를 그룹에 insert합니다.
여기서 참고로 왜 -0을 했냐 하면요. 혹시 그 이전에 _G.twolock 변수가 string으로 처리 됐을 경우 == 0 같은 숫자 비교하는 부분이 에러가 날 수 있습니다.
그래서-0 을 해 주면 자동으로 int형으로 바꿔주기 때문에 따로 -0을 하지 않았나 생각되네요.
저도 그런 경험이 있거든요.
그리고 만약에 _G.twolock-0이 1이면 leveltwoicon은 level2icon.png가 되고 이 이미지를 tap할 경우 gototwo 함수가 실행 됩니다.

다음줄은 이 seticontwo()함수를 호출 한 겁니다.

그 다음줄은 director 클래스를 사용하려면 반드시 있어야 하는 부분인데요. localGroup을 return하는 겁니다.

이제 주요 내용은 다 본 겁니다.

level1.lua를 한번 볼까요?
module(..., package.seeall)

function new()
    local localGroup = display.newGroup()

----------------------------------------------------------------------
--                                SCENE SETUP                            --
----------------------------------------------------------------------
local background = display.newImage ("background.png")
localGroup:insert(background)
-- Sets the background

local unlockbutton = display.newImage ("unlock2.png")
unlockbutton.x = 160
unlockbutton.y = 140
localGroup:insert(unlockbutton)
-- Image of unlock button

local lockbutton = display.newImage ("lock2.png")
lockbutton.x = 160
lockbutton.y = 240
localGroup:insert(lockbutton)
-- Image of lock button

----------------------------------------------------------------------
--                            FUNCTIONALITY                            --
----------------------------------------------------------------------

local function onewin (event)
print "Level 2 is now unlocked! :)"
_G.twolock = 1
saveit.save()
director:changeScene("menu")
end
unlockbutton:addEventListener("tap", onewin)

local function onefail (event)
print "Level 2 is now locked! :("
_G.twolock = 0
saveit.save()
director:changeScene("menu")
end
lockbutton:addEventListener("tap", onefail)

----------------------------------------------------------------------
----------------------------------------------------------------------
-- Below is the standard stuff, commented in MENU.LUA
    -- MUST return a display.newGroup()
    return localGroup
end

마찬가지로 첫줄은 모듈로 쓰이기 위해서 필요한 라인이구요. 그 다음 두 줄은 dorector.lua클래스를 사용할 때 반드시 있어야 되는 부분이구요.

다음은 화면 셋업하는 부분입니다.
백그라운드, unlockbutton, lockbutton 세개 이미지를 셋업합니다.

그 다음은 함수들인데요.
onewin(event)함수는 unlockbutton을 tap했을 때 불려지는 함수입니다.
그 내용은 터미널에 "Level 2 is now unlocked! :)" 를 프린트 해 주고 saveit.lua파일에 있는 save()함수를 실행시킵니다. 그리고 menu.lua로 돌아가구요.

두번째 함수는 onefail(event)인데요. 이건 lockbutton 이미지를 tap하면 call되는 함수입니다.
내용은 "Level 2 is now locked! :(" 를 터미널에 프린트 해 주고 _G.twolock을 0으로 해 줍니다. 그 다음 save.save() 함수를 call하고 menu.lua 내용을 화면에 뿌려 줍니다.

다음은 마찬가지로 director.lua 클래스를 사용할 때 있어야 하는 규칙으로 localGroup을 return하구요.

마지막으로 level2.lua를 보시죠.
module(..., package.seeall)
-- Main function - MUST return a display.newGroup()
function new()
    local localGroup = display.newGroup()
----------------------------------------------------------------------
--                                SCENE SETUP                            --
----------------------------------------------------------------------
local background = display.newImage ("background2.png")
localGroup:insert(background)
    return localGroup
end

여기는 특별한 부분 없이 그냥 background 이미지를 출력하는 부분만 있습니다.

이제 게임 중 Level별로 Lock하고 Lock을 해제하고 하는 부분들을 이해하시겠죠?


Lock이 풀리면 맨 마지막에 우리의 Peach 사진을 볼 수가 있네요.
전 얘가 남자인지 여자인지 확실히 모르겠어요. 20대 초반에 시드니에 살고 있다고 하던데..
http://peachpellen.com/about/
하여간 얘가 운영하는 홈페이지가 아래에 있습니다.
http://techority.com/
저하고는 관계가 없지만 얘가 share한 소스코드로 제가 공부를 많이 했고 또 여러분에게도 소개해 드리고 해서 이렇게 소개 드립니다.

이 세상을 경쟁으로 생각하기 보다는 이렇게 서로서로 돕자는 마음으로 하면 더 좋을 것 같아서.. 홈페이지 들어가주고 내용 봐주고 필요하면 이용해 주고 힘 주는 댓글 남겨주고 하는게 우리들이 도움 받은거 은혜 갚는거 같애서... ^^

하여간 여러분들도 즐팅 하세요....
반응형

HTML5 CSS Text shadow, translate 효과 등등

2011. 12. 14. 23:38 | Posted by 솔웅


반응형

지난 시간 사용했던 소스를 그대로 사용하겠습니다.
일단 7th.html 파일을 만들어서 아래 코드를 넣으세요.
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title> Dougy's HTML5 </title>
    <link rel="stylesheet" href="main04.css">
</head>
<body>
    <div id="box">
        <p id="text"> Text Test. </p>
    </div>
</body>
</html>

그리고 main04.css 파일을 아래와 같이 만드세요.
body{
    text-align:center;
}
#box{
    display:block;
    width:500px;
    margin:50px auto;
    padding:15px;
    text-align:center;
    border:1px solid blue;
    background:orange;
    -webkit-border-radius:25px;
    -webkit-box-shadow:rgb(110,110,110) 10px 10px 10px;
}
#text{
    font:bold 30px Century Gothic;
    text-shadow:rgb(110,110,110) 3px 3px 5px;
}


어제하고 조금 다를거예요. 아래 부분이 추가 됐거든요.
text-shadow:rgb(110,110,110) 3px 3px 5px;

어제는 box에 그림자 효과를 준 것인데 오늘은 텍스트에 그림자 효과를 줬습니다.

이제부터 할 일은 박스에 그라디언트를 줄 겁니다.
    background:orange; 이 부분을 아래처럼 바꿔보세요.
background:-webkit-radial-gradient(center,circle,red 0%,orange 50%);

이 코드는 가운데서부터 원 모양으로 빨강->오렌지까지 그라디언트 효과를 주라는 의미입니다.
red 0%는 빨강색이 시작하자마자 그라디언트가 시작된다는 거구요 오렌지 50%는 50%는 그리디언트가 아니라 완전히 오렌지색이 표시 되도록 하라는 의미입니다.
background:-webkit-linear-gradient(top,black,white)
위 코드도 한번 시도해 보세요. (직접 확인해 보세요. 설명은 생략할께요.)

박스나 텍스트 색을 만들 때 rgb를 사용했습니다. 여기에 투명도까지 조절하고 싶으시면 rgba 를 사용하시면 됩니다.
    -webkit-box-shadow:rgba(110,110,110,.6) 10px 10px 10px;
이 코드를 사용하면 박스의 그림자가 60% 투명해 져서 좀 더 연하게 나올 겁니다.

이제 조금 다른 효과를 볼께요.
우선 html과 css 파일을 새로운걸로 바꾸겠습니다.
html은 8th.html로 해 주시고 7th.html에서 css를 main05.css로 바꿔주세요.
body{
    text-align:center;
}
#box{
    display:block;
    width:500px;
    margin:50px auto;
    padding:15px;
    text-align:center;
    border:7px solid blue;
    background:yellow;
    outline:7px solid red;
}
#text{
    font:bold 30px Century Gothic;
    text-shadow:rgb(110,110,110) 3px 3px 5px;
}


새로운 코드는 outline 입니다. 보시면 border랑 똑 같은데 제목이 outline 으로 합니다.

그러면 border 바깥쪽으로 outline이 그려집니다.


다음은 transform 에 대해 알아 보겠는데요.

-webkit-transform:scale(1.5)

-webkit-transform:scale(1,3)

-webkit-transform:scale(-1.1)

이 3개를 하나하나씩 한번 대입해 보세요.

첫번재는 전체 box 크기가 커질것이고 두번째는 아래위 로만 3배 커질 겁니다. 그리고 3번째는 박스가 오른쪽 왼쪽이 바뀌어질 겁니다. 거울에 비치듯이요. 그러면 글자도 그렇게 나오겠죠?

직접 한번 확인해 보세요.

그리고 아래 코드를 한번 넣어 보세요.

-webkit-transform:skew(30deg);

박스가 옆으로 눕네요. 우리의 bucky (thenewboston.com)는 이 기능은 하등의 쓸모가 없다고 쓰지 말라고 하네요.


다음은 translate에 대해서 알아보겠습니다.

-webkit-transform:translate(150px, 300px); 의 의미는 x방향으로 150픽셀 y방향으로 300 픽셀 움직이라는 의미입니다.

그러면 아래처럼 한번 해 보세요.

-webkit-transform:translate(100px,100px)rotate(30deg) scale(.8);

이 의미는 뭘까요?

x방향으로 100픽셀, y 방향으로 100픽셀 움직이고 30도 회전시키고 크기는 80%로 줄이라는 의미입니다.



위 조건이 모두 적용된 화면입니다.

CSS에서 이런 기능까지 적용이 된다면 간단한 애니매이션 기능도 구현할 수 있지 않겠어요?

웬만한 플래쉬 효과는 줄 수 있을 것 같습니다.


다음 글에서는 애니메이션 효과를 한번 공부해 보도록 할께요.

아주 훌륭한 기능이 여러분들을 기다리고 있습니다. ^^

반응형

Sencha Touch Road Show 를 다녀와서....

2011. 12. 14. 09:02 | Posted by 솔웅


반응형
안녕하세요?

오늘은 맨하튼에서 있었던 Sencha Touch Road Show를 다녀왔습니다.
9시30분부터 1시 30분까지 4시간 동안 진행 됐는데요.

중간에 샌드위치 스낵 커피 음료 등을 마음껏 먹을 수 있어서 좋았어요.
강의가 3개 있었는데 일반적인 HTML5 관련한 강의와 Sencha Touch 전반적인 사항 그리고 개발자가 나와서 예제 프로그램 설명하는 시간을 가졌었습니다.

자세히 필기하지 않아서 꼼꼼하게 정리는 못하지만 그나마 생각나는것들은 정리해 두는게 나중에라도 참고할 수 있고 더 좋을 것 같네요.

sencha 회사 홈페이지는 http://www.sencha.com/ 입니다.
products - sencha touch 메뉴로 가면 sencha touch를 다운 받을 수 있는데요.
지금은 1.0 버전과 1.1.1 버전이 다운 가능합니다.

이번에 참가자들에게 아직 공개 되지 않은 sencha touch 2.0 을 소개해 줬습니다.
위에 링크를 따라 가시면 다운 받으실 수 있을 겁니다.

그리고 조만간 Sencha Designer 도 개발 할 예정이라고 합니다.
Sencha Designer는 드림위버나 비쥬얼 베이직 같이 쉽게 개발할 수 있는 툴입니다.
Sencha 는 ExtJS 도 만들어 낸 회사인데요. 이미 ExtJS는 Ext Designer 가 나와 있습니다.

Sencha Designer가 궁금하시면 이 Ext Designer를 보시면 될겁니다. 같은 회사인데 비슷한 UI 일것 같네요.

오늘은 한 50여명이 참가했는데요. 강의마다 질문들이 꼬리를 이어서 이곳 개발자들의 열정을 느낄 수 있더라구요.

HTML- JAVA Script 관련 디버깅 툴을 누군가가 질문을 했는데 개발자가 Phantom JS 가 좋은 것 같다면서 추천해 주더라구요.
관심 있으신 분들은 가서 살펴 보세요.

예제를 다뤄준 마지막 강좌 파워포인트는 아래 올려 놓을 께요.


yelp.com 이란 곳에서 샌프란시스코의 store 정보를 얻어와서 보여주는 웹앱입니다.
그 contents는 한국에서는 별로 쓸모가 없었지만 개발 소스나 방법등을 배우기에는 좋을 것 같습니다.

앞으로 Corona SDK 와 HTML 5 , Sencha Touch 로 이 블로그를 채워 나갈 것 같습니다.
그리고 추가한다면 Phonegap이 있을 수 있겠구요.
좀 바쁘겠네요..

컨퍼런스가 증권거래소 근처에서 열렸었거든요.
끝나고 나오니까 증권거래소 앞 크리스마스 트리가 멋있게 서 있어서 한 카트 찍었습니다.

질문이나 의견 제안 어떤 것이든 댓글 달아 주세요. 저도 배우는 과정이니까 같이 알아보면 서로 도움이 될 것 같아요..

그럼..
반응형

CSS3 Rounded Corner, 그림자 효과 사용하기

2011. 12. 12. 23:37 | Posted by 솔웅


반응형
요즘 계속 공부 하고 있는 부분이 CSS3 입니다.
정확히 HTML5는 아니지만 HTML은 CSS와 자바스크립트와 더불어서 더 잘 사용 될 수 있기 때문에 CSS와 자바스크립트도 반드시 알아야 할 기술입니다.
CSS3 는 2005년 이후 부터 지금까지 계속 개발 되고 있다고 합니다. 아직 완료되거나 공식적으로 표준으로 인정되거나 뭐 그런건 아니라서 모든 브라우저에서 다 지원하는 것은 아닙니다.
대개 크롬에서 많은 기능을 지원하고 있습니다.

지난 시간에 이어서 계속 CSS3를 공부 하겠습니다.
우선 아래와 같이 HTML파일을 만드세요.
(제 파일 이름은 6th.html 하고 main03.css 입니다.)
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title> Dougy's HTML5 </title>
    <link rel="stylesheet" href="main03.css">
</head>
<body>
    <div id="box">
        <p id="text"> Text Test. </p>
    </div>
</body>
</html>

그리고 main03.css를 아래와 같이 만듭니다.

body{
    text-align:center;
}
#box{
    display:block;
    width:500px;
    margin:50px auto;
    padding:15px;
    text-align:center;
    border:1px solid blue;
    background:orange;
}
#text{
    font:bold 30px Century Gothic;
}


그럼 이와 같은 모습이 나옵니다.
이제 이 네모 박스를 좀 꾸며 보겠습니다.

#box 안에 아래 코드를 추가해 보세요.
-webkit-border-radius:25px;
그리고 재실행 하시면 사각형 모서리가 곡선으로 처리됩니다.
한가지만 더 해 볼까요?
-webkit-box-shadow:rgb(110,110,110) 8px 8px;
이것은 그림자 효과인데요 그림자 색은 rgb로 표현됩니다. 그 다음은 오런쪽으로 8픽셀 아래로 8픽셀 더 가서 그리라는 의미 입니다.


아주 보기 좋은 박스가 그려졌습니다.
그림자 효과를 아래처럼 줘 보세요.
    -webkit-box-shadow:rgb(110,110,110) 10px 10px 10px;

shadow 효과의 3번째 인수는 blur 효과를 주는 기능입니다.

맨 마지막에 inset을 추가해 보세요.

    -webkit-box-shadow:rgb(110,110,110) 10px 10px 10px inset;



그러면 그림자 효과가 박스 안쪽으로 나타나게 됩니다.

오늘은 간단히 여기까지 하구요.
다음 글에선 박스 안에 그라데이션 효과를 주는 법을 공부 하겠습니다.
반응형

웹앱 (WEB APP) 관련 메모 정리

2011. 12. 11. 02:21 | Posted by 솔웅


반응형
웹 앱을 공부하려고 했는데 파고 들면 들수록 이쪽도 알아야 될게 아주 많고 생각보다 분야가 다양하네요.
일단 잊어버리기 전에 관련 용어와 개념들을 정리한 다음에 차근차근 공부해 나가야 겠어요.

모바일 웹 , 앱, 하이브리드 앱에 대해 메모 해 둬야 겠습니다.

- 모바일 웹
   : 일반 브라우저를 통한 서비스
  장점
  : 기존 HTML을 그대로 사용할 수 있다.
  : 개발, 유지보수가 용이하다.
  : 개발비용이 일반 앱개발보다 저렴하다.
  단점
  : 폰의 다양한 센서, 기능을 활용하기 어렵다.
  관련 툴
  : JQTouch
    - 가볍고 빠른 기본 프레임웍, iOS에 최적화된 프레임웍
    - 확장 플러그인, 네이티브 웹킷 애니메이션, 간단한 테마 지원
  : JQueryMobile
    - JQuery 팀이 개발, 다양한 브라우저 호환성 지원, 멀티 스크린 지원
    - 많은 수의 UX 컨트롤 지원
    - 자동화된 프레임웍 구조
    - 모바일 웹서비스에 최적화
    - ARIA 표준지원
  : SenchaTouch
    - 강력한 라이브러리 제공, Sencha 스타일 컨트롤 제공
    - 자바스크립트 API 기반 개발, 모델 뷰 컨트롤러 구현(MVC)
    - iOS,Android,BlackBerry 6, 스마트폰과 타블렛 레이아웃 자동변환

- 앱
  : 일반적인 앱, 즉 Objective-C, JAVA, C#의 네이티브 프로그래밍 언어와 각 OS별 SDK 를 이용해서 개발
  장점
  - 폰의 다양한 센서, 기능을 활용할 수 있다.
  - 모바일웹에 비해 실행, 페이지 로딩 속도가 빠르다.
  단점
  - 개발 비용이 높다.

- 하이브리드 앱
  : 내부 콘텐츠를 HTML로 개발 (일반적으로 외부의 서버와 연동)
  : 외부 프레임은 네이티브 언어로 개발
   장점
   - OS별로 개발, 유지보수 부담이 작다.
   - 기존 HTML 형태의 콘텐츠를 사용할 수 있다.
   단점
   - 폰의 다양한 센서, 기능의 활용이 어렵다.
   특징
    - DB, 콘텐츠 중심의 서비스에 적합
    - 게임, 앱내 결제에는 부적합
    관련 툴
     - PhoneGap
       : 오픈소스 프레임웍, 플랫폼별 개발 탬플릿 제공
       : 6개의 모바일 플랫폼 지원, 네이티브 API 접근 지원, 플러그인 확정 지언
    - Appcelerator Titanium
       : 오픈소스 프레임웍, 대부분의 네이티브 API지원
       : 모바일, 데스크탑 앱 빌드, 웹 표준 기술 사용
       : 네이티브앱 빌드 (모바일), 통합 IDE 제공, Titanium Studio
    - Appspresso
       : 통합 개발환경 지원, Eclipse IDE, 향상된 네이티브 API 제공
       : iOS, Android, W3C Widget, JS frameworks 포함
       : WAC/Waikiki API, On The Fly Development
       : Plug-in Development Kit (PDK)

이런 구분과 특성과 개념과 용어와 관련 툴들이 있네요.
기본적으로 HTML5를 공부하고 다음에 웹앱 그리고 하이브리드 앱을 공부해 볼 생각입니다.

다음주 화요일(12월 13일 2011) 맨하튼에서 Sencha Touch 관련 컨퍼런스가 있습니다.
참가 신청해서 초청장 받았습니다.
무료이고 가면 커피도 주고 음식도 주고 관련 기술도 알려 준다고 합니다.


다녀와서 후기 올릴께요.

그럼...
반응형


반응형
어제 만들었던 소스코드도 그렇고...
웬만한 브라우저에서는 제대로 실행이 안 될 수 있습니다.
HTML5, CSS3 모두 새로운 기술들이고 아직 공식적으로 표준으로 인정되지 않은 것도 있고 해서 모든 브라우저가 다 지원하지는 않습니다.

제 컴에서도 크롬 (Chrome) 에서만 제대로 실행이 되더라구요.
이쪽 IT쪽이 워낙에 기술이 많이 나오고 또 빠르게 진행 되서 여러 새 기술 중에 살아남아서 더 대중화 될 만한 기술을 잘 선택해서 스펙을 만드는 것도 중요한 일입니다.

저도 웹에서 모바일로 옮겨온 게 2~3년 전인데 그 사이에 Android Native, Object C, Corona SDK를 거쳐 지금은 HTML5, CSS3, webkit-box,sencha touch 등등 많은 기술들을 익히고 있습니다.

하여간 모바일쪽이 대세일거라고 생각해서 그쪽 기술 습득에 매진하고 있습니다.
정보 수집력도 중요하고 결단력 실행력 모두 중요해요 이 바닥에서 계속 앞서 나가려면...
일단 배우기로 했으면 진도부터 쭉쭉 나가야 합니다.

그래서 오늘도 진도 나갑니다. 쭉 쭉~~~~

오늘의 HTML 소스코드는 아래와 같이 작성해 주세요.
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title> Dougy's HTML5 </title>
    <link rel="stylesheet" href="main02.css">
</head>
<body>
    <section id="mommy">
        <div id="kid1"> kid 1 </div>
        <div id="kid1"> kid 2 </div>
        <div id="kid1"> kid 3 </div>
        <div id="kid1"> kid 4 </div>
    </section>
</body>
</html>

그리고 공부할 부분인 css를 작성하겠습니다. main02.css입니다.
#mommy{
    border:2px solid blue;
    display:-webkit-box;
    -webkit-box-orient:horizontal;
}
#kid1{
    border: 2px solid red;
    background : green;
    padding:20px;
    margin:10px;
}
#kid2{
    border: 2px solid red;
    background : red;
    padding:20px;
    margin:10px;
}
#kid3{
    border: 2px solid red;
    background : blue;
    padding:20px;
    margin:10px;
}
#kid4{
    border: 2px solid red;
    background : yellow;
    padding:20px;
    margin:10px;
}


첫번째 mommy에서는 webkit을 적용했고 진행 방향은 horizontal로 했습니다.
그래서 위 박스들이 좌측에서 우측으로 표시된 겁니다.
나머지는 각 id별로 박스를 만들어서 그 안에 색을 채웠습니다.

mommy에 아래 내용을 추가해 보세요.
-webkit-box-direction:reverse;


그러면 보시는 것처럼 박스가 역순으로 표시 됩니다.
이제 mommy에 추가했던 -webkit-box-direction:reverse; 를 없애시구요.
kid1,2,3,4에 아래 코드들을 하나씩 추가하세요.
kid1 -> -webkit-box-ordinal-group: 3;
kid2 -> -webkit-box-ordinal-group: 1;
kid3 -> -webkit-box-ordinal-group: 4;
kid4 -> -webkit-box-ordinal-group: 2;

이러면 지정한 순서대로 박스가 나열 되죠?


이제 좀 다른 기능을 알아보죠. main02.css를 아래와 같이 고치세요.

#mommy{
    border:2px solid blue;
    display:-webkit-box;
    -webkit-box-orient:horizontal;
    width:700px;
}
#kid1{
    border: 2px solid red;
    background : green;
    padding:20px;
    margin:10px;
    width:60px;
}
#kid2{
    border: 2px solid red;
    background : red;
    padding:20px;
    margin:10px;
    width:60px;
    -webkit-box-flex:1;
}
#kid3{
    border: 2px solid red;
    background : blue;
    padding:20px;
    margin:10px;
    width:60px;
}
#kid4{
    border: 2px solid red;
    background : yellow;
    padding:20px;
    margin:10px;
    width:60px;
}

달라진 점은 모두 width를 지정했다는 겁니다. 그리고 kid2에게는 -webkit-box-flex:1; 을 적용했구요.

지난 글에서도 언급했듯이 1은 flexible하도록 하는 것이고 0은 고정돼 있는 겁니다.

kid2를 flexible하도록 설정했더니 남은 공간만큼 박스가 늘어났습니다.

여기서 kid1,2,3,4 모두 width를 없애고 -webkit-box-flex:1; 를 집어 넣으면 모두 일정한 크기로 공간을 채웁니다.

그리고 특정 박스의 크기를 유지하고 싶으면 1이 아니라 0을 대입하면 되구요.

그리고 전부 숫자를 1로 하시고 kid2 만 숫자를 2로 해 보세요.

그러면 kid2는 다른 박스보다 두배 크기로 됩니다.

숫자가 1,2,1,1 이 되면 이 숫자의 합이 5이니까 전체 공간을 5로 나눠서 두번째 박스는 2의 공간을 나머지는 1의공간을 할당하게됩니다.


#mommy{
    border:2px solid blue;
    display:-webkit-box;
    -webkit-box-orient:horizontal;
    width:700px;
    height:300px;
    -webkit-box-align:center;
}
#kid1{
    border: 2px solid red;
    background : green;
    padding:20px;
    margin:10px;
    width:60px;
    height:100px;
    -webkit-box-flex:1;
}
#kid2{
    border: 2px solid red;
    background : red;
    padding:20px;
    margin:10px;
    width:60px;
    height:100px;
    -webkit-box-flex:1;
}
#kid3{
    border: 2px solid red;
    background : blue;
    padding:20px;
    margin:10px;
    width:60px;
    height:100px;
    -webkit-box-flex:1;
}
#kid4{
    border: 2px solid red;
    background : yellow;
    padding:20px;
    margin:10px;
    width:60px;
    height:100px;
    -webkit-box-flex:1;
}



이건 mommy에 있는     -webkit-box-align:center; 을 테스트해 본 겁니다.

아래 위 로 가운데 정렬이 돼 있죠?

#mommy{
    border:2px solid blue;
    display:-webkit-box;
    -webkit-box-orient:horizontal;
    width:700px;
    height:300px;
    -webkit-box-align:stretch;
}
#kid1{
    border: 2px solid red;
    background : green;
    padding:20px;
    margin:10px;
    width:60px;
    -webkit-box-flex:1;
}
#kid2{
    border: 2px solid red;
    background : red;
    padding:20px;
    margin:10px;
    width:60px;
    -webkit-box-flex:1;
}
#kid3{
    border: 2px solid red;
    background : blue;
    padding:20px;
    margin:10px;
    width:60px;
    -webkit-box-flex:1;
}
#kid4{
    border: 2px solid red;
    background : yellow;
    padding:20px;
    margin:10px;
    width:60px;
    -webkit-box-flex:1;
}

이번것은 -webkit-box-align:stretch; 를 알아보기 위한 예제입니다.

모든 박스들이 아래위로 꽉 차게 stretch 됐습니다.


반응형

화면 전환 Storyboard API 개요

2011. 12. 10. 00:33 | Posted by 솔웅


반응형
오늘은 이번에 새로 릴리즈된 코로나 버전에서 선보인 Corona SDK Storyboard API에 대해 공부하겠습니다.

이 API가 나오기 전에 코로나에서는 화면전환을 위한 방법으로 우선 모든 display object들을 그룹화하고 그 그룹을 없앤 후 다음 화면의 새 display 그룹을 불러오고 하는 방식으로 사용하도록 제시했었습니다.
그런데 이 방법은 한계가 있었습니다. 예를 들어 한 화면(Scene)의 display 객체들이 별도의 모듈에 있다던지 할 때는 콘트롤 하기가 아주 힘듭니다.

얼마전에 다룬 주제 중에 director.lua 클래스를 이용해서 화면 전환하는 것을 다뤘습니다.
이것은 코로나 SDK를 만든 Ansca 에서 제공한 것이 아니라 Ricardo Rauber 라는 개발자가 개발해서 공유한 3rd party 클래스 입니다. 사실 저도 그렇고 이 리카르도가 배포한 director 클래스를 화면전환할 때 많이 썼습니다.  아마 한 1년 정도는 이 director 클래스가 화면전환에 주로 사용 되어졌을 겁니다.

이제 Ansca에서도 공식적인 화면 전환 API인 Storyboard API 를  Corona build 2011.678 버전에 선보였고 Corona build 2011.703 버전이 무료 사용자에게도 공개 되면서 누구나 사용할 수 있게 됐습니다.

Getting Started

일단 시작해 볼까요?
File-New Project 를 누릅니다.

이런 화면이 나올겁니다.
제가 지금 맥에서 하고 있는데요. 아까 집에서 윈도우즈로 코로나 세버전 다운 받아서 해 보니까 Choose a template에 좀 더 다양한 내용들이 있더라구요.
이번에 코로나가 새로 업그레이드 되면서 많이 변했습니다.
나중에 이 부분은 따로 다룰 기회가 있겠죠?
오늘은 Storyboard API에 대해 공부할 거니까요. 일단  Scene을 체크하고 Next를 누릅니다.
그럼 App Name에 넣은 이름으로 폴더가 만들어지고 그 안에 아래와 같이 4개의 파일이 자동적으로 생길 겁니다.

기본적으로 필요한 파일들을 자동으로 생성해 주네요.
개발하기 훨씬 편해 졌습니다.
여기서 main.lua를 볼까요?
-----------------------------------------------------------------------------------------
-- main.lua
-----------------------------------------------------------------------------------------
local storyboard = require "storyboard"
-- load scenetemplate.lua
storyboard.gotoScene( "scenetemplate" )
-- Add any objects that should appear on all scenes below (e.g. tab bar, hud, etc.):

storyboard를 require하고 storyboard.gotoScene("scenetemplate") 했습니다.

자 이제 이 내용들을 공부해 보겠습니다.

The Basics

우선 Storyboard API를 보세요.
처음에 있는 Scene Template이 아까 만들어진 파일 중에 있는 scenetemplate.lua 입니다.
이것은 조금 후에 공부하겠습니다.
그 다음엔 어떤 함수(메소드)들이 있는지 한번 이름만이라도 보고 갈까요?
getPrevious()는 이전 Scene 정보를 얻는 걸테고 getScene은 현재 정보 그리고 gotoScene()은 다음에 넘어갈 Scene(화면)으로 갈 때 사용하는 함수 일 겁니다.
newScene()은 새로운 화면을 만드는 것 같고 purgeAll(), purgeScene(),removeAll(), removeScene() 함수들은 화면을 없애는 것과 관련이 있을 겁니다.

자세한 내용과 사용법은 나중에 다뤄 보겠습니다. 오늘은 간단히 개요만 볼께요.

Loading Scenes

가장 기본적으로 Scene을 로드 하는 방법은 아래와 같습니다.
local storyboard = require "storyboard"
    storyboard.gotoScene( "scene1" )
여기서 scene1은 scene1.lua 파일의 내용으로 가라는 겁니다.
여기서 알아두어야 할 것은 이 scene1.lua는 scenetemplate.lua에 있는 규칙에 맞게 작성 되어져야 합니다.
gotoScene()함수는 다음 화면으로 가도록 하는 함수입니다.

Scene Events

각 화면(Scene)에는 여러 이벤트가 있어서 이 이벤트 별로 콘트롤이 가능합니다.
즉 scene1.lua에서 이 이벤트 가지고 콘트롤 하게 된다는 얘기 입니다.
storyboard API에는 4가지 이벤트가 있습니다.
이 이벤트를 핸들링 하려면 해당 리스너를 셋업 해야 하겠죠?
이 예제는 아까 생성됐던 scenetemplate.lua 파일에 소개 돼 있습니다.
조금 후에 볼께요.

createScene
storyboard.gotoScene()이 call 되고 새 화면이 display 될 때 동작을 합니다.
enterScene
storyboard.gotoScene()이 call되고 transition이 완료된 직후에 동작합니다.
exitScene
gotoScene()이 call되고 transition이 막 일어나기 전에 동작합니다.
이것은 현재의 Scene에 해당 되는 거겠죠? 이전에 두개는 그 다음 Scene에 해당하는 거구요.
destroyScene
display group이 removed 되기 바로 전에 동작합니다. 그리고 storyboard.purgeScene()이나 storyboard.removeScene()을 call 했을 때도 동작합니다.

지 이제 Scene Template를 보겠습니다.
----------------------------------------------------------------------------------
-- scenetemplate.lua
----------------------------------------------------------------------------------
local storyboard = require( "storyboard" )
local scene = storyboard.newScene()
----------------------------------------------------------------------------------
--    NOTE:
--    Code outside of listener functions (below) will only be executed once,
--    unless storyboard.removeScene() is called.
---------------------------------------------------------------------------------
---------------------------------------------------------------------------------
-- BEGINNING OF YOUR IMPLEMENTATION
---------------------------------------------------------------------------------
-- Called when the scene's view does not exist:
function scene:createScene( event )
    local group = self.view
 -----------------------------------------------------------------------------
    --    CREATE display objects and add them to 'group' here.
    --    Example use-case: Restore 'group' from previously saved state.
----------------------------------------------------------------------------
end
-- Called immediately after scene has moved onscreen:
function scene:enterScene( event )
    local group = self.view
-----------------------------------------------------------------------------
    --    INSERT code here (e.g. start timers, load audio, start listeners, etc.)
----------------------------------------------------------------------------
end
-- Called when scene is about to move offscreen:
function scene:exitScene( event )
    local group = self.view
-----------------------------------------------------------------------------
    --    INSERT code here (e.g. stop timers, remove listeners, unload sounds, etc.)
-----------------------------------------------------------------------------
end
-- Called prior to the removal of scene's "view" (display group)
function scene:destroyScene( event )
    local group = self.view
----------------------------------------------------------------------------
    --    INSERT code here (e.g. remove listeners, widgets, save state, etc.)
-----------------------------------------------------------------------------
end
---------------------------------------------------------------------------------
-- END OF YOUR IMPLEMENTATION
---------------------------------------------------------------------------------
-- "createScene" event is dispatched if scene's view does not exist
scene:addEventListener( "createScene", scene )
-- "enterScene" event is dispatched whenever scene transition has finished
scene:addEventListener( "enterScene", scene )
-- "exitScene" event is dispatched before next scene's transition begins
scene:addEventListener( "exitScene", scene )
-- "destroyScene" event is dispatched before view is unloaded, which can be
-- automatically unloaded in low memory situations, or explicitly via a call to
-- storyboard.purgeScene() or storyboard.removeScene().
scene:addEventListener( "destroyScene", scene )
---------------------------------------------------------------------------------

return scene

공간을 절약하기 위해 필요없는 라인은 지웠는데요.
여러분은 scenetemplate.lua 파일을 열어 보시면 됩니다.

주석이 아주 자세히 달려 있어서 보시면 아실 겁니다.
쭉 훑어 보면
storyboard를 require하고 storyboard.newScene()을 합니다.
그 밑에 보면 좀 전에 다뤘던 createScene,enterScene,exitScene,destroyScene 함수가 차례대로 나옵니다.
createScene에 display object들하고 이 객체들을 그룹화 하는 것을 구현해야 합니다.
그리고 enterScene에 이 화면에서 동작할 내용들을 코딩해야 합니다.
주로 타이머 시작이나 오디오 로드, 리스너 등록 등의 작업을 이곳에서 합니다.
exitScene 함수 안에서는 타이머 멈춤, 리스너 제거, unload sounds 등의 작업을 합니다.
destroyScene 함수에서는 리스너 제거나 게임같은 경우에 저장해야 할 데이터(점수,레벨 등등) 저장 등을 이곳에서 합니다.

그리고 그 밑에는 이 함수들에 대한 리스너를 다는 방법이 설명 돼 있습니다.
이건 보시면 아실 겁니다.

각 scene들은 마지막에 반드시 return scene을 해야 합니다.

Scene Purging and Removal

이전 화면에서 다음 화면으로 넘어갔을 때 이전 화면은 스크린에서만 안 보이는 것이지 실제로 없어진 것은 아닙니다. 그 얘기는 이전 신은 여전히 메모리를 차지하고 있다는 얘기 입니다. 이전화면에 빨리 돌아가야 하면 이렇게 메모리에 올라 있는것이 더 좋을 겁니다.
하지만 때때로 절대 불려지지 않을 화면인데 계속 메모리만 차지하고 있으면 메모리 낭비이고 퍼포먼스에도 영향을 줍니다.
이럴때 purge나 remove 함수를 씁니다.

storyboard.purgeScene(sceneName)

이 함수는 해당(seneName) scene을 purge시킵니다. 즉 보이지 않게 없어진다는 겁니다. 하지만 이 scene은 메모리에 남아 있게 됩니다. 그래서 다른 화면에서 이 화면을 storyboard.gotoScene()하게 되면 빠르게 불려지게 됩니다.
purge되기 전에 destroyScene 함수가 실행 될 겁니다.

storyboard.removeScene(sceneName)

이 함수는 우선 scene을 purge하고 나서 메모리에서 이 scene을 unload 합니다.
이후에 이 scene이 gotoScene()으로 call되면 메모리에 reload되게 됩니다.

Automatic Scene Purging

개발자가 위 purge나 remove를 하지 않은 상태에서 OS의 메모리가 부족하게 되면 Corona는 자동적으로 이전 Scene을 제거합니다.

Excluding objects from Transitions

scenetemplate.lua에서 보시면 local group=self.view 가 있을 겁니다.
view 는 그 Scene의 display 객체들입니다. 만약 화면전환 효과에 특정 display를 적용시키지 않으려면 두가지 방법이 있습니다.
1. 객체를 main.lua에서 생성한다.
2. scene 모듈에서 객체를 생성했으면 해당 객체를 view 그룹에 insert 하지 않는다.

이 방법을 사용할 때는 잘 생각해서 해야 겠죠? 2번의 방법을 사용할 때 그 객체를 새로 생성되는 로직이 있다면 이전의 객체는 남아있고 새로운 객체는 계속 생기고 하는 현상이 발생합니다.

제가 director.lua 클래스 사용할 때도 group 에 객체를 insert 시키지 않아서 에러가 생기는 바람에 그 에러 잡느라고 시간을 좀 보냈거든요.

오늘은 이렇게 storyboard API에 대해서 개요를 살펴 봤구요.
다음엔 코로나에서 제공한 샘플 코드를 분석해 볼까 합니다.

오늘 글은 아래 코로나 홈페이지에서 제공한 글을 바탕으로 작성했습니다.
http://blog.anscamobile.com/2011/11/introducing-the-storyboard-api/

반응형


반응형
기본적으로 어제 사용했던 third.html 내용을 그대로 씁니다.
필요하신 분들은 지난 강좌에서 다운 받으 시면 됩니다.
고치실 부분은 css를 다른 것을 이용해 보죠.
    <link rel="stylesheet" href="main01.css">
이렇게 main01.css 파일을 이용합니다.

그리고 section과 aside 태그를 포함하는 div를 하나 더 만듭니다.
    <div id ="new_div">
    <section id="main_section">
        <article> ......
......
        DDanzi guys have visited Zucotty Park Yesterday.
    </aside>
    </div>
이렇게 new_div라는 아이디를 갖는 div가 새로 만들어 졌습니다.


다시 이런 심심한 화면에서 새로 시작합니다.
이제 main01.css를 작성해 볼까요?
*{
    margin:0px;
    padding:0px;
}
h1{
    font:bold 20px Tahoma;
}
h2{
    font:bold 14px Tahoma;
}
header,section,footer,aside,nav,article,hggroup{
    display:block;
}
여기까지는 이전 css와 같습니다.
이어서 body를 작성하겠습니다.

오늘 배울 내용은 Flexible box 입니다.
박스 안에 있는 텍스트들이 브라우저 크기를 조절하는 거에 따라서 잘리지 않고 자동으로 조절되는 기능입니다.
컴퓨터 브라우저 하고 모바일 브라우저의 크기가 다르죠?
이렇게 하면 컴퓨터 브라우저하고 모바일 브라우저에서 모두 자연스럽게 볼 수 있는 레이아웃을 디자인 할 수 있습니다.

이 기능을 구현하기 위해 WebKit 을 사용 할 겁니다.
body{
    width:100%;
    display:-webkit-box;
    -webkit-box-pack:center;
}
너비는 100%로 잡고 display는 웹킷 박스를 사용할 거라고 알려 줍니다.
그리고 box pack은 center로 잡구요.

자 여기까지 하면 위와 같은 화면이 나옵니다.
브라우저 크기를 최소 최대로 늘렸다 줄였다 해 보세요. 그러면 어떤 효과가 있는 지 알 수 있을 겁니다.
이 웹킷 webkit 을 지원하는 브라우저가 있어야 하는데요. 제 컴의 브라우저에서는 아주 훌륭하게 지원하네요. 아마 최신 브라우저에서는 웬만하면 다 지원이 될 겁니다.

다음은 가장 큰 div 태그에 효과를 넣겠습니다.
#big_wrapper{
    max-width:1000px;
    margin: 20px 0px;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-box-flex: 1;
}
최대 너비와 마진을 정하고 여기에도 webkit-box를 사용한다고 알려 줍니다.
그리고 orient는 수평이 아니라 수직을 기본으로 잡고 flex는 1로 합니다. 1은 flex를 주라는 의미고 0은 주지 말라는 의미입니다.
우리는 flexible한 효과를 주기로 했으니까 1로 정합니다.

다음은 헤더 부분입니다.
#top_header{
    background: yellow;
    border:3px solid black;
    padding: 20px;
}
탑메뉴 부분은 아래처럼 해 주세요.
#top_menu{
    border:red;
    background:blue;
    color:white;
}
#top_menu li{
    display:inline-block;
    list-style:none;
    padding:5px;
    font:bold 14px Tahoma;
}
여기까지 하면 아래와 같이 나옵니다.

보시다시피 브라우저 크기를 늘리고 줄여도 box나 글자들이 짤림이 없이 display됩니다.

이번엔 selection과 aside를 포함하고 있는 new_div div 태그에 효과를 주겠습니다.
#new_div{
    display:-webkit-box;
    -webkit-box-orient:horizontal;
}
자 이렇게 하면 new_div 안에 있는 내용들은 위에서 아래로가 아니라 왼쪽에서 오른쪽으로 그 내용이 display 됩니다.
그리니까 section 태그 안에 있는 내용이 모두 표시되고 다음에 aside 태그 안에 있는 내용이 그 오른쪽에 표시 될 겁니다.
지난 시간에 잘 안됐던 기능이 이 테크닉을 이용하면 쉽게 구현 되네요.
나머지 부분도 아래와 같이 해 보세요.

#main_section{
    border:1px solid blue;
    -webkit-box-flex: 1;
    margin: 20px;
    padding: 20px;
}
#side_news{
    border: 1px solid red;
    width:220px;
    margin:20px 0px;
    padding: 30px;
    background:#66CCCC;
}
#the_footer{
    text-align:center;
    padding: 20px;
    border-top: 2px solid green;
}


아주 그럴듯한 웹 페이지죠?
브라우저를 한번 줄여 보세요.


오른쪽 green 부분은 박스가 줄어들지 않고 왼쪽 기사 부분만 박스가 줄어들죠?

이 테크닉을 웹 앱에 적용하면 아주 유용할 겁니다.
PC나 태블릿, 모바일 폰 모두 크기가 제각각인데 이 기능을 이용하면 어느 환경에서나 보기 좋게 화면을 보여 줄 수 있으니까요.

그럼 오늘은 여기까지 하겠습니다.

자신이 열심히 만든 소스를 공유하고 있는 보스톤의 Bucky 에게 고맙구요..
thenewboston.org
가서 댓글을 달던지 광고를 클릭하던지 여유 있으면 Donate를 하던지 합시다..

참 나는꼼수다 무리들 그저께 뉴욕에 있었고 오늘은 보스톤에서 행사가 있다는 것 같은데...
미국에서도 나꼼수 재밌게 듣고 있는데 이번주는 녹음 잘 하고 일찍 업로드 할 지 어떨지 궁금하네요...


반응형

HTML5 화면 Layout 잡기 -1

2011. 12. 9. 01:21 | Posted by 솔웅


반응형
오늘은 처음 다뤘던 HTML 소스로 작업하겠습니다.
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title> Dougy's HTML5 </title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <header>
        <h1> Welcome to Dougy's HTML5. </h1>
    </header>
    <nav>
        <li> Home </li>
        <li> Tutorials </li>
        <li> Podcast</li>
    </nav>
    <section>
        <article>
            <header>
                <hgroup>
                    <h1> DDanzi in NY</h1>
                    <h2> come to Zuccotti Park with Pizza</h2>
                </hgroup>
            </header>
            <p> DDanzi guys have visited in Zuccotti park yesterday to encourage the occupier of Occupy Wall St. Protesters.</p>
            <footer>
                <p> -- written by Dougy </p>
            </footer>
        </article>
        <article>
            <header>
                <hgroup>
                    <h1> Title of Article 2</h1>
                    <h2> Subtitle for Article!</h2>
                </hgroup>
            </header>
            <p> This is the 2nd article. </p>
            <footer>
                <p> -- written by Dougy </p>
            </footer>
        </article>
    </section>
    <aside>
        <h4> News </h4>
        DDanzi guys have visited Zucotty Park Yesterday.
    </aside>
    <footer>
        Copyright Bucky thenewboston.
    </footer>
</body>
</html>

이 화면은 헤더와 메뉴(nav) 그리고 메인 공간으로 section에 두개의 기사가 있고 한쪽에 aside 그리고 아래에 footer로 구성 돼 있습니다.
이것을 CSS를 이용해서 레이아웃을 잡을 겁니다.
지나번 글을 맨하튼 Zuccotti Park 갔다가 미국 방문한 나는 꼼수다 팀을 보고 난 다음에 작성해서 article에 나꼼수 팀이 피자 나눠준 얘기가 있네요.
저도 피자 한조각 얻어 먹고 왔어요. ^^



CSS를 적용하지 않은 화면은 이와 같습니다.

우선 CSS를 이용하기 위해서는 우선 div 태그로 body 태그 안을 모두 감싸고 각 레리아웃 구성 별로 id를 부여합니다. (div도 id를 부여 합니다.)
 <div id="big_wrapper">
    <header id="top_header"> ...
     <nav id="top_menu">...
     <section id="main_section">...
     <aside id="side_news">...
     <footer id="the_footer">...
  </div>
이렇게 HTML 파일을 수정합니다.

그 다음 main.css 파일로 가서 코딩을 시작합니다.
일단 모두 지우고 아래 내용을 코딩해 넣으세요.
*{
    margin: 0px;
    padding: 0px;
}
h1{
    font: bold 20px Tahoma;
}
h2{
    font: bold 14px Tahoma;
}
전체 마진과 패딩을 0으로 하고 h1 태그에는 볼드 20픽셀 사이즈 타호마 폰트를 적용하고 h2 태그에는 볼드 14픽셀 사이즈 타호마 폰트를 적용한다는 내용입니다.


이 내용을 적용하면 화면이 이렇게 변합니다.
지금은 h1,h2 태그에 대한 css 효과만 있습니다.

이제 레이아웃을 잡기 위해서 그룹화(블럭화)를 시킵니다.
header,section,footer,aside,nav,article,hgroup{
    display:block;
}
그리고 body내의 모든 내용을 기본적으로 center align으로 정합니다.
body{
    text-align:center;
}



이제 각 id 별로 css 효과를 주겠습니다.
우선 div는 id가 big_wrapper 였죠? 이 div 부터 주겠습니다.
#big_wrapper{
    border:1px solid black;
    width:1000px;
    margin: 20px auto;
    text-align:left;
}

이렇게 하면 1픽셀 테두리가 쳐진1000픽셀 너비의 사각형이 나올 겁니다.
윗쪽 마진은 20픽셀이고 왼쪽,오른쪽,아래쪽 마진은 자동적으로 정해 집니다.
그리고 글자들은 왼쪽 정렬이 됩니다.


그 다음은 top_header 에 효과를 주겠습니다.
#top_header{
    background:yellow;
    border: 1px solid blue;
    padding: 20px;
}
그리고 top_menu에는 아래와 같이 효과를 주구요.
#top_menu{
    background:blue;
    color:white;
}
그런데 이 Home, Tutorial, Podcast 가 좌에서 우로 한줄로 표시하고 싶습니다.
이게 메뉴거든요. 그래서 아래와 같이 li 태그에 효과를 줍니다.
#top_menu li{
    display:inline-block;
    list-style:none;
    padding: 5px;
    font: bold 14px Tahoma;
}



자 여기까지 완성이 됐습니다.
헤더가 있고 메뉴도 그럴듯하게 자리를 잡았네요.
이제 article에 대해 효과를 줘 볼까요?
main_section의 article이 왼쪽에 자리잡고 오른쪽에 조그맣게 aside가 자리 잡도록 하겠습니다.
#main_section{
    float:left;
    width:660px;
    margin:30px; /* 전체 너비가 1000 픽셀이므로 계산을 하면서 해야 함*/
}
#side_news{
    float:left;
    width:220px;
    margin:20px 0px;
    padding:34px;
    background:#66CCCC;
}
float 명령어를 잘 보세요.
줄단위로 표시하지 않고 좌우로 표시하려면 이 float를 사용해야 합니다.
그리고 the_footer를 아래와 같이 코딩하세요.
#the_footer{
    clear:both;
    text-align:center;
    padding:20px;
    border-top: 2px solid green;
}
여기서 clear:both의 의미는 좌우로 배치하는 것을 그만 두겠다는 의미입니다.
그러면 상하로 배치 되겠죠? footer는 가운데 정렬에 윗쪽에 녹색 줄이 그어 지게 됩니니다.


이렇게 나올 텐데요.. 좀 이상하네요. News 녹색 사각형이 Article 오른쪽에 있어야 되는데 밑에 있습니다.
파이어폭스, 사파리, 크롬 모두 저렇게 나오네요. 맥도 그렇고 윈도우즈도 그렇고...
뭐가 잘못 됐을까요? 브라우저 버전 문제인가?
네이버에서 다른 float 예제를 찾아서 해도 다 안 되더라구요.

일단 지금 제가 테스트 해 볼 시간이 없어서요. 다음으로 넘어가겠습니다.

다음은 각 article 을 보기 좋게 꾸미겠습니다.

article {
    background:#FFFBCC;
    border: 1px solid red;
    padding:20px;
    margin-bottom: 15px;
}
article footer {
    text-align:right;
}


조금 그럴듯하게 됐죠?
첫 강좌때 말씀 드린것처럼 원본 소스는 bucky 가 공개한 소스입니다. thenewboston.com으로 가면 원본 동영상 강좌를 보실 수 있습니다.

일단 오늘 강좌에선 float가 원하는 대로 작동 되지 않았네요.

여러분들도 한번 테스트해 보시고 제가 잘못한 부분이 있으면 댓글로 알려 주세요.
소스코드는 아래에 있습니다.

다음시간엔 새로운 CSS 태그로 오늘 한 웹 페이지를 좀 더 flexible 하게 표현하는 방법을 공부하도록 하겠습니다.
반응형


반응형

Build 2011.703 버전이 릴리즈 됐고 곧바로 공개됐습니다.

이전 버전들은 일반 공개까지는 안가고 유료 구매자들만 다운 받게 했는데 이번 릴리즈 버전은 테스트를 거쳐서 안정성까지 확인 됐나 봅니다.

많은 기능이 바뀌고 추가 될 거라고 얼마전부터 예고를 했었는데...

어떤 것이 바뀌었는지 주요한 부분을 알아볼께요.

inneractive Ads




지금까지 코로나로 만든 앱에서는 공식적으로 inMobi 광고만 됐습니다. 비공식적으로 web pop up 기능을 이용해서 Admob 광고가 가능한 방법이 개발자들 사이에서 공유 됐었는데요.
이번 버전에서 inneractive 를 이용한 광고가 가능하도록 했답니다.
inneractive는 여러(100여개)의 광고 네트워크를 사용할 수 있도록 연결해 주는 네트워크라고 합니다.
코로나에서는 이 기능을 통해서 앱 개발자가 좀 더 많은 수입을 올릴 수 있도록 했다고 홍보하고 있네요.
inneractive 사용방법은 아래 링크에 있습니다.
http://developer.anscamobile.com/reference/ads-inneractive
사용방법은 기존 inMobi 사용하는것과 비슷해 보입니다.
저도 한번 해 보고 얼마나 수입의 변화가 있는지 한번 봐야겠네요.

Kindle Fire and NOOK

아마존(Amazon)의 Kindle Fire 와 반즈 앤 노블즈(Barnes & Noble's) 사의 NOOK Color 플랫폼을 지원하게 됐습니다. 두 태블릿 모두 안드로이드 기술을 사용하고 있지만 내부적으로 들어가면 좀 다르다고 합니다.
그래서 이 기능을 제대로 이용하려면 유료버전을 사용해야 한답니다. 그것도 PRO 버전으로요.


Storyboard API

이번에 새로 제공되는 화면 전환용 API 입니다.
샘플 앱을 돌려봤는데요. 여러 화면전환 효과를 사용할 수 있더라구요.
기존에는 transition.to 를 사용하거나 director.lua를 사용했는데 이제 코로나 SDK 에서 공식적으로 제공하는 화면전환 API 도 사용할 수 있게 됐네요.
코로나 SDK의 기본정신이 적은 코딩으로 큰 효과를 보는 것이잖아요. 이 기능도 아주 간단하게 사용할 수 있더라구요.

나중에 한번 자세하게 다뤄 볼께요.
미리 공부하고 싶으신 분은 아래 링크를 참조 하세요.
http://developer.anscamobile.com/content/storyboard
물론 새 릴리즈 버전을 인스톨 하면 샘플 코드도 있습니다.

Native UI in Mac OS X Simulator



예전에 안 됐던 시뮬레이터에서 안 돼 디바이스에 인스톨 한 다음에 테스트 해야 됐던 text fields, message boxes, web popups 등이 맥에서 시뮬레이터로 볼 수 있게 됐습니다. (윈도우즈에서는 아직도 안 되나 봅니다.)

New Corona Home Screen


Corona SDK 를 실행하면 나오는 화면이 새로와 졌습니다.




주요한 변화들은 이렇습니다.
이외에 여러 버그들이 수정됐고 다른 마이너한 변화들이 있다네요.

자세한 릴리즈 노트를 보려면 아래 링크를 열어 보세요.
http://developer.anscamobile.com/content/corona-sdk-release-notes-2011703

반응형