아침놀 Blog

Daybreakin Things

2 Entries : Results for 2005/10/08

초보를 위한 XHTML (2) - Hello, World!

Posted
Filed under 컴퓨터

Hello, World!

갑자기 난데없는 "Hello, World!"냐구요? 보통, 새로운 프로그래밍 언어를 배울 때 가장 먼저 하는 것이 이거랍니다. 그 프로그램 언어의 가장 기본적인 문법과 실행 구조를 가지고 저 문구를 출력하는 것이죠.

XHTML은 비록 프로그래밍 언어라고 할 수는 없지만, 어쨌든 컴퓨터 세계에서 사용되는 언어이므로 이걸 해보도록 하겠습니다.

<!DOCTYPE HTML PUBLIC "-//W3C//XHTML 1.1//EN">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/xhtml; charset=euc-kr" />
  <title>XHTML 연습</title>
</head>
<body>
  <p>Hello, World!</p>
</body>
</html>

메모장에서 이렇게 쓴 후, test.html 이라는 이름으로 저장해 보세요. (주의하실 것은 저장 대화상자에서 "파일 형식"을 "모든 파일"로 하셔야 합니다. 그래야 확장자가 제대로 붙습니다) 그리고 인터넷 익스플로러로 열어 보세요. 탐색기에서 더블클릭!

Hello, World! in XHTML

소스를 이해하진 못하셨더라도, 일단 저렇게 보이나요? 그러면 된 것입니다.

그러면 이제 소스를 읽어봅시다. 첫 번째 줄은, 이 문서가 어떤 버전의 규약을 사용하는지 나타냅니다. XHTML은 현재 1.1 버전까지 개발되었고, 이것이 가장 최신 표준입니다. 지금은 그 정도만 알아 두시고, 나머지는 그냥 그렇다고 알아두시면 되겠습니다. (이걸 쓰지 않을 경우 웹브라우저가 HTML 4.01 Transitional로 해석하는데, 문서를 화면에 보여줄 때 차이가 생겨 깨질 수 있습니다)

그 다음에는 본격적으로 태그가 나오기 시작합니다. 태그는 XHTML 문서의 소스를 봤을 때 꺽쇠(<, >)로 둘러싸여 있는 것들을 말합니다. <html>, <head> 등등이 모두 태그지요.

그런데, 컴퓨터는 사람보다 좀 덜떨어져서-_- 태그를 시작했으면 어디서 끝나는지 알려줘야 합니다. <xxx>로 시작했다면 </xxx> 라고 닫아줍니다. 여는 꺽쇠 뒤에 slash(/)를 붙이고 태그 이름을 적고 꺽쇠를 적습니다. 위의 소스에서 보시면 html, body, title, p 태그가 이렇게 쓰여 있습니다.

html 태그는 문서 전체를 둘러싸는 태그이며, 다른 모든 태그는 html 태그 안에 들어있어야 합니다. (물론, xhtml 규약 버전을 지정하는 DOCTYPE 지시자는 예외이고, 나중에 설명할 comment 태그도 밖에 둘 수 있습니다) 반드시 head 태그와 body 태그를 갖춰야 하며, head 태그는 title 태그를 가지고 있어야 하지요. (이렇게, 상위-하위 관계로 이어지는 구조를 "Tree 구조"라고 부릅니다. 윈도우의 폴더 구조와 같습니다.) 그러면 최소한 XHTML 문서라고 부를 수 있게 됩니다.

자, 이제 여러분을 혼란스럽게 하는 소스가 등장합니다. 네 번째 줄의 meta 태그인데요, 저게 도대체 무엇을 하는 걸까요? -_-; 일단 당장은 알아두실 필요가 없습니다. 다만, 이 페이지를 웹브라우저로 열었을 때 글자들이 깨지지 않고 제대로 보이게 하기 위한 거라고만 알고 계시면 됩니다.

그 밑의 title 태그는 브라우저의 제목표시줄에 보이는 제목을 지정합니다. 스크린샷과 소스를 보시면 알 수 있겠죠. 그리고 body 태그는 브라우저의 문서 표시 영역 안에 들어가는 내용들이 들어갑니다. 여기에 글도 들어가고 사진도 들어가고 링크도 들어가고.. 거의 모든 내용이 들어갑니다. (나중에 설명하겠지만 head 태그 안에도 다른 태그들이 더 들어갈 수 있습니다)

body 안에 있는 p 태그는 문단을 만듭니다. p 태그로 묶은 내용은 말 그대로 문단이기 때문에, 여러 개의 p 태그가 한 줄에 있더라도 알아서 분리됩니다. (태그를 닫았을 때 자동 줄바꿈이 됩니다) 이렇게 장황하게 설명했는데, 아래의 문법 규칙을 앍고 나면 다음부터는 간단히 설명해도 충분히 알아들으실 수 있을 것입니다.

XHTML의 문법

아까 말씀드렸듯이, 첫 줄에는 반드시 DOCTYPE 선언 지시자가 들어가고, html 태그가 문서 전체를 둘러싸며, head, title, body 태그는 반드시 있어야 한다고 했습니다. 또한 태그를 닫을 때는 /를 붙인다고 했었죠. 그 외의 규칙을 좀더 알아보겠습니다.

1. tag

태그는 기본적으로 열었으면 닫아야 합니다. 보통은 위에서 설명한 대로 태그 이름 앞에 /를 붙이지만, 소스의 meta 태그처럼 사이에 들어갈 내용이 없어 태그 그 자체 하나로만 쓰는 경우가 있습니다. 그럴 때는 여는 태그의 닫는 꺽쇠 바로 전에 /를 붙입니다. 나중에 설명할, img, br, meta, link 태그 등이 이에 해당합니다.

2. attribute (속성)

위 소스에서, meta 태그 안에 들어있는 내용들이 meta 태그에 대한 속성들입니다. http-equiv, content는 속성 이름이고, "Content-Type", "text/xhtml; charset=euc-kr"은 각각에 대한 속성값입니다. 속성이 있으면 반드시 속성값도 있어야 합니다. (즉 <meta http-equiv content= />와 같은 건 허용되지 않습니다. 그리고 각 속성값에는 반드시 쌍따옴표(")를 붙여야 합니다. 컴퓨터를 다뤄보신 분들 중에, 문자열만 쌍따옴표를 붙이고 숫자 등에는 안 붙인다고 생각하시는 경우가 있는데 XHTML에서는 무.조.건. 다 붙입니다.

아, 그리고 이 속성들은 여는 태그에만 쓰면 되고 닫는 태그에 또 쓸 필요가 없습니다. (실은 쓰면 안 됩니다. -_-)

3. whitespace

메모장에 소스를 쓸 때, 공백 문자들(스페이스, 탭, 엔터 등)을 보통 whitespace 라고 부릅니다. XHTML에서, 태그와 태그 사이에 있는 whitespace들은 모두 무시되는데, 몇몇 예외가 있습니다. 각 줄의 첫번째가 아닌, 1개씩 따로 떨어져 있는 공백 문자들은 유효합니다. 즉 문장 중간에 들어간 공백들은 그대로인데, 두 개 이상의 공백은 하나로만 인식합니다. 만약, p나 br 태그를 쓰지 않고 여러 줄에 걸쳐서 글을 썼을 경우 줄바꿈 없이 다 붙어나오게 되죠.

br 태그는 순수하게 줄바꿈 기능만을 수행합니다. 그리고 위에서 설명했듯이 닫는 태그가 합쳐진 형태입니다.

4. comment

지금이야 별 문제 없겠지만, 매우 복잡한 문서를 작성할 경우, 태그들만으로는 어디가 어딘지 분간하기 어렵습니다. 그럴 때는 화면에 표시되지도 않고 아무런 역할을 하지 않는 comment 태그를 사용합니다.

<!-- 아무 설명이나 넣으세요 -->

이런 형식으로 사용합니다. 저 사이에는 심지어 줄바꿈이나 태그가 들어가 있어도 싹 무시됩니다. 나중에 설명하겠지만, 이 comment 태그를 조금 다른 목적으로 활용하기도 합니다.

*

일단 여기까지 읽어보셨다면 다음 회부터는 수월하게 나갈 수 있습니다. 사실 시중에 나와있는 책들도 이런 기본 문법을 설명하고는 있지만, XHML과 HTML이 문법에 차이가 있어서 그걸 가지고 그대로 여기에 적용하시면 안 됩니다.

후우~~ 길었습니다. -_-; 끝까지 읽어보시지 못했더라도 가장 기본적인 내용이므로 숙지하셨으면 합니다. (계속 진행될 강좌의 내용을 보면, 여기서 장황하게 설명했던 것들이 어떤 걸 말하는 거였는지 자연스레 알게 되실 겁니다)

초보를 위한 XHTML (1) - 뜬구름 같은 개념 잡기

Posted
Filed under 컴퓨터

음.. 인터넷을 돌아다니다 보면 "초보를 위한 인터넷 강좌", "HTML 태그 배우기" 등의 자료들을 많이 볼 수 있습니다. 그러나, 그 중에서 제대로 된 XHTML을 알려주는 건 거의 전무하다시피 하죠. 그래서 초보자들을 대상으로 하는 XHTML 강좌(라고는 하지만..-_-)를 해볼까 합니다.

여기서 초보자라고 하는 것은 기본적으로 Windows를 사용할 수 있으며, 인터넷 익스플로러를 쓸 수 있는 정도를 말합니다. 프로그래밍이라든가, Firefox라든가 그런 거 전혀 모르는 상태에서 시작하지요.

제가 바쁘기 때문에 정기적으로 항상 못 올릴 수도 있고, 부득이하게 내용을 더 충실하게 하지 못할 수도 있지만, 조금이나마 이렇게 시작하면 보다 많은 사람들에게 도움이 되지 않을까 합니다. (저도 아직 XHTML에 대해서 아주 깊이있게 알지는 못합니다. 하지만 제가 아는 것이라도 조금씩 공유하다 보면 더 많은 효과를 얻을 수 있겠죠. 혹시 틀리거나 이상한 부분이 있으면 바로바로 코멘트 달아 주시기바랍니다.)

HTML은 들어봤는데 XHTML은 뭐지?

이 블로그에서 XHTML은 키워드로 지정되어 있는 단어라서, 그 단어를 클릭하면 설명이 뜨지요. 그러나 제가 위에서 말한 정도의 독자분이시라면 아마 무슨 소린지 잘 모를 겁니다. -_-;

인터넷을 돌아다니면 수많은 웹사이트(naver, daum, 각종 게임 사이트, 커뮤니트 등등)들을 볼 수 있습니다. 혹시 인터넷 익스플로러에서 오른쪽 버튼을 눌러 "소스 보기"를 해 보신 적이 있나요?

IE에서 소스보기
(그림을 오른쪽 버튼으로 클릭하시고 "그림 보기"를 누르면 원래 크기로 보입니다.)

소스 보기를 하면 메모장이 뜨고 그 안에 엄청나게 많은, 전혀 알 수 없는 영문 코드들이 보일 겁니다. 그게 바로 HTML 혹은 XHTML 코드죠. 즉 HTML/XHTML은 웹페이지를 만드는 데 사용되는 일종의 언어 규약입니다.

컴퓨터가 사람이랑 달라서, 아주 정확하게 딱딱 들어맞는 문법을 지켜야 합니다. 다행히, XHTML의 문법은 그리 어려운 편이 아닙니다. (다음 회에 자세히 다루도록 하죠)

여기서 잠깐! - 정작 중요한(?) HTML과 XHTML의 차이에 대해서 설명 안 해줬잖아~

네네.. -_-; 사실 HTML과 XHTML이 따로 나누어지게 된 배경 역사를 설명하면 매우 깁니다. 그걸 다 설명하는 건 무리고, 간단히 HTML의 차세대 버전이 XHTML라고 생각하시면 됩니다. 사용할 수 있는 태그도, 만들어진 목적도 다르죠. (물론 "하이퍼텍스트"라는 링크 개념을 구현하고 정보 전달을 한다는 궁극적인 목적은 같지만요)

조금 더 알고 싶으신 분들을 위해 약간 어렵게 설명하자면, 기존의 HTML은 화면에 보여지는 모양(layout or design)과 문서가 담고 있는 내용(contents)이 구분되지 않는 형태입니다. 나중에 나올 font 태그 등은 글자 모양을 지정하는 태그인데 동시에 내용과 함께 들어있죠. 예전에는 이래도 별로 문제가 없었는데, 인터넷이 발전하면서 동적인 웹페이지가 필요해졌습니다. 그런데 웹페이지를 생성하는 프로그램을 짜다보니, 내용과 디자인이 합쳐져 있어서 매우 불편하더라는 겁니다. 디자인은 일관되게 유지하면서 내용만 계속 바꾸자니, 태그 구조가 복잡하면 프로그램을 짜기가 어려웠던 것이죠.

혹시, 이미 HTML을 조금이라도 다뤄보신 분들은 table 태그를 아실 겁니다. 보통 table을 이용해서 문서의 틀을 짜는데, 모양이 복잡해지고 내용이 많아질수록 소스가 엄청나게 복잡해진다는 것을 경험해보셨을 겁니다. XHTML을 "제대로" 사용하면 그런 일을 피할 수 있지요!

XHTML은 문서의 내용과 구조만을 담고 있습니다. 그럼 디자인은 어떻게 하냐구요? CSS라는, 디자인만을 위해서 만들어진 언어 규약이 또 있습니다. (이것도 키워드인데, 클릭하면 역시나 알 수 없는 말들이...-_-) 하여간, 길게 주절주절 말했는데, 기본적으로 XHTML은 HTML의 차세대 버전이며 인터넷에서 웹사이트·웹페이지를 표현하는 데 사용되는 일종의 언어 규약이다라는 점만 알고 넘어가시면 되겠습니다.