반갑습니다. 잡지식스토리의 촉끼남입니다.
전에도 말씀드렸다시피, '웹문서 공부'는 대중없이 그냥 손에 잡히는대로 포스팅 하기로 했습니다.
이번에는 저번 포스팅에서 설명했던 요소들이 모여서 하나의 HTML웹문서를 구성하는 기본 구조에 대해서 정리해 보겠습니다.
여기 저기 알아보니까, HTML문서는 요소들이 합쳐져서 이루어져 있는데, 이 요소들 사이에도 상위요소가 있고 하위요소가 있고 해서,
결과적으로 계층이 있고, 구조가 있다고 합니다.
그래서 그 구조를 '트리구조'라 하고 상속이 어쩌고 저쩌고 하면서 중요하다고 하는데, 솔직한 이야기로 촉끼남한테는 무슨 말인지도 잘 모르겠고, 간단하게 개념 정리를 하는 쪽으로 진행하겠습니다.
일단 기본적으로 EditPlus라는 프로그램을 이용해서 정리를 해 보겠습니다.
이것도 솔직히 어떤 프로그램인지는 잘 모르겠으나, 인터넷에 검색을 하다보니, 이 프로그램으로 수정/편집 작업을 하길래 촉끼남도 써 보는 것으로 했습니다. 일단 행마다 번호가 있어서 쓰기 편하다고 판단됩니다.
프로그램은 '네이버 자료실'에서 30일 쉐어웨어로 등록되어 있으니, 알아서 설치하시면 되겠습니다.
그럼 이제 개념 정리 들어갑니다.
1, 15 -- <html>태그 / HTML 웹문서임을 정의하는 요소입니다. 시작태그와 종료태그로 나타냅니다.
2, 4 -- <head>태그 / 웹문서의 기본 정보를 정의하는 요소입니다. 시작태그와 종료태그로 나타냅니다.
3 -- <title>태그 / <head>태그의 하위요소입니다. <title>태그 이 외에 다른 하위요소들도 있습니다.
웹문서의 제목을 정의하는 요소로, 실제 웹페이지 제목영역에 요소내용이 표시됩니다.
아래 이미지를 보면 웹페이지 제목이'잡지식스토리'로 표시되는 것을 확인 할 수 있습니다.
5, 14 -- <body>태그 / 웹페이지의 본문을 나타내는 요소입니다. 실제로 웹페이지에 표시되는 부분입니다.
6,7,8,9,10,11,12,13 - <h1>태그. <ul>태그, <li>태그, <p>태그 / <body>태그의 하위요소들입니다.
여러 가지 하위요소가 있으며, 일단 이번 포스팅은 기본구조만 정리하는 단계이므로, 앞으로 하나씩 정리하는 쪽으로 진행하겠습니다.
위와 같이 HTML문서를 작성하고, 웹브러우져로 보기를 하면 일반적으로 보이는 웹페이지가 보입니다.
웹브라우져는 윈도우 운영체제에서 기본 설치되는 '인터넷 익스플로어'를 포함하여 '오페라''사파리''파이어폭스''크롬'등 다양한 브라우져가 있으므로, 적당한 프로그램을 선택하면 되겠습니다.
아무튼, 위와 작이 작성한 HTML문서를 웹브라우져를 통해서 보면 다음과 같이 표시됩니다.
이정도로 해서, HTML웹문서의 기본구조에 대해서 알아보는 '웹문서 공부 정리'를 마치도록 하겠습니다.
앞서 말했다시피, 이번 포스팅은 웹문서의 기본구조를 알아보고 개념만 잡는 단계이기 때문에, 자세한 내용은 차차 정리하는 것으로 하겠습니다.
지금까지 잡지식스토리의 촉끼남이였으며, 다음 포스팅에서는 더욱 유익한 웹문서 공부거리로 돌아도록 하겠습니다.
'웹문서 공부' 카테고리의 다른 글
| [HTML]link태그, 각 웹문서끼리 연결하여 관계 나타내기 (0) | 2013.09.30 |
|---|---|
| [HTML]base태그, 기준이 되는 URL 절대경로 지정하기 (0) | 2013.09.29 |
| [HTML]title태그, 웹페이지에 웹문서 제목 입력하기 (0) | 2013.09.27 |
| HTML의 기본구조, 요소(Element)/태그와 요소내용 (0) | 2013.09.23 |
| [웹문서]웹문서 공부 시작합니다. (0) | 2013.09.17 |
