1. HTML 이란? (HyperText Markup Language)
HTML? 인터넷하면 흔히 Web이라고 생각하는데 알고보면 인터넷 서비스에는 종류가 많다.
가장 대표적인것이 Web(World Wide Web)이다. 그 외에 Telnet, FTP, E-mail등... 많이 있다.
그러니까 Web이란 인터넷의 많은 서비스중 하나이다. 인터넷과 Web을 같다고 생각하는 이유는 당연히
인터넷의 서비스중 Web을 가장 많이 사용하기 때문이다.
Web은 문서뿐만아니라 사진, 동영상, 음악... 까지 제공되니까 다른 서비스들에 비해 인기가 좋은것이다.
그리구 요즘에는 FTP, E-mail등을 Web을 통해서 사용할수 있기때문에 더더욱 Web을 많이 사용한다.
자... 그럼 Web과 HTML은 어떤 관계가 있을까? 바로 Web을 구성하는 가장 기본이 HTML이라는 것이다.
인터넷 어디서나 브라우저의 [소스]보기 메뉴를 선택하면 HTML로 이루어진 문서를 볼 수 있다.
간단히 말해 Web을 만드는 기본 언어가 HTML이다. 무슨말이냐? 비교분석을 해보면...
우리가 흔히 인터넷에 집을 짖는다구 하는데 집을 만들고 꾸밀려면 어떤것들이 필요한지 한번 알아보자.
ex) 집 - 주소(보이지 않는 정보)
- 땅
- 벽
- 방 : 침대 (크기="싱글/더블")
: 책상
: 옷장 (색="나무색/흰색")
: TV (종류="흑백/칼라")
우선 간단하게만 적었다. 집을 만들려면 꼭 필요한것이 있다. 그게 바로 땅, 주소, 벽, 방 등이 될것이다.
역시 방에 들어갈 수 있는 것들을 보면 침대, 책상, 옷장, TV 등이 있을 것이다.
침대의 특징(속성)에는 크기가 있는데 "싱글"과 "더블"을 선택할 수 있을 것이다.
옷장의 특징(속성)에는 색이 있는데 "나무색"과 "흰색"이 있다. 역시 TV에도 종류가 있다.
이제 우리가 간단하게 꾸며본 집을 가지고 HTML을 이해해보자.
. 주소 : 눈에 보이지는 않지만 그 집의 정보를 나타낸다.
HTML에서는 HEAD 태그가 이런 역활을 한다. 홈페이지의 TITLE 같은 내용을 적을 수 있다.
. 땅, 벽, 방 : 집을 만드는데 꼭 필요한 것들이다.
HTML의 기본 구조가 되겠다. (HTML, HEAD, BODY 태그 정도...)
. 침대, 책상.. : 방에 들어갈 수 있는 것들이다.
침대, 책상은 각각의 특징(속성)이 있다. 침대에는 크기라는 특징으로 "싱글"과 "더블"이 있는데
이 특징을 책상에 쓸 수는 없다. 책상에도 물론 크기가 존재할 수 있지만 "싱글"이나 "더블"이라고
크기를 쓰지는 않을 것이다. 침대, 책상, 옷장... 각각의 특징이 있는것이다.
HTML의 BODY가 바로 이런 방이라고 볼 수 있다. 대부분의 태그가 BODY 태그 안에 들어간다.
태그도 침대, 책상... 처럼 각각의 속성이 있다. 역시 IMG 태그의 속성을 TABLE 태그에서 쓸 수
없다. (물론 간혹 같은 것도 있긴하다.)
또 다른 예를 하나 들고 HTML과 비교하면...
ex) 사람 - 이름
- 머리
- 팔, 다리
- 몸 : 팬티 (종류="야광/망사/끈", 색="검은색/흰색/빨간색", 크기="90/95")
: 셔츠 (무늬="체크/땡땡이/민무늬")
: 바지
사람 역시 보이지는 않지만 이름이라는 정보를 가지고 있고 꼭 필요한 머리, 팔, 다리, 몸이 있을 것이다.
그리고 몸에는 우리가 팬티나 셔츠, 바지등을 입을 수 있다.
입을 것 마다 역시 각각의 속성이 있는데 바꾸면... 셔츠 종류에 "끈" 같은건.. ^^;
물론 색 같은 경우는 같을 수도 있다. HTML에서도 bgcolor, width, height... 같은 것들은 여러 태그에서
똑 같이 쓰이는 속성이다.
그리고 옷을 입을때 팬티와 바지를 입을 때 순서가 있다. 바지 위에 팬티를 입으면.. 미친넘이다.
(슈퍼맨이라고 생각하는 사람은 없겠지? ^^;)
HTML 태그도 겹쳐 쓸 수 있는데 순서가 있다. <B><I>글씨</I></B>
<B><I>글씨</B></I> 처럼 쓰면 안된다는 얘기다.
<I><B>글씨</B></I> 는 가능하다.
이렇게 태그(Tag)라는 이미 정해져 있는 명령을 이용해서 홈페이지를 만들 수 있다.
컴퓨터 언어하면 어렵게 느껴지겠지만 HTML은 알고보면 쉽다. 조금만 관심을 가지면 금방 배울수 있다.
2. HTML의 역사
사실 홈페이지 만드는데 무슨 역사까지 알아야 할까. 최소화해서 잠깐 집고 넘어간다.
HTML은 최초에 Tim Berners-Lee가 CERN에 있으면서 개발했고 NCSA에서 개발 한 Mosaic 브라우저로
보편화되었다. HTML이 보편화 되면서 표준안이 필요했고 W3C에서 표준안을 발표하구 있다.
[링크] http://www.w3c.org - W3C 홈페이지
3. HTML 작성에 필요한 준비물
대부분 O/S는 Windows를 사용할테지만 혹시 있을지 모르는 Linux 등의 User를 위해...
기본 적으로 HTML을 작성하기 위해서는 Edit 프로그램이 필요하다.
Win용은 "메모장".
Linux용은 "vi"가 대표적이다.
물론 이것 말구두 문서를 작성할수 있는 거의 모든~ 프로그램을 사용할수 있다.
워드프로세서같은 것두 전혀 상관없다. 어떤 프로그램을 이용한든 상관없지만 HTML 작성하고 저장할때 TEXT
형식으로 확장자를 HTM 또는 HTML로 저장해야한다.
좀더 화려한 홈페이지를 만들기 위해선 포토샵과 같은 그래픽관련 프로그램두 필요하다.
좀더 동적인 홈페이지를 원하시는 분들은 CSS, Flash, JAVA, JavaScript등...
수없이 많다. 하지만 HTML만 알아두 얼마든지 깔금한 홈페이지를 만들 수 있다.
많은 노력과 시간이 들것이다.
4. HTML의 기본 원칙 필독~!!!
1. <단어> 형태를 Tag(태그)라고 한다.
태그는 시작태그와 종료태그 두가지가 있다.
차이점은 종료태그는 </태그>와 같이 슬래시가 들어간다.
2. <태그>는 태그의 시작을, </태그>는 끝을 의미한다.
종료태그가 없거나 생략가능한 경우도 있다.
3. 태그는 대소문자를 구별하지 않는다.
<HTML>, <html>, <Html> 모두 같게 인식한다.
4. Enter(줄바꿈), Space Bar(띄어뜨기)는 아무리 많이써도 하나의 Space(공백)으로 나타난다.
줄바꿈, 띄어쓰고 싶을때는 정해진 태그를 사용한다.
5. HTML 문서내에 JavaScript, CSS를 같이 쓸 수 있다.
사용자마다 컴퓨터 환경이 조금씩 다른데 그런 영향을 받지않고 홈페이지 제작자가 의도한 모양,
스타일로 사용자에게 보여줄 때 CSS를 사용한다.
JavaScript는 HTML로는 할수 없는 좀더 동적인~ 홈페이지를 제작할수 있게 도와준다.
6. HTML 파일의 확장자는 .HTML 또는 .HTM으로 한다.
이거 말구 딴걸루하면 안된다. 7. HTML문서는 <HTML>로 시작해서 </HTML>로 끝난다.
버전에 따라 생략가능하지만 [기본구조]는 꼭 쓰도록 한다.
8. <태그><태그2></태그2></태그>의 형식으로 태그안에 다른 태그를 사용할 수 있다.
이때, <태그><태그2></태그><태그2>와 같이 순서가 바뀌면 안된다.
사실은 되는 경우도 있다. ^^; 그러나 분명 틀린 문법이다.
9. <태그 속성="인수"></태그> 형태로, 태그에 속성을 쓸 수 있다.
<태그 속성="인수" 속성2="인수"></태그>처럼 속성을 연속해서 쓸 수도 있다.
속성을 모든 태그에서 쓸 수 있는건 아니다. 각각의 태그마다 자기의 속성이 있다.
이거 외우는게 좀 골치아프다~. 10. 인수의 큰 따옴표는 생략가능하며, 작은 따옴표로 대신할 수 있다.
단, 인수에 Space(띄어쓰기)가 있을 때는 생략할 수 없다.
11. 문서에 쓰이는 색은 두가지 방법으로 표시할 수 있다.
. RGB를 이용 - 16진수 6자리로 구성되며 000000 ~ FFFFFF 까지 사용가능하다.
두자리씩 잘라서, 빛의 삼원색 Red.Green.Blue의 색깔을 나타낸다.
. 영어 색상이름 이용 - WHITE, BLACK 등...
12. HTML 작성시 들여쓰기(Tap, Space Bar이용), 주석문 달기를 해준다.
나중에 문서 수정시 도움이 많이 된다.
13. <!-- 주석문 --> 형태로 주석(설명)을 사용할 수 있다.
14. CSS는 HTML 문서내에 포함되어서 사용하는 것이 보통이다.
따로 파일을 만들어서 HTML 문서에서 불러다 쓸 수도 있다.
HTML 문서의 <HEAD> 태그 사이에 <STYLE> 태그를 써서 사용하거나
태그 뒤에 직접 STYLE이라는 속성을 이용하여 사용할 수도 있다.
15. Java Script역시 HTML 문서내에 포함할 수도 있고 따로 파일을 만들 수도 있다.
CSS와 마찬가지로 <HEAD> 태그 사이에 <SCRIPT> 태그를 사용하거나
태그의 이벤트 속성 값으로도 사용할 수 있다. |
위의 내용이 이해가 안되면 될때까지 보도록한다.
예제를 접하다보면 무슨 말인지 조금씩 이해할 수 있을것이다.
5. HTML의 기본 구조
HTML문서는
<html>
<head>
<title>문서의 제목</title>
</head>
<body>
본문
</body>
</html>
의 형태가 가장 기본이다.
1. <HTML>...</HTML>는 HTML문서의 시작과 끝을 의미한다.
2. <HEAD>...</HEAD>는 문서의 일반적인 정보를 표시할때 사용한다.
실제로 브라우저에 출력되지는 않는다. TITLE, SCRIPT, STYLE, META 태그 등을 쓸 수 있다.
3. <TITLE>...</TITLE>는 문서의 제목으로 브라우저 상단에 표시된다. HEAD태그 사이에만 쓴다.
4. <BODY>...</BODY>는 실제 브라우저에 나타나는 내용이 들어간다.
거의 대부분의 태그를 여기다 쓴다.
자.. 그럼 위에 파란색으로 써진 부분을 복사해서 과연 어떻게 나오는지 한번 확인해 보자.
파란색으로 써진 예제를 선택하구 복사한 후에.. 메모장에 붙여넣구. 저장을 한다.
그런다음 익스플로러에서 불러오기해서 확인해 본다.
하얀~ 화면에 걍 "본문" 딸랑 이거 나오면 성공이다.
그렇담... 이번에는 [메모장] 에서... "본문" 이라구 써진 부분에(body태그사이) 아무거나 써보구
역시 저장을 한다.
익스플로러에서 확인을 해보자~. 성공?
혹시.. 설마.. [메모장]에 [복사]하고 [저장]하란 말이 뭔말인지 몰라서 못한다면?...할말없음
성공했다면? 이제 HTML 반은 배웠다.
나머지 반은, 다른 태그들. 각각의 태그들이 하는 역활만 한다.
HTML 작성시 가장 기본이니까 꼭꼭~ 무조건 외워두도록 한다.
6. HTML 문서의 오류
HTML을 작성후 여러가지 이유로, 내가 원하던 결과를 못 얻을 수 있다.
소스를 다시 확인하며 아래와 같은 실수를 하지 않았는지 찾아본다.
오류는 브라우저 버전, 상황에 따라서 될때도 있겠지만 고치도록 한다. ^^*
1. 오타가 없는지 확인해 본다. 가장 많이 실수하는 부분이다.
2. <태그></태그> 처럼 태그의 시작과 끝을 제대로 썼는지 확인한다.
/ 와 </태그>를 빼먹는 경우도 많다.
3. <태그><태그2></태그></태그2>처럼 태그 순서가 바뀌진 않았는지 확인한다.
<태그><태그2></태그2></태그>가 올바른 방법이다.
4. <태그 속성="인수">에서 따옴표를 한쪽만 쓰진 않았는지 확인한다.
5. 인수에 Space(띄어쓰기)가 있는데 따옴표를 생략하진 않았는지 확인한다.
6. < 태그> 처럼 괄호와 태그글자 사이에 Space(띄어쓰기)가 있는지 확인한다.
7. 태그와 속성은 확실하게 구분 되었는지 확인한다.
<FONT ALIGN="CENTER">... <FONT>태그에는 ALIGN이란 속성이 없다.
<H1 FONT COLOR="BLUE">... 두개의 태그를 괄호안에 같이 쓸 수 없다.
<H1><FONT COLOR="BLUE">...가 올바른 방법이다.
8. 속성의 인수를 제대로 썼는지 확인한다.
<OL TYPE="DISC">... DISC 타입은 <UL>태그에서 쓴다.
9. 익스플로러 전용, 넷스케이프 전용 태그를 잘못 쓰진 않았는지 확인한다.
웹이조아
출처: http://webejoa.com/tag/index.html
'* DevSecOps > Development' 카테고리의 다른 글
| HTML 과제 (0) | 2012.04.10 |
|---|---|
| HTML+CSS+JavaScript2 (0) | 2012.03.23 |
| 1.2 글자와 문단 관련 태그 (0) | 2012.03.16 |
| 문서의 공통 구조 (0) | 2011.11.21 |