웹페이지 구성요소

이글은 제가 2004년 1월 26일 시카고 중앙일보에 올렸던 글이지만 2020년 지금에도 웹사이트 구축에 도움이 될만한 글이라 생각되어 다시 공유 합니다. 업데이트 된부분은 노랑색으로 하이라잇 하였습니다.

웹 사이트를 하나의 책이라 가정할때 각각의 웹 페이지는 책장의 페이지라 생각할수 있고 웹 문서는 책과 같이 여러가지의 언어로 (영어, 국어, 일어 등) 쓸수 있으며 이를 표기하는 방법은HTML 이란 방식을 쓴다. HTML은 웹 페이지 표기 방식 (언어라고도 일컷음) 으로 테그를 사용하여 글씨채나 글의크기 또는색깔 이외에 가로 줄, 문장 칸넘기기, 그림 삽입, 그리고 하이퍼 링크를 포함해 다음 페이지로 갈수 있도록 문을 열어 준다. HTML 4.0 버전이후 글씨채나 크기 또한 글의 포멧팅 역활은 대부분 CSS (케스케이팅 스타일 시트) 를 사용하도록 권장하고 HTML 은 주로 글, 하이퍼 링크, 그림, 음성, 비디오, 테이블, 폼과 프레임의 웹 구성요소를 포함하거나 다른 프로그램으로 보내주는 역활을 하도록 한다.

글은 영어, 국어, 중어를 포함해 어떠한 언어로도 사용할수 있으며 HTML 문서내에 메타 (Meta) 테그를 이용해 어떠한 언어의 문서인지를 표기해 준다. 영어가 아닌 다른 언어일 경우 사용자가 사용하는 컴퓨터에 해당 언어가 설치 되었을경우 제대로 브라우저를 통해 보여줄수 있다. 언어를 설치할때 염두해야 할것은 기본 설치시 언어를 보여줄수는 있지만 입력할수는 없으므로 꼭 입력언어 설치를 해주어야 읽고 쓸수 있다. HTML이나 CSS를 사용해 글씨채나, 스타일 설정, 글씨 크기, 밑줄긋기, 굵은글씨 등 여러가지 포멧팅을 해줄수 있다.

하이퍼 링크는 현재 보여주는 문서내에서 비슷한 내용이나 새로운 내용의 문서, 그림, 메일주소 또는 다른 프로그램으로 보내주는 역할을 한다. 하이퍼 링크는 주로 글이나 그림을 통해 표기 하며 표기된 글이나 그림을 마우스로 클릭하면 다음의 문서로 넘어간다.

HTML 문서내에 멀티미디어 (그림, 음성 및 비디오) 개체 또한 포함할수 있으며 글과 같이 브라우저를 통해 쉽게 보여줄수 있다. 그림의 파일 포멧으로는 GIF 와 JPG를 많이 사용하며 음성의 경우 WAV, MID, RA 또는 MP3를 쓰며 비디오의 경우 AVI, MPG와 WMV 포멧을 쓴다.

테이블은 문서의 배열을 쉽게 해 주므로 특별히 문서내에 테이블이 (Row, Column) 필요하지 않더라도 많이 쓰인다. 이때, 테이블의 보더 (Border) 을 투명하게 하고 줄을 보여 주지 않으면 테이블을 사용한 것을 감출수 있으며 특히 그림과 글을 함께 표기할 경우 문자와 그림의 배치를 쉽게 할수 있다. 따라서, 전문적인 웹 페이지를 작성 하려면 테이블 사용능력은 기본으로 필요하다. (예전엔 테이블을 사용해 웹페이지를 섹션은 구성했다면 요즘은 HTML5 를 이용하고 <div> 를 이용해 페이지의 섹션은 나누어 준다.)

폼 (Form) 은 사용자로 부터 필요한 정보를 받아 볼수 있도록 해 주는 컴포넌트로 라디오박스, 채크박스, 텍스트 박스, 캄보박스 외 Submit 버튼등을 포함하여 사용자로 부터 개인정보, 크레딧 카드번호 그외 다양한 정보를 받아볼수 있도록 해주는 것으로 다이네믹하고 인터엑티브한 웹 사이트를 만들기 위해선 꼭 필요한 요소다.

마지막으로 프레임은 브라우저 윈도우내의 공간을 가로나 세로로 나누어 각각 다른 문서를 보여줄수 있는 기능으로 하나의 페이지를 헤더나 네비게이터 등으로 나누어 쓰도록 해 준다. 하지만, 브라우저 기능과 호환성및 프린팅부분에 단점이 있으므로 타 웹페이지를 불러오는 경우에만 사용하는것이 좋다.