웹 프로그래밍

*본 내용은 명품 웹 프로그래밍 책을 참조하여 작성하였습니다.

이제는 웹 프로그래밍에 대해 차근차근 포스팅한다.

전자문서(웹 페이지)를 어떻게 주고받는지, 어떤 요소로 구성되어있는지 등등 전반적인 내용을 간략하게 정리한다.

1. 웹과 인터넷

21세기에 살면서 '웹', '인터넷'을 접하지 않은 사람은 적어도 대한민국에서는 적을 것이다. 아니면 한번쯤이라도 들어봤을 것이다.

보통 웹 = 인터넷이라고 생각하겠지만 둘은 서로 다른 개념이다.

웹(WorldWideWeb. 줄여서 웹이라고 하고, WWW라고도 한다.)

-컴퓨터에서 만든 전자문서(웹 문서)를 다른 컴퓨터에게 볼 수 있도록 하는 서비스.

인터넷

-웹 문서를 웹 서버(웹 사이트를 구축한 컴퓨터. 제공자 느낌)와

웹 클라이언트(웹 문서를 보는 이용자 컴퓨터)간에 주고 받을 수 있는 공간.

정리하자면 웹을 인터넷이라는 도로를 통해서 서비스한다고 보면 된다.

웹 브라우저

- 웹 문서를 볼 수 있는 소프트웨어. 인터넷 익스플로러, 크롬, 엣지 등이 해당한다.

2. URL과 HTTP

URL(Uniform Resource Locator)은 웹 페이지의 주소다.

다음과 같은 URL이 있다고 하자.

http://www.oracle.com:80/technetwork/java/index.html

http://				프로토콜
www.oracle.com			서버주소
:80 				TCP/IP 포트번호
technetwork/java		경로명
index.html			웹 페이지 파일이름

우리가 쓰고있는 주소창에 :80 이라는 부분은 보지 못했을 것이다.

포트번호 80은 기본으로 사용하는 포트여서 생략할 수 있어서 그런 것이다.

각각 무엇을 뜻하는지는 알 필요는 없다.

HTTP(HyperText Transfer Protocol)는 웹 브라우저(이용자)와 웹 서버(제공자) 사이의 통신방법을 의미한다.

어떤 방식으로 통신하는지는 생략한다.

3. 웹 페이지의 구성

웹 페이지를 구성할때 대표적으로 세 가지의 언어를 사용한다. (HTML, CSS, JavaScript)

그래서 3요소는 보통 셋트로 다닌다고 보면 된다.

HTML - 웹 페이지의 구조와 내용(기본적인 뼈대를 만든 다음)

CSS - 웹 페이지의 모양(살을 덧붙이고)

JavaScript - 웹 페이지의 동적 변경 및 응용 프로그램 작성(동작을 구성한다)

<!DOCTYPE html>
<html>
	<head>
		<title>웹 페이지</title>
	</head>
	<body>
		안녕하세요. 아래의 버튼을 클릭해 보세요.<br>
		<button type="button" onclick="show()">클릭!</button>
	</body>
</html>

안녕하세요. 아래의 버튼을 클릭해 보세요.

너무 칙칙하고, 클릭버튼을 눌러도 아무런 반응이 없다. (아래에 파일을 첨부해 두었다.)

간단하게 색상을 입혀보자.

<!DOCTYPE html>
<html>
	<head>
		<title>웹 페이지</title>
		<style>
			body{
				background-color: yellow;
				font-size: 30px;
			}
			button{
				background-color:green;
			}
		</style>
	</head>
	<body>
		안녕하세요. 아래의 버튼을 클릭해 보세요.<br>
		<button type="button" onclick="show()">클릭!</button>
	</body>
</html>

안녕하세요. 아래의 버튼을 클릭해 보세요.

배경색과 글씨크기, 버튼의 배경색이 바뀌었다.

하지만 여전히 버튼을 클릭해도 아무런 변화가 일어나지 않는다.

JavaScript로 변화를 주어보자.

<!DOCTYPE html>
<html>
	<head>
		<title>웹 페이지</title>
		<style>
			body{
				background-color: yellow;
				font-size: 30px;
			}
			button{
				background-color:green;
			}
		</style>
		<script>
			function show(){
				document.body.style.backgroundColor = "skyblue";
			}
		</script>
	</head>
	<body>
		안녕하세요. 아래의 버튼을 클릭해 보세요.<br>
		<button type="button" onclick="show()">클릭!</button>
	</body>
</html>