스크립트 언어 개요와 HTML 문법
서버 스크립트와 클라이언트 스크립트
일반적으로 HTML만을 사용해도 간단한 홈페이지를 만들 수 있다. HTML을 사용해서 작성된 사이트를 정적인 웹 사이트(static web site)라고 부른다. '정적'의 의미가 고정되고 변화가 없다는 의미를 갖듯이 한번 HTML로 코딩해 놓으면 별도의 변경이 없이 작성해 놓은 HTML만 제공된다.
간단한 회사소개 웹 사이트 등은 이렇게 HTML만 사용해서 구성해 놓아도 별 문제가 없다.
HTML과 함께 JavaScript언어를 사용해서 '클라이언트 스크립트'를 작성할 수 있는데, '클라이언트 스크립트'란 클라이언트의 웹 브라우저에서 해석되는 것을 말한다. 즉, 웹 서버는 클라이언트가 요청하는 소스 코드를 변경 없이 고스란히 클라이언트에게 전송하는 역할만 한다. 그러므로 HTML이나 JavaScript만으로 구성된 코드는 웹 서버가 없어도 클라이언트의 디스크에 저장한 것을 바로 실행할 수도 있다.
[그림 12-15] 클라이언트 스크립트 개념도
날씨 정보, 쇼핑몰 물품의 현재 남은 수량 등 실시간으로 확인이 필요한 것은 서버 스크립트로 처리해야 한다. 이렇게 실시간으로 변경되는 웹 사이트를 동적인 웹 사이트(dynamic web site)라고도 부른다.
요즘의 웬만한 대형 사이트(쇼핑몰, 포털 사이트 등)는 거의 전부 동적인 웹 사이트라고 생각해도 무리가 없다. 동적인 웹 사이트를 구성하기 위해서는 '서버 스크립트'를 사용해서 웹 프로그래밍을 해야 한다. [그림 12-16]은 서버에서 스크립트를 해석한 후에 HTML 코드로 변환하여 전송하는 개념도다.
[그림 12-16] 서버 스크립트 개념도
서버 스크립트 언어로는 PHP,JSP,ASP.net 등이 있는데, 책에서는 그 중 MySQL과 가장 많이 활용되는 PHP를 다루는 것이다. 대부분의 서버 스크립트는 데이터베이스와 연동되어야 한다. 이 책은 MySQL 책이므로 MySQL과 PHP의 연동에 초점을 맞춰서 학습을 진행하는 것이다.
- 클라이언트의 웹 브라우저 입장에서는 정적인 웹 사이트든, 동적인 웹 사이트든 관계없이 접속되며 특별히 두 개를 구분하지도 않는다. 어차피 클라이언트에게 전달되는 코드는 HTML 또는 JavaScript 코드만 전달되기 때문이다.
HTML 태그
웹 사이트를 구축하기 위해서는 프로그래밍 언어가 필요하다. 그 중 대표적인 것이 HTML이다.
HTML은 HyperText Markup Language의 약자로 웹 페이지를 만들기 위한 대표적인 마크업 언어다. HTML을 알아야 하는 이유는 잠시 후에 배울 PHP와 함께 조합되어 사용되어야 하므로 미리 그 문법을 확인해 보자.
- HTML도 버전이 계속 업데이트되었다. 현재 일반적인 HTML이라 함은 주로 HTML 4.0표준을 의미하며, 여기서 취급하는 HTML도 HTML 4.0을 기준으로 한다. 최근에는 HTML5도 사용되는데 HTML5는 비디오, 오디오 등의 다양한 추가 기능과 멀티미디어를 별도의 액티브 X 없이도 웹 브라우저에서 바로 실행하기 위한 용도로 많이 사용된다.
먼저 HTML 태그에 대한 공통적인 특징을 몇 가지 기억하자.
- HTML 파일의 확장자는 .htm 또는 .html로 된다.
- HTML 파일은 텍스트 파일이므로 메모장 등에서 작성한다. 단, 웹 브라우저에서 한글이 깨져 보일 수 있으므로 인코딩 방식은 UTF-8로 저장한다.
- HTML의 태그는 대부분 <> 안에 쓴다.
- HTML은 대문자와 소문자를 구분하지 않는다.
- HTML 파일은 태그로 시작해서 태그로 종료한다.
HTML 파일의 기본 구조
전체 코드는 ~ 태그로 감싸져 있어야 한다. 그리고, 화면에 표시되지 않는 정보를 ~ 안에 표현하고, 화면에 표시되는 정보는 ~안에 표시한다.
먼저 에는 제목 이 가장 많이 사용되는데, 웹 브라우저의 타이틀 바에 표시되는 웹 페이지의 제목을 표시한다.
필요하다면 태그에는 속성을 표시할 수 있다. 예로 은 전체 페이지의 배경색을 초록색으로 변경한다. 만약, 배경에 그림을 넣고자 한다면 을 사용하면 된다.
-
여기서 잠깐
앞으로 HTML이나 PHP코딩은 메모장에서 작업하면 된다. 하지만, 메모장에서 코딩하면 문법 체크/들여쓰기 등을 하지 못하므로 별도의 에디터를 사용하는 것이 훨씬 효율적이다.PHP와 HTML 코딩을 위한 에디터는 상당히 다양하다. 몇 가지를 소개하겠다.
- 노트패드++(notepad-plus-plus.org): 무료, 가볍게 사용할 수 있음(권장함)
- Sublime Text 3(www.sublimetext.com/): 유료, 평가판 사용 가능
- 이클립스(www.eclipse.org): 무료, 전문 개발자가 주로 사용
- Aptana Studio(www.aptana.com): 무료, 이클립스 기반의 개발 환경
- 에디트플러스(www.editplus.com/kr): 유료, 가볍고 상당히 인기가 높은 툴로 평가됨
HTML 태그 기본
웹 페이지의 정보를 설정하는데 검색 엔진에게 문서의 내용을 요약해 주기도 하며, 언어의 설정에도 사용된다. 태그는 영역에 표현된다.  웹 페이지의 문자 코딩을 UTF-8로 인식되게 한다.글자의 줄을 바꿔준다.  결과는 2줄로 출력된다. ~, ~, ~ 글자에 밑줄, 굵은 글씨, 이탤릭체의 모양을 지정한다. 
~
글자의 크기나 색상을 지정한다.
결과는 궁서체로 10의 크기로 빨간색 글자가 출력된다.
수평선을 그어준다.
는 픽셀 수의 폭으로 선을 그어준다. 
~
클릭하면 다른 페이지가 연결되는 링크를 설정한다. 주로 href 속성으로 연결된 홈페이지를 지정한다. target 속성을 지정하지 않으면 현재 페이지에서 열린다.
클릭하면 새로운페이지에서 한빛의 홈페이지가 열린다.
PHP의 기본 구조와 주석
앞에서 간단히 다뤄봤지만 PHP코드는 확장명은 *.php로 사용하고 내용은 다음과 같은 구성을 한다.
2행 부분에 필요한 PHP 코딩을 하면 된다. 또한, PHP의 주석은 한 줄용으로 //와 여러 줄용으로 /**/를 사용한다.
변수
변수는 무엇을 담는 그릇으로 생각하면 된다. 예로 다음과 같이 사용하면 왼쪽의 변수에 오른쪽의 값이 들어간다. 또, PHP도 행의 끝에는 세미콜론(;)을 붙여야 한다.
이미 chapter07에서 MySQL에서도 변수를 다뤄봤다. PHP는 변수 이름 앞에 $를 붙여서 사용한다. 변수를 출력하려면 print나 echo문을 사용한다.
PHP 변수 이름은 몇 가지 규칙을 따라야 하는데, 요약하면 다음과 같다.
- 제일 앞에 $가 붙어야 한다.
- 문자와 숫자, 언더바(_)를 사용할 수 있지만 숫자로 시작할 수 없다. 변수 이름의 예는 다음과 같다.
$abc (O), $abc123 (O), $_abc (O), $_abc123 (O), $123 (X), $123abc (X)
데이터 형식
PHP 데이터 형식은 정수(int), 실수(double), 문자열(string), 불형(boolean), 객체(object), 배열(array) 등이 있다.
gettype() 함수는 변수의 데이터 형식을 보여준다. PHP는 별도의 변수 선언이 없으며, 값을 대입하는 순간에 변수의 데이터 형식이 결정된다.
그리고 다른 값을 넣으면 변수의 데이터 형식은 새로운 값에 의해서 변경된다. 그래서 [소스 12-4]에서는 $a를 계속 재사용 했다.
문자열
문자열은 큰 따옴표(") 또는 작은 따옴표(')로 묶어야 한다. 일반적으로는 아무거나 사용해도 되자만 우리가 사용할 예정인 SQL문을 문자열로 지정하기 위해서는 큰 따옴표로 묶고, 그 내부에 필요할 경우에 작은 따옴표로 묶어주는 방식이 바람직하다.
4행에서 'JYP'라는 것을 사용하기 위해서 바깥은 큰따옴표로 묶어줬다.
