항상 초보자 여러분들을 위해서 열심히 뛰는 접니다. (생색내서 죄송합니다 ㅋㅋ) 그동안의 포스팅을 살펴보니 상당히 많은 글이 CSS에 치중되어 있다는 것을 알고! HTML에 관련된 포스팅도 하나 하기로 맘 먹었습니다.
실은 스타일시트 보다는 Html이 좀 더 머리아픈 감이 있습니다. 하지만 걱정하지 마십시오! 다 알아갈려면 끝도 없기 때문에(저도 다 알지는 못하지만) 오늘은 Html 의 기본 구조가 어떻게 되나? 에 대해 알아보도록 하겠습니다. 이 정도만 알아도 당당히 왕초보를 탈출 하실 수 있으리라 생각됩니다!
제 멋대로 Html이 무엇이냐 라고 물어본다면 저는 이렇게 정의 하겠습니다. 웹을 위한 일종의 문서형식 으로 양식이 있어서 규정하에 써야 하지만 그 어느것보다 자유롭게 쓸 수 있다고 생각됩니다. 뭐 말이 이상하게 되었는데 쉽게 웹의 문서 정도라고 생각하시면 됩니다. 우리가 공문서등을 쓸 때에도 양식이 있고 그에 맞춰 써야하듯이 Html 도 마찬가지 입니다. 이게 좀 짜증나긴 하지만요 ㅠㅠ 그래도 차근차근 하다보면 익숙해 진답니다.
가장 기본적인 Html의 구조는 아래와 같습니다.
실은 얼마전에 받은 skitch가 써보고 싶었습니당 ㅠㅠ
위의 그림에서 보시다 시피 기본 문서의 구조는 저렇게 됩니다. 이걸 텍스트로 풀어쓰자면
자, 지금 위의 소스를 자세히 보셨다면 Html에서 가장 중요한 부분을 눈치 채셨을 수도 있습니다. 그것은 바로
각각에 여는 태그에 상응하는 닫는 태그가 있다는 것입니다.
이제 기본적으로 어떤 순서로 기본적인 뼈대가 구성이 되시는지 아시겠지요? 이제는 해당 부분에는 어떠한 내용이 들어가는지에 대해 알아 보도록 하겠습니다. 별로 어렵지 않은 부분이니 부담없이 보셔도 좋습니다 :)
<html>~</html>이 부분은 문서의 모든 내용을 포함하는 부분입니다. 안에는 헤드와 바디 부분이 들어가 있습니다. <html>~<head>나 </body>~<html>에는 보통 아무런 내용도 삽입되지 않습니다. 출력도 안되고 효과도 없거든요 :)
<head>~</head> 부분입니다. 이 부분은 문서에는 실제로 출력되지는 않지만 문서의 중요한 내용들을 지정해주는 부분입니다. 이 부분에서 타이틀을 정한다던가 스타일시트를 지정해준다던가 검색엔진을 위한 메타태그를 지정해주는 등 매우 중요한 부분을 담당하고 있습니다.
<body>~</body> 부분은 실질적으로 문서에서 출력되는 부분을 담당하고 있습니다. 그러한 이유에서 레이아웃을 수정한다던가등의 짜임새나 출력되는 부분은 이 곳에서 수정을 하게 되므로 제일 많이 손이 가는 부분입니다. 안타깝게도 <foot>~</foot>은 없군요 ~ ㅋㅋ!
이 정도만 알고 계신다면 왕초보는 탈출이십니다. 이번 포스팅은 많이 안 어려우셨죠? 이제 자신의 스킨파일의 Html파일을 열어서 가만히 보고계신다면 뭔진 몰라도 어떤 부분이 어떻게 처리가 되는지는 조금씩 이해가 되시리라고 믿습니다. 그럼 다음에는 조금 더 자세한 내용으로 포스팅을 올리겠습니다. 올릴 기간은 추후 통보해 드리겠습니다. ㅋㅋ 여러분 대박 터지세요~~
실은 스타일시트 보다는 Html이 좀 더 머리아픈 감이 있습니다. 하지만 걱정하지 마십시오! 다 알아갈려면 끝도 없기 때문에(저도 다 알지는 못하지만) 오늘은 Html 의 기본 구조가 어떻게 되나? 에 대해 알아보도록 하겠습니다. 이 정도만 알아도 당당히 왕초보를 탈출 하실 수 있으리라 생각됩니다!
제 멋대로 Html이 무엇이냐 라고 물어본다면 저는 이렇게 정의 하겠습니다. 웹을 위한 일종의 문서형식 으로 양식이 있어서 규정하에 써야 하지만 그 어느것보다 자유롭게 쓸 수 있다고 생각됩니다. 뭐 말이 이상하게 되었는데 쉽게 웹의 문서 정도라고 생각하시면 됩니다. 우리가 공문서등을 쓸 때에도 양식이 있고 그에 맞춰 써야하듯이 Html 도 마찬가지 입니다. 이게 좀 짜증나긴 하지만요 ㅠㅠ 그래도 차근차근 하다보면 익숙해 진답니다.
가장 기본적인 Html의 구조는 아래와 같습니다.
위의 그림에서 보시다 시피 기본 문서의 구조는 저렇게 됩니다. 이걸 텍스트로 풀어쓰자면
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"이런 순서입니다. 아까 보지못했던 Doctype이나 xmlns가 추가 되었는데 이는 사소하지만 매우 중요한 해당 문서의 양식같은 것을 지정해주는 것입니다. 올바른 웹표준을 준수하려면 꼭 넣어주어야 하는 부분입니다. 관심이 있으시거나 이에 관한 자세한 설명을 원하시는 분은 http://1upz.com/entry/DTD 에서 보시길 바랍니다.
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body></body>
</html>
자, 지금 위의 소스를 자세히 보셨다면 Html에서 가장 중요한 부분을 눈치 채셨을 수도 있습니다. 그것은 바로
각각에 여는 태그에 상응하는 닫는 태그가 있다는 것입니다.
- Html에서 태그를 열어 주었다면 꼭 닫아주는 태그가 있어야 하며 여는 태그와 닫는 태그의 순서가 대칭으로 정확히 맞게 해주셔야 합니다.
이제 기본적으로 어떤 순서로 기본적인 뼈대가 구성이 되시는지 아시겠지요? 이제는 해당 부분에는 어떠한 내용이 들어가는지에 대해 알아 보도록 하겠습니다. 별로 어렵지 않은 부분이니 부담없이 보셔도 좋습니다 :)
<html>~</html>이 부분은 문서의 모든 내용을 포함하는 부분입니다. 안에는 헤드와 바디 부분이 들어가 있습니다. <html>~<head>나 </body>~<html>에는 보통 아무런 내용도 삽입되지 않습니다. 출력도 안되고 효과도 없거든요 :)
<head>~</head> 부분입니다. 이 부분은 문서에는 실제로 출력되지는 않지만 문서의 중요한 내용들을 지정해주는 부분입니다. 이 부분에서 타이틀을 정한다던가 스타일시트를 지정해준다던가 검색엔진을 위한 메타태그를 지정해주는 등 매우 중요한 부분을 담당하고 있습니다.
<body>~</body> 부분은 실질적으로 문서에서 출력되는 부분을 담당하고 있습니다. 그러한 이유에서 레이아웃을 수정한다던가등의 짜임새나 출력되는 부분은 이 곳에서 수정을 하게 되므로 제일 많이 손이 가는 부분입니다. 안타깝게도 <foot>~</foot>은 없군요 ~ ㅋㅋ!
이 정도만 알고 계신다면 왕초보는 탈출이십니다. 이번 포스팅은 많이 안 어려우셨죠? 이제 자신의 스킨파일의 Html파일을 열어서 가만히 보고계신다면 뭔진 몰라도 어떤 부분이 어떻게 처리가 되는지는 조금씩 이해가 되시리라고 믿습니다. 그럼 다음에는 조금 더 자세한 내용으로 포스팅을 올리겠습니다. 올릴 기간은 추후 통보해 드리겠습니다. ㅋㅋ 여러분 대박 터지세요~~
쓸 데 없는 추신
음; 제가 이상한건가요? 왜 글을 안올리시지 하고 와봤더니 두개나 올라와있네요! rss에서 새글이 안뜨는데 왜그런지 모르겠습니다
에? 무슨 일일까요 ㅋㅋ 뭐로 구독하세요?
한rss요.. 근데 이제떴습니다 ㅋ 전에 글은 아직도 안떠있지만요;;ㅋ 조만간 사이드바 때문에 이메일 보내겠습니다.. 제 블로그 디자인 아이디어도 물어볼겸^^:
보낸다 보낸다 하면서도 자꾸 뒤로 미루는바람에 ㅋ
네 ㅋㅋ 다음주는 간만에 한가하네요 ~_~ 유후