반응형
그동안 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에 집중돼 있어서 또 좋네요.
둘 다 열심히 공부해야겠어요.
그럼.....
우리의 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 |