IT 기술 따라잡기

HTML5 기본 Semantic Tag 들 알아보기 -2-

2012. 1. 1. 02:45 | Posted by 솔웅

오늘도 어제에 이어서 wiredwiki의 youtube 강좌를 기반으로 공부하고 정리해 보겠습니다.

오늘은 <hgroup> 과 이미지등을 표시하는 <figure> 그리고 HTML5는 아니지만 <iframe> 에 대해서 살펴 보겠습니다.

우선 <hgroup>은 <h1>~<h6> 엘리먼트들을 그룹화 하기때문에 하나 이상의 h 엘리먼트가 있어야 합니다. 이것들은 하나의 섹션으로 그룹화 됩니다.
<figure>는 이미지 등을 표현합니다. 그리고 <iframe>은 브라우저 내에 또 다른 브라우저를 갖을 수 있도록 합니다.

그림도 들어가고 iframe도 들어가고 하니까 한 화면에 다 나오질 않네요.
우선 이 화면엔 이전 글 소스에서 <article> 태그를 모두 지워버리고 <hgroup>을 사용했습니다.
그리고 그 안에 <figure> 태그를 사용했구요.

그리고 이 화면에서는 <iframe>을 사용해서 naver와 yahoo를 불러왔습니다.

아래 코드를 보시죠.

<!doctype html>
<html lang="en">
<head>
    <title> Dougy's HTML5 Customized Video Player</title>
    <meta charset="utf-8"/>
</head>
<body>
    <header>
        <span style="color:red;font-style:italic;font-family:verdana;">
        Start HTML5 with Dougy </span>
        <hr/>
    </header>
    <aside style="font-size:larger;font-style:italic;color:blue;float:right;width:130px">
        Welcome to the world of HTML5 which opens you various possibilities for making
        the web more accessible and easy to use.
    </aside>
    <nav>
        <a href="html5syntax.html"> HTML5 syntax </a> |
        <a href="html5forms.html"> HTML5 Forms </a> |
        <a href="csscheats.html"> Css CheateCodes </a> |
        <a href="http://coronasdk.tistory.com"> My Blog </a>
    </nav>
    <hgroup>
        <h1> Sunrise at Sandy Hooks </h1>
        <figure>
            <img src="depart.jpg" width="200">
        </figure>
        <h2> Montauk is too far from here. </h2>
        <figure>
            <img src="drag.jpg" width="100">
        </figure>
    </hgroup>
    <p> This is the dummy website which i have created to show you guys how the new HTML5 elements works</p>
    <p> If you want to know for Corona SDK mobile application development tool
        then come to <a href="http://coronasdk.tistory.com"> My Blog. </a></p>
    <iframe src="http://www.naver.com" width="400" height="150"> </iframe><br>
    <iframe src="http://www.yahoo.com" width="400" height="150"> </iframe><br>
    <footer>
        © 2011 Douglas All Right Reserved
    </footer>
</body>
<html>

대 부분 지난 글들과 같습니다.
다른 점은 지난 소스에 있던 <article> 대신 <hgroup>을 사용했는데요. 그것은 <h1>~<h6> 엘리먼트들을 그룹화하기 위해서 입니다.

이 <hgroup> 안에 <figure> 태그가 있는데요. 이것은 그 안에 이미지가 나올거라는 것을 알려 줍니다.

<footer> 바로 위에 보면 <iframe> 태그가 나오죠? 이건 전혀 새로운 건 아닙니다. 10년전에도 사용했었던 기능이니까요. 브라우저 안에 새로운 브라우저를 만들어서 그 안에 웹페이지를 표시할 수 있도록 만든겁니다.
처음것은 naver.com이 나오고 두번째 것은 yahoo.com이 나옵니다.
외부 싸이트뿐만 아니라 내부 웹페이지도 넣을 수 있습니다.

웬일인지 이 iframe은 많이 사용하지 않은 것 같네요.

다음시간에도 HTML5에 집중해서 새로운 태그들을 살펴 보겠습니다.

저작자표시 비영리 동일조건 (새창열림)

'WEB_APP > HTML5' 카테고리의 다른 글

HTML5 Storage 1 - Web Storage - (2)	2012.01.10
HTML5로 게임 만들기 워밍업 (0)	2012.01.08
HTML5 Form 공부하기 -2- (3)	2012.01.02
HTML5 Form 공부하기 -1- (0)	2012.01.02
HTML5 기본 Semantic Tag 들 알아보기 -3- (0)	2012.01.01
HTML5 기본 Semantic Tag 들 알아보기 -1- (1)	2012.01.01
HTML5 Web Storage -01- (2)	2011.12.27
HTML5 드래그 앤 드롭 하기 Drag and Drop (0)	2011.12.26
HTML5 Canvas 이용하기 - 04 - Image/Animation (0)	2011.12.24
HTML5 Canvas 이용하기 - 03 - (0)	2011.12.24

WEB_APP/HTML5

HTML5 기본 Semantic Tag 들 알아보기 -1-

2012. 1. 1. 02:26 | Posted by 솔웅

그동안 Youtube의 Bucky 강좌를 보면서 정리했는데요. Bucky가 그동안 올린 강좌를 다 정리해 버렸네요. (HTML5관련해서요.)
우리의 Bucky가 계속 올리고 있으니까 새로운거 올리면 저도 공부하고 또 여기에 정리해 넣을께요.
오늘은 Bucky가 올릴때까지 다른 Tutorial을 한번 볼려구요.
제가 찾은건 wiredwiki 가 올린 강좌입니다.

기본적인 HTML5의 Tag들을 살펴 보겠습니다.
<header><aside><nav><article><section><footer> 태그를 이용해서 화면을 구성해 봤습니다.

위 화면을 만들었습니다.
우선 Header로 맨 위 빨간 글을 표현했고 aside로 오른쪽 side에 있는 글들을 지정했습니다.
다음 nav로 메뉴들을 만들었고 article 로 두개의 section을 감싸서 큰제목 작은 제목의 글들을 넣었습니다. 그리고 footer로 저작권 표시를 했구요.

소스 코드를 볼까요?

<!doctype html>
<html lang="en">
<head>
    <title> Dougy's HTML5 Customized Video Player</title>
    <meta charset="utf-8"/>
</head>
<body>
    <header>
        <span style="color:red;font-style:italic;font-family:verdana;">
        Start HTML5 with Dougy </span>
        <hr/>
    </header>
    <aside style="font-size:larger;font-style:italic;color:blue;float:right;width:130px">
        Welcome to the world of HTML5 which opens you various possibilities for making
        the web more accessible and easy to use.
    </aside>
    <nav>
        <a href="html5syntax.html"> HTML5 syntax </a> |
        <a href="html5forms.html"> HTML5 Forms </a> |
        <a href="csscheats.html"> Css CheateCodes </a> |
        <a href="http://coronasdk.tistory.com"> My Blog </a>
    </nav>
    <article>
        <section>
            <h1> Sunrise at Sandy Hooks </h1>
            <p> Come to Sandy Hooks to see the first sunrize of 2012..... Wow
                Sunrize at Atlantic Ocean. cool...</p>
        </section>
        <section>
            <h2> Montauk is too far from here. </h2>
            <p> It is for 2:30 distance from my place. </p>
        </section>
    </article>
    <footer>
        © 2011 Douglas All Right Reserved
    </footer>
</body>
<html>

어차피 오늘은 복습하는 과정이니까 옛날 배웠던 것을 다시 떠올리면서 분석해 보죠.
<!doctype html>은 이 문서는 HTML5를 사용하겠다는 신호입니다 대소문자 구분은 없습니다.
그 다음 <head>에 title과 메타태그를 넣었습니다.
그 아래에 있는 body 태그 사이에 있는 내용들이 브라우저에 표시될 것들입니다.
<header>를 보면 그 안에 내용을 <span>으로 감쌌죠? 이건 HTML5에서 새로 나온건 아니고 이전부터 있었던 겁니다 <div>와 함께 자주 사용되는건데요. 여기서는 <header>안의 내용에 따로 CSS를 적용하기 위해서 사용했습니다.

지금까지는 주로 외부에 css 파일이 있고 <head> 안에서 이 css파일을 <link>걸어서 사용했었는데요. 여기선 주로 html 안의 tag에 직접 걸겠습니다.
일단 css가 아니라 HTML5를 배우는 거니까 거기에 Focus를 맞추는 겁니다.
<hr/>도 HTML5는 아니고 그 이전부터 있었던 것으로 선을 긋는 겁니다.

그 다음엔 <aside> 를 썼는데요. tag 안에 CSS를 보면 float:right이 있습니다. 그래서 그 안의 내용이 브라우저에서 오른쪽에 정렬 됩니다.

다음 nav 태그에서는 각종 링크를 걸어 줬구요.

그리고 <article>에는 두개의 <section>을 넣었습니다. 이 section 안에 Main Contents들이 들어갔구요.

맨 마지막에 <footer>가 들어갔습니다.
© 라는게 있는데 이건 원문자 C를 말하는 겁니다.

이렇게 다시 HTML5의 기본 Semantic Tag들인 <header><aside><nav><article><section><footer> 들을 사용해 봤습니다.

다음엔 이 외에 다른 HTML5 Tag들을 배워보겠습니다.
Bucky의 강좌는 CSS, JavaScript 와 함께 진행이 되서 Dynamic한 효과를 보는데 좋고 이 wiredwiki 의 강좌는 HTML5에 집중돼 있어서 또 좋네요.

둘 다 열심히 공부해야겠어요.

그럼.....

저작자표시 비영리 동일조건 (새창열림)

'WEB_APP > HTML5' 카테고리의 다른 글

HTML5로 게임 만들기 워밍업 (0)	2012.01.08
HTML5 Form 공부하기 -2- (3)	2012.01.02
HTML5 Form 공부하기 -1- (0)	2012.01.02
HTML5 기본 Semantic Tag 들 알아보기 -3- (0)	2012.01.01
HTML5 기본 Semantic Tag 들 알아보기 -2- (0)	2012.01.01
HTML5 Web Storage -01- (2)	2011.12.27
HTML5 드래그 앤 드롭 하기 Drag and Drop (0)	2011.12.26
HTML5 Canvas 이용하기 - 04 - Image/Animation (0)	2011.12.24
HTML5 Canvas 이용하기 - 03 - (0)	2011.12.24
HTML5 Canvas 이용하기 - 02 - 다각형,글자,그림자 (0)	2011.12.22

Corona SDK/샘플 코드 분석

내가 그린 선으로 떨어지는 공 받아내기

2011. 12. 31. 02:42 | Posted by 솔웅

제가 예전에 써핑하다가 받은 소스입니다.
누가 만든 로직인지도 모르겠네요.

하옇든간 자기가 힘들게 만든 소스를 여러 사람들과 조건없이 공유하는 개발자분들께 감사드립니다.

오늘 살펴볼 앱은요.
앱을 시작하면 위에서 녹색 공이 떨어집니다.
그리고 화면을 Drag 하면 선이 그려집니다.
녹색 공이 그 선에 떨어지면 튀어 나가게 돼 있습니다.

일단 소스 부터 볼까요?

local physics = require ("physics")
physics.start(true)
physics.setGravity(0, 1)

-- Ball rolls on Line

local ball = display.newCircle( 0, 0, 25)
ball:setFillColor(0, 255, 0)
ball.x = display.contentWidth/2
ball.y = 0

physics.addBody(ball, {bounce=1.1, radius = 25, friction=1})

-- Draw a line

local i = 1
local tempLine
local ractgangle_hit = {}
local prevX , prevY
local function runTouch(event)
if(event.phase=="began") then
    if(tempLine==nil) then
      tempLine=display.newLine(event.x, event.y, event.x, event.y)

-- Random Colors for line

      r = math.random (0, 255)
      g = math.random ( 0, 255)
      b = math.random (0, 255 )
      tempLine:setColor(r,g, b)

      prevX = event.x
      prevY = event.y
    end
elseif(event.phase=="moved") then
    tempLine:append(event.x,event.y-2)
    tempLine.width=tempLine.width+0.8
    ractgangle_hit[i] = display.newLine(prevX, prevY, event.x, event.y)
    ractgangle_hit[i]:setColor(r,g, b)
    ractgangle_hit[i].width = 5

-- Creates physic joints for line (Turn on draw mode to see the effects)

    local Width = ractgangle_hit[i].width * 0.6
    local Height = ractgangle_hit[i].height * 0.2

-- Physic body for the line shape

    local lineShape = {-Width,-Height,Width,-Height,Width,Height,-Width,Height}

    physics.addBody(ractgangle_hit[i], "static", { bounce = -1, density=0.3, friction=0.7, shape = lineShape})
    prevX = event.x
    prevY = event.y
    i = i + 1
elseif(event.phase=="ended") then
    tempLine.parent.remove(tempLine)
    tempLine=nil
end
end

Runtime:addEventListener("touch", runTouch)

우선 Physics를 이용하기 위해 require하고 start 시킨 후 중력은 아래로 1을 주었습니다.
기본이 9.8인데 1로 주었으니 풍선처럼 아주 가볍게 그리고 천천히 떨어지겠네요.
그리고 25픽셀이 반지름인 녹색공을 만들고 위치는 상단 가운데로 주었습니다.
이 ball에 addBody를 했구요. 그 body 크기는 반지름이 25픽셀로 녹색 원과 크기가 같고 bounce와 friction 도 조금 주었습니다.

여기까지만 하면 녹색볼이 위에서 아래로 천천히 떨어질 겁니다.
정말 Corona SDK의 물리엔진은 아주 강력합니다.

그 다음은 여러 변수들을 선언했습니다.
맨 밑에 Runtime touch리스너가 있고 이 리스너는 runTouch함수를 호출합니다.
그러니까 앱이 시작할 때부터 이 runTouch 함수는 실행 될 겁니다.

이제 그 함수를 볼까요?
일단 touch가 시작되고 tempLine이 nil 일 경우 tempLine에 현재 위치로 라인을 그립니다.
시작점과 끝점 모두 현재 위치가 됩니다.
그리고 r,g,b 변수에 랜덤한 rgb값을 넣고 아까 그린 선에 그 랜덤한 색을 넣습니다.
그리고 현재의 위치를 prevX,prevY에 넣습니다.
그 다음에 touch 가 moved일 경우 즉 드래그가 진행중일 경우에는요.
선을 더 합니다. (append) 그리고 선을 그리는데요. 시작점은 아까 began 일때의 위치가 되고 끝위치는 현재가 됩니다.

다음엔 이 그려진 Line에 physics.addBody를 할 수 있도록 Width,Height공간만큼 구간을 잡구요 이것을 addBody에 shape로 집어 넣습니다.
그리고 다시 prevX,prevY에 현재 위치를 넣습니다.

드래그하던 손을 떼면 ended 부분이 실행 되는데요.
tempLine을 remove하고 nil을 만듭니다.

자 여기 까지가 소스코드를 모두 분석한 내용입니다.

이제 앱을 실행하면 녹색 공이 떨어지고 여러분이 그은 선에 그 공이 맞으면 튀게 될 겁니다.

이 앱은 그 자체로 완성된 게임은 아니지만 그 기본 로직을 활용하면 많은 곳에서 유용하게 사용할 수 있을 것 같습니다.

저작자표시 비영리 동일조건 (새창열림)

'Corona SDK > 샘플 코드 분석' 카테고리의 다른 글

animation chain 소스 분석 해 보기 01 (0)	2013.07.15
코로나로 뱀 기어디니는 효과 내기 (0)	2012.02.28
간단하게 눈발 흩날리는 느낌 주기 (2)	2012.02.16
돈 넣고 돈 먹기(야바위) 모바일 게임 만들기 2 (11)	2012.01.04
돈 넣고 돈 먹기(야바위) 모바일 게임 만들기 1 (2)	2012.01.03
Corona SDK 화면전환 API (Story Board) (4)	2011.12.23
Level 별 Lock 기능 걸고 푸는 법 (0)	2011.12.15
벽돌 깨기 게임 만들기 -3 (1)	2011.12.01
벽돌 깨기 게임 만들기 -2 (2)	2011.11.30
벽돌 깨기 게임 만들기 -1 (3)	2011.11.29

IT 기술 따라잡기

공지사항

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

카테고리

HTML5 기본 Semantic Tag 들 알아보기 -2-

'WEB_APP > HTML5' 카테고리의 다른 글

HTML5 기본 Semantic Tag 들 알아보기 -1-

'WEB_APP > HTML5' 카테고리의 다른 글

내가 그린 선으로 떨어지는 공 받아내기

'Corona SDK > 샘플 코드 분석' 카테고리의 다른 글

티스토리툴바