웹 페이지의 구성요소
웹 페이지에는 다음 3요소가 결합되어 있다.
- 웹 페이지의 구조와 내용 - HTML 태그로 작성
- 웹 페이지의 모양 - CSS(Cascarding 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, Javascript가 개발되어
웹 페이지의 3요소를 따로 작성하게
되었다.
HTML 언어는 웹 페이지의 구조를
표현하기 위해 사용된다.
<head>, <body>, <img>, <table> 등
HTML 태그를 이용하여
헤더, 본문, 꼬리말, 제목, 장, 절, 문단의
시작과 끝, 본문 텍스트를 지정하며,
어떤 이미지가 출력된 것인지 등을
지정한다.
CSS(Cascarding Style Sheet) 언어는
웹 페이지가 화면에 출력되는 모양을
지정하는 데 사용된다.
예를 들어, 폰트나 크기, 배경색,
글자색, 문단의 여백,
외곽선의 굵기와 형태 등 다양한
모양을 지정한다.
Javascript 언어는 사용자의
마우스나 키보드 입력에 따라
웹 페이지를 동적으로
변화시키거나
게임 등처럼 웹 페이지를
하나의
응용프로그램으로 만드는 데
이용된다.
HTML, CSS, Javascript로 분리된 웹 페이지 만들기
지금부터 HTML, CSS, Javascript로
분리하여
웹 페이지를 작성하는 사례를
쬐끔만 맛보도록 해보자.
HTML 태그로 문서의 구조와 내용 만들기
메모장을 이용하여 다음과 같이
test1.html을 작성한다.
<!DOCTYPE html>
<html>
<head>
<title>웹 페이지의 구성 요소</title>
</head>
<body>
<h3>Evlis Presley</h3>
<hr>
He was an Amercian singer and actor. In November 1956, he made his film debut in
<span>Love Me Tender</span>.
He is often referred to as
"<span>the king of Rock and Roll</span>".
</body>
</html> 현재 test1.html 페이지에는 문서의
구조와 내용만 담겨 있다.
<meta charset="UTF-8">
한글이 제대로 표기가 되지 않을 때 <head> 바로 뒤에 추가해 주면 바르게 표기된다.
CSS로 문서 모양 만들기
이제 CSS 언어로 test1.html이 출력되는
모양을 만들어 보자.
CSS로 작성된 코드를 CSS 스타일
시트라고 부른다.
test1.html 문서에 <style></style>로
CSS 스타일 시트를 삽입하고
<style>
body { background-color : linen; color : green;
margin-left : 40px; margin-right : 40px; }
h3 { text-align : center; color : darkred; }
hr { height : 5px; border : solid grey;
background-color : grey; }
span { color : blue; font-size : 20px;}
</style>test2.html로 저장하였다.
<!DOCTYPE html>
<html>
<head>
<title>웹 페이지의 구성 요소</title>
<style>
body { background-color : linen; color : green;
margin-left : 40px; margin-right : 40px; }
h3 { text-align : center; color : darkred; }
hr { height : 5px; border : solid grey;
background-color : grey; }
span { color : blue; font-size : 20px;}
</style>
</head>
<body>
<h3>Evlis Presley</h3>
<hr>
He was an Amercian singer and actor. In November 1956, he made his film debut in
<span>Love Me Tender</span>.
He is often referred to as
"<span>the king of Rock and Roll</span>".
</body>
</html> CSS 스타일 시트를 가진 test2.html은
좀 더 컬러풀해졌다.
CSS는 4~5장에서 다루지만, 이해를 위해
<style> 태그에 들어있는
CSS 스타일 시트 중 한 가지만 설명해보자.
<style>
body { background-color : linen; color : green; margin-left : 40px; margin-right : 40px; }
</style>이것은 <body> 태그,
즉 브라우저 배경색은 linen, 글자색은 green
좌우 여백은 모두 40px로 설정하는 코드다.
Javascript 코드로 사용자 인터페이스 처리
마지막으로 test2.html에 <script></script>로
자바스크립트 코드를 삽입하여
test3.html로 저장한다.
그리고 이미지를 출력하기 위해 다음
HTML 태그를 삽입한다.
<div><img id="fig" src=""></div> 또한 <h3>Evlis Presley</h3> 태그를
다음과 같이 수정한다.
<h3 onmouseover="show()" onmouseout="hide()">Evlis Presley</h3>추가된 부분은 브라우저에서,
Elvis Presley가 출력된 영역 위에 마우스
커서를 올리면 show() 함수를 실행하고,
마우스 커서를 내리면 hide() 함수를
실행하도록 지시하는 코드다.
처음에는 엘비스의 이미지가 보이지
않지만,
Elvis Presley 글자 위에 마우스를
올리면 엘비스의 사진이 나타난다.
마우스를 내리면 사진은 다시 사라진다.
<!DOCTYPE html>
<html>
<head>
<title>웹 페이지의 구성 요소</title>
<style>
body { background-color : linen; color : green;
margin-left : 40px; margin-right : 40px; }
h3 { text-align : center; color : darkred; }
hr { height : 5px; border : solid grey;
background-color : grey; }
span { color : blue; font-size : 20px;}
</style>
<script>
function show() { // img에 이미지 달기
document.getElementById("fig").scr="ElvisPresley.png";
}
function hide() { // img에 이미지 제거
document.getElementById("fig").scr="";
}
</script>
</head>
<body>
<h3 onmouseover="show()" onmouseout="hide()">Evlis Presley</h3>
<hr>
<div><img id="fig" src=""></div>
He was an Amercian singer and actor. In November 1956, he made his film debut in
<span>Love Me Tender</span>.
He is often referred to as
"<span>the king of Rock and Roll</span>".
</body>
</html>
HTML 페이지는 웹 브라우저마다 다르게 그려질 수 있다.
웹 페이지에 CSS 스타일이 지정되지 않은 경우, 웹 브라우저들은 각자 디폴트 폰트와 크기로 출력한다. 그러므로 같은 HTML 페이지가 브라우저마다 다른 모양으로 나타날 수 있다.
참고 및 출처
 |
|