html4.0 을 html 5.0 으로 변환

| HTML5.0

2012. 5. 14. 20:49

html5 살펴보기

<!DOCTYPE html>

DTD 선언이 간략해 졋다. 기존 DTD에 비해서,

실용성을 강조하므로, 필요없는것들을 다 제외햇다.

<html lang="ko">
<head> 요소. 열림태그와 닫힘태그로 구성,속성.
<meta charset="utf-8" />

html4까지는 charset이 없다.

간략화 할수 있다. 인코딩 관련 meta태그가 간략화 되었다

ie에서만 해석

ie는 버전별로 렌더링 모드가 따로 있다.

그래서 IE=edge 로 하면 최신버전으로 렌더링해달라는 의미,

IE=7 이렇게 쓸수도 있다.

chrome=1 크롬프레임사용하겠다는 뜻

크롬프레임 : ActiveX이고, activeX는 ie에서민 작동한다.

크롬프레임은 activeX를 이용해서, 모양은 ie인데 그 안의 내부적으로는 크롬이 동작하는것.

그러면 ie6에서도 html5를 사용할수 있게 한다는 뜻

이것은 activeX를 사용하는 것이므로 좋은 방법은 아니다.

설치가 되어있어야만 한다. 그래서 코드를 띄우고 해야함.

chrome=1 을 기재안하면 ie6이 실행, 기재하면 activeX를 설치하는 화면을 띄워서 구동하는 원리임.

설명과 저자.. 정도.

viewport 모바일에 최적화된 page라는 뜻

모바일 기기에서 읽어서 원활하게 page를 보여준다는 의미

처음에 들어갓을때의 스케일을 1로 지정한다는것.

이 부분에 대한 내용은 3일차에서 다시 설명하도록 하겠습니다.

<link rel="shortcut icon" href="/favicon.ico" />

일단 데스크탑에서 favico설정하는것.

모바일에서 바탕화면에 나타나는 아이콘 지정.

현재 웹 표준에서 쓰고 있는 id들을 분석을 해서, 요소로 만들어버린것.

전부 div로 선언하던것들이 요소로 추가가 많이 되었다.

실습, 2단 레이어 만들어보기

자동완성기능도 사용해보자.

자동완성 기능중에 요소가 어디어디에서 되는지 확장해서 보기. window - preference에 가서

Aptana studio - Content Assist 에 가서 web으로 프로젝트 바꾸고 브라우저를 체크해준다.

Aptana studio 단축키 잠깐 설명!

* 자동완성기능 활성화 : Ctrl + spaceBar

* 실행 : Ctrl + F11 아이콘을 클릭, 오른쪽 마우스 Run as 로 해도 된다. 실행되는 기본 브라우저는 FireFox

자동 포멧팅 : Ctrl + Shift + F

이렇게 구조를 만들고 스타일을 입혀보자 참고 : clearboth.org

html5로 바꿔보자.

html5 하위호환성 고려

현재 html5에로 마크업 하기 위해서는 데스크탑 기준으로 봣을때, 모바일은 다 되니까.

하위호환성을 고려해야 하는데,

그렇게 하려면 2가지 개념이 필요하다.

ie6,7,8 에서는 새로운 요소들을 아예 인식하지 못한다.

한마디로 DOM트리에 생성이 안됩니다.

해결1 : FM적인 해결책은 자바스크립트에서 createElement()로 요소를 직접 생성... 하지만 귀찮앙

해결2 : ie9.js를 사용합니다. (구글에 가서. ie9.js 를 검색한다)

첫번째 나오는 검색 클릭. 해서 붙여넣기.

이젠이런일이 거의 없지만 표준브라우저도 예전 버전들은 FireFox 3.6같은 경우.

새로운 요소들을 인라인 요소로 인식합니다.

인라인들은 높이값이 없다.

이렇게까지만 해도, html5로 마크업 할 수가 있다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8"/>
  <title>2_2단레이아웃</title>
  
  <link rel="stylesheet" href="css/reset.css" />
  <style>
   body {
    margin: 0px;
    padding: 0px;
   }
   #wrap {
    width: 900px;
    margin: auto;
    border: 1px solid red;
   }
   #header {
    width: 900px;
    height: 100px;
    background: pink;
   }
   #sidebar {
    float: left;
    width: 300px;
    height: 300px;
    background: lightgreen;
   }
   #content {
    float: right;
    width: 600px;
    min-height: 300px;
    background: skyblue;
   }
   #footer {
    clear: both;
    display: block;
    content: '';
    width: 900px;
    height: 100px;
    background: yellow;
   }
  </style>
</head>
<body>
  <div id="wrap">
   <header id="header"></header>
   <aside id="sidebar"></aside>
   <section id="content"></section>
   <footer id="footer"></footer>
  </div>
</body>
</html>

저작자표시

'HTML5.0' 카테고리의 다른 글

캔버스 이미지 뛰우기 . (0)	2012.06.04
canvas 사이트 모음 . (0)	2012.05.24
Canvas (0)	2012.05.22
Aptana 설치 (0)	2012.05.14
HTML 이란. (0)	2012.05.14