내가 처음 웹페이지를 만들때는 HTML로만 웹페이지를 만들었다.
정말 지극히 단순하고 심플하다고 생각하겠지만, 간단한 명령어 사이에 많은 조합으로 화려하게 만들수도 있었다.
그러면서 플래쉬라게 나오면서 기존에 사진을 가져오던 방식에서 직접 그래픽을 구현해가며 화려한 웹페이지가 제작이 되었다.
드림위버(맞나? ) 편하게 웹페이지를 제작할수 있게 도와주는 프로그램도 많이 쏟아지기도 했다.
그러나, 지금은 간단하게 생각했던 HTML은 더 세련되지며, 더 많은 웹 프로그래밍이 생겨났다.
그래서, 처음부터 다시 시작한다.
우선 웹페이지의 구성... 어떻게 만들어졌는지 알아보자...
우리의 구글님은 정말 심플한 디자인을 갖고 있다...
정말 엄청난 여백의 미를 자랑한다.
이것만보고 HTML로 짜라고 하면 20줄 이하로 대충 만들수 있을거 같다.
그러면 이제 소스보기로 소스를 보기로 하자.
총 108줄의 엄청나고 빽빽한 솰랄라~~~.
과연 엄청난 백지의 구글메인페이지에 비해 엄청나게 많은 프로그래밍으로 구성되어있는게 믿기질 않는다.
백지도 글로채우는 것인가. 라는 의문이들지 않을수 없다.
그러나 구글페이지의 오른쪽 상단을 보면
메뉴가 보일것이다. 그렇다. 이 엄청난 소스를 차지하고 있는건 아닐까? 라는 생각만 들뿐...
이제부터 소스보기로 쪼개기를 시작해보자.
그렇다면 간단하면서도 쉽게 쪼갤수 있는 사이트를 검색해봐야할것이다.
html도 볼수 있고 java script도 같이 볼수 있는... 내 블로그를 쪼개봐야겠다.
메인 페이지의 소스보기를 보겠다.
오호 훨씬 보기에 편하다.
첫줄부터 읽어내려가보자...
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> |
>>> HTML문서의 버전을 나타네는 줄이다. xhtml을 사용하고, 본 문서는 영어로 되어있다라는 뜻인거 같네요.
다음줄..
| <head> /// 머리글의 시작이라는 내용 |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
| meta 언어설정에 관련된 내용. text/html, utf-8로 세팅되어있다는 내용. 이번줄까지는 웹페이지의 기본 공식이다. |
| <link rel="alternate" type="application/rss+xml" title="Keith의 아름다운 세상" href="http://keith-lee.tistory.com/rss" /> |
| 링크를 걸어줬다. 메인페이지 keith의 아름다운 세상을 누르면 메인페이지로 넘어감. |
| <link rel="stylesheet" media="screen" type="text/css" href="http://ts.daumcdn.net/blog/skin/tisPureBlack/style.css" /> |
| 링크를 걸었다. stylesheet 경로는 http://ts.daumcdn.net/blog/skin/tisPureBlack/style.css를 불러와 head부분의 스타일을 불러왔다. 현재 사용하고 있는 tistory에서 지원하는 CSS를 사용하고 있다. 거기서 불러온다. |
| <link rel="shortcut icon" href="/favicon.ico" /> |
| favicon.ico 이미지를 불러오는거 같다. |
| <title>Keith의 아름다운 세상 ::</title> /// 타이틀바에 Keith의 아름다운 세상 :: 를 출력한다. |
이 이후로는
<body>
</body>
</html>
이런식으로 <body>안에 내용들을 넣으면 된다.
이상 HTML5를 쪼개봤다.
다음은 대충 기본 내용을 살펴봤으니, HTML5의 태그를 알아보자.
'프로그래밍 > 웹프로그래밍' 카테고리의 다른 글
| HTML5 태그 정리 (0) | 2015.01.31 |
|---|