웹 페이지 구성 3요소
웹페이지에는 다음 3요소가 결합되어 있다.
- 웹 페이지의 구조와 내용 - HTML 태그로 작성
- 웹 페이지의 모양 - CSS(Cascading Style Sheet)로 작성
- 웹 페이지의 행동 및 응용 프로그램 - Javascript로 작성
첫 번째 요소는 웹 페이지의 문서 구조와 내용이다. 웹 문서에는 제목과 본문이 있고, 본문은 1장, 2장 등 장으로 구분하고, 각 장은 다시 1절, 2절 등 절로 구분된다. 본문은 여러 문단으로 나뉘며, 문단은 텍스트, 이미지, 표 등을 포함한다. 문서에는 머리말이나 꼬리말, 주석 등을 달기도 한다. 이들은 모두 HTML 태그로 작성한다.
두 번째 요소는 웹 페이지의 출력 모양이다. 웹 페이지의 제목, 장, 절의 글자 크기와 색, 배경색 등을 지정하고, 중요한 부분에는 밑줄을 치고, 어떤 부분은 이탤릭체로 만들고, 어떤 문단은 배경색을 넣고, 표의 외곽선은 점선으로 하는 등 웹 페이지가 브라우저 창에 출력되는 모양을 표현하는 부분으로, CSS 언어로 작성된다.
세 번째 요소는 웹 페이지의 행동이나 응용프로그램 부분이다. 웹 페이지가 출력된 브라우저 화면에 사용자의 마우스 클릭이나 키 입력 등을 처리하는 코드나, 여러가지 계산, 차트, 게임, 지도, 위치 서비스, 그래픽 등 다양한 종류의 응용프로그램은 자바스크립트 (Javascript) 언어로 작성된다.
3요소를 분리하여 웹 페이지 개발
웹 페이지를 3개의 구성 요소(구조와 내용, 모양, 행동 및 응용프로그램)로 분리하여 작성하는 것이 매우 중요하다.
●웹 페이지를 집을 짓는 것에 비유해보자.
웹 페이지의 3요소는 '집의 구조', '인테리어', '집에 설치된 기능' 에 대응된다. 집을 건축하면, 주인에 따라 다양한 모양의 인테리어로 집을 꾸민다. 그리고 주인에 따라 집에 설치하는 기능도 다를 수 있다. 같은 구조를 가진 집이라도 사는 사람에 따라 인테리어와 집에 설치한 기능이 모두 다를 수 있다.
●또 다른 사례로 마네킹의 경우를 보자.
벌거벗은 마네킹에 계절에 따라 다른 의상을 입힌다. 이것은 마네킹과 의상을 분리하여 만들었기 때문에 가능하다. 만일 처음부터 마네킹과 의상이 붙어있게 만들었더라면 마네킹에 다른 옷을 입힐 수 없다.
★웹 페이지를 만들 때도 '웹 페이지 구조와 내용', '웹 페이지 모양', '웹 페이지 행동 및 응용 프로그램' 을 분리하여 작성하는 것이 중요하다. 문서의 구조와 내용을 바꾸지 않고 출력 모양을 바꾸거나 기능만 변경하는 등 쉽게 변화를 줄 수 있기 때문이다.
HTML, CSS, Javascript
웹 페이지를 구성하는 3요소는 각각 다음 언어를 이용하여 작성한다.
- HTML - 웹 페이지의 구조와 내용
- CSS - 웹 페이지의 모양
- Javascript - 웹 페이지의 동적 변경 및 응용 프로그램 작성
1996년 이전 HTML 2.0까지는 웹 페이지의 구조와 내용을 모양과 분리하여 표현하는 개념이 없었다. 그러므로 HTML 태그로 문서의 구조와 내용, 모양을 동시에 표현하였다. 하지만, 1996년 HTML 3.0과 함께 CSS 1.0, Javascript가 개발되어 웹 페이지의 3요소를 따로 작성하게 되었다.
HTML 언어는 웹 페이지의 구조를 표현하기 위해 사용된다. <head>, <body>, <img>, <table> 등 HTML 태그를 이용하여 헤더, 본문, 꼬리말, 제목, 장, 절, 문단의 시작과 끝, 본문 텍스트를 지정하며, 어떤 이미지가 출력될 것인지 등을 지정한다.
CSS (Cascading Style Sheet) 언어는 웹 페이지가 화면에 출력되는 모양을 지정하는 데 사용된다. 예를 들어, 글자 폰트나 크기, 배경색, 글자색, 문단의 여백(margin), 외곽선의 굵기와 형태 등 다양한 모양을 지정한다.
자바스크립트(Javascript) 언어는 사용자의 마우스나 키보드 입력에 따라 웹 페이지를 동적으로 변화시키거나 게임 등 웹 페이지를 하나의 응용프로그램으로 만드는 데 이용된다.
'Programming > Web' 카테고리의 다른 글
| [HTML] [CSS] [Bootstrap] 웹 연습 (0) | 2022.09.22 |
|---|---|
| 동적 웹페이지 (0) | 2022.07.18 |
| 웹의 시작과 성공 (0) | 2022.06.21 |
| 웹 페이지의 주소, URL/웹 브라우저와 웹 서버 사이의 통신, HTTP (0) | 2022.06.21 |
| 웹 문서와 전자 문서의 차이 (0) | 2022.06.21 |