- 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 이라는 이름으로 저장해 보세요. (주의하실 것은 저장 대화상자에서 "파일 형식"을 "모든 파일"로 하셔야 합니다. 그래야 확장자가 제대로 붙습니다) 그리고 인터넷 익스플로러로 열어 보세요. 탐색기에서 더블클릭!
소스를 이해하진 못하셨더라도, 일단 저렇게 보이나요? 그러면 된 것입니다.
그러면 이제 소스를 읽어봅시다. 첫 번째 줄은, 이 문서가 어떤 버전의 규약을 사용하는지 나타냅니다. 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이 문법에 차이가 있어서 그걸 가지고 그대로 여기에 적용하시면 안 됩니다.
후우~~ 길었습니다. -_-; 끝까지 읽어보시지 못했더라도 가장 기본적인 내용이므로 숙지하셨으면 합니다. (계속 진행될 강좌의 내용을 보면, 여기서 장황하게 설명했던 것들이 어떤 걸 말하는 거였는지 자연스레 알게 되실 겁니다)
