컴퓨터/쇼핑몰/컴퓨터 공부

HTML을 배워봅시다.

꿀 곰 2010. 8. 1. 11:46

아무도 기다리지 않았을 강좌를 시작합니다.
 
이건 나중에 연습장에 프린트 해서 단 한권의 책으로 보관하고 싶습니다. 궁시렁 궁시렁.
또한 저작권따윈 개뿔 없으니 막퍼가고 막욕하고 막하십쇼.
 
 
 
HTML을 배워봅시다
 
ㄴㅇㅁㄻㄴㅇㄻㄴㅇㄹ 일단 입을 풀고,
 
자 아래는 어디선가 많이본 홈페이지다
상당히 잘만들었다. 네이버 못지않은 디자인이다!
 
자 그럼 저 홈페이지는 어떤식으로 만들어질까.
 
 
(유명한 홈페이지 나배르)
 
홈페이지를 분석하기 위해 소스보기로 홈페이지의 표면적 소스를 보겠다.
 
 
(드림위버에서 열었더니 이따위 화면이 나온다.전혀 알아볼수 없다.)
 
 
하지만!
 
이 홈페이지는 <Table><TR><TD></TD></TR></TABLE> 로 만들어졌다.
 
무슨말인공 하니.
 
저 어려운 홈페이지도 하나하나 뜯어보면
한개의 칸,한개의 줄,한개의 테이블의 반복적 구성으로 이루어져 있다는 말이다.
 
물론 java 같은 다른 언어들이 혼합적으로 섞여 있지만 그건 옵션이라 생각하고
눈에 보이는것을 먼저 표현할수 있다면 그런 옵션의 언어들은 살붙이듯 붙이면 되는것이다!



자 그럼 이제 본격적으로 HTML 이라는 녀석을 한번 휘집어 보자.
 
HTML은 TAG라는 명령어를 통해서 움직인다
많이 들어보았을 것이다. 태그.
태그는 HTML의 모양과 행동양식을 정해주는 하나의 명령어라고 생각하면 되겠다.
 
자 태그를 대충 훓어보자.
 
-------------------------------------------------------------------------
 
태그는 "<" 로 시작해서 ">" 로 끝낸다.
 
ex:) <Tag>
 
그리고 그 태그 덩어리는 "/" 로 다시 끝낸다.
 
ex:) <Tag> </TAG>
 
그리고 그 태그의 시작과 끝 사이에 들어가는 객체들은 명령이 내려진 TAG의 영향을 받게 된다.
 
ex:) <Font size="12px">폰트 사이즈가 12px로 표기된다.</Font>

 
-------------------------------------------------------------------------
 
태그의 간단한 공식은 이렇게 이루어져 있다.
 
<HTML>
<HEAD>
<TITLE>홈페이지 제목</TITLE>
</HEAD>
<BODY>홈페이지 본문</BODY>
</HTML>
 
위쪽을 살펴보면 <HTML></HTML>  ,  <HEAD></HEAD>  이런식으로 묶여 있는걸 볼수 있다.
"<>" 이속에 있는 명령어들은 TAG의 내장 명령어이고 "<>" 와 "</>" 사이에 있는 것들은
지정된 TAG의 명령어들에 제약을 받게 된다.
 
 

아래는 TAG의 간단한 명령어 들이고 결과물이다.

 

대략적인 HTML 과 TAG의 속성만 오늘은 설명하겠다.

 

두서없는 글이라 상당히 읽는데 애먹을거라 생각된다.

대충 읽어주길 바란다. 돈벌자고 하는짓이 아니다.