■ HTML(Hyper Text Make-up Language) 문서란?
HTML은 웹 문서를 작성할 때 사용하는 언어의 한 종류다. HTML 문서를 작성 할 때는 다른 스크립트 언어들이 사용되기도 하는데 기본적으로 문서의 양식을 만들거나 문자, 이미지 등을 꾸며 주는 역할을 하는 명령어들을 Tag(태그)라고 한다. HTML 문서는 브라우저에서 해석 되며 작성 방법이 쉬워 현재 가장 대중적으로 사용 되고 있다.
태그는 꺽쇠 "<", ">"를 사용해 일반 문자들과 구분하는데 대부분은 태그는 여는 태그가 있으면 닫는 태그가 있다. 예를 들어 "<p>" 문단을 나누는 p 태그는 문장 끝에 "</p>"처럼 슬래시(/)를 사용해 태그를 닫는다. 태그의 종류는 다양하지만 문서의 용도에 따라 자주 사용 되는 태그가 정해지기 때문에 자주 사용하는 태그는 익혀 두는 것이 좋다.
■ 웹표준이란?
웹 표준이은 W3C에서 제안한 것으로 웹 표현 기술이나 규칙을 정의한 규약이다. 웹 접근성에 관심이 많아지면서 웹 표준이 주목 받고 있다.
웹 표준을 따르는 문서를 작성 할 때는 XHTML, XML 등 구조언어, 표현언어인 CSS, 동작어인 Script를 사용한다. 웹 표준을 준수한 문서는 구조와 표현을 분리해 유지/보수가 쉬워지며 브라우저들간의 호환성을 유지한다.
■ 크로스 브라우징
우리나라에서 IE(인터넷 익스플로러)의 점유율은 70%를 웃돌지만 보안과 호환성의 이유 때문에 타 브라우저의 사용 빈도가 점점 많아지고 있다. 우리나라와 전 세계에서 자주 사용되는 브라우저에는 IE, FF(파이어폭스), Chrome(크롬), 사파리, 오페라가 있다.
IE는 버전이 다양한데 자동 업데이트가 지원되지 않는 IE9이하 버전의 점유율도 적지 않다. IE는 버전별로 호화되지 않는 문서들이 있어 문서 작성자는 IE 버전별 호환 작업을 해 주어야 한다. 또 각 브라우저들도 조금씩 호환성이 유지 되지 않는 부분들이 있어서 개발자나 디자이너, 혹은 퍼블리셔가 각 브라우저별로 호환성 작업을 해 모든 브라우저에서 같은 형태의 문서를 제공 할 수 있도록 작업이 필요하다. 이런 작업을 크로스 브라우징이라 한다.
■ THML 문서의 구조
HTML 문서는 일정 형태의 구조를 갖고 있다.
<html>
<head>
<title>문서의 제목</title>
...
</head>
<body>
.... 문서의 내용
</body>
</html>이게 HTML 문서의 기본 구조로 각 영역마다 역할이 주어진다. 처음 만나게 되는 <html>은 HTML 문서의 시작을 알린다. 다음에 <head>~</head> 영역에는 문서의 정보를 기술하거나 각종 선언문들을 작성하게 된다. meta 태그나 script, style 등이 선언 된다. <body>~</body> 영역에 문서의 본문이 들어가게 되는데 이 곳에 다양한 태그들을 이용해 목적에 맞는 문서들을 꾸밀 수 있고 자바스크립트를 이용해 동적인 페이지를 구현 하기도 한다.
■ HTML 문서 실습
test.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>명함관리</title>
<style>
body { text-align:center; }
form { margin:0; padding:0; }
.namecard_box { width:700px; padding:10px; margin:auto; text-align:left; border:1px solid #AEAEAE; } /* 테두리 */
.namecard_box > div { clear:both; }
.namecard_box div div.item { float:left; width:20%; margin:0 auto; } /* 항목 이름*/
.namecard_box div div.val { float:left; width:80%; margin:0 auto; } /* 입력 값 */
.namecard_box .btnbox { clear:both; padding:30px; text-align:center; } /* 버튼 */
</style>
</head>
<body>
<div class="namecard_box">
<form name="form_name" method="post" onsubmit="return senddata(this);">
<div>
<div class="item">이름</div>
<div class="val"><input type="text" name="name" size="20"></div>
</div>
<div>
<div class="item">성별</div>
<div class="val"><input type="radio" name="sex" value="1">남 <input type="radio" name="sex" value="2">여</div>
</div>
<div>
<div class="item">생년월일</div>
<div class="val"><input type="text" name="birth" size="10" maxlength="8"> 예)19991019</div>
</div>
<div>
<div class="item">소개</div>
<div class="val"><textarea name="intro" rows="5" cols="50"></textarea></div>
</div>
<div class="btnbox"><input type="submit" value="저장"></div>
</form>
</div> <!-- endof namecard_box -->
<script>
function senddata(f){
if(f.name.value == "") {
alert("이름을 입력하지 않았습니다.");
return false;
}
if(!f.sex[0].checked && !f.sex[1].checked) {
alert("성별을 입력하지 않았습니다.");
return false;
}
if(f.birth.value == "") {
alert("생년월일을 입력하지 않았습니다.");
return false;
}
if(f.intro.value == "") {
alert("소개를 입력하지 않았습니다.");
return false;
}
f.action = "save.php";
f.submit();
}
</script>
</body>
</html> 에디터를 이용해 문서를 작성 했다면 test.html로 저장한다. HTML 문서는 기본적으로 .html이나 .htm로 저장한다. PHP를 다루게 될 때는 HTML 문서도 .php로 저장하게 되는데 해당 문서에는 PHP 코드가 없으므로 일단 .html로 저장한다.
결과 화면
test.html을 브라우저로 읽게 되면 위와 같은 결과를 볼 수 있다. 간단한 개인 신상을 입력 받을 수 있는 FORM 문서이다.
정보를 입력하지 않은 상태에서 [저장] 버튼을 클릭하게 되면 자바스크립트 함수가 호출 되면서 정보 입력칸의 유효성을 검사하고 경고를 출력한다.
설명
<form name="form_name" method="post" onsubmit="return senddata(this);"> ~ </form>
FORM은 HTML 문서에서 웹서버로 정보를 전송 할 때 사용한다. FORM에는 여러 요소가 있는데 input, textarea, select 등이 있으면 input도 text, radio, checbox 등 여러 형태가 있다. 키보드나 마우스의 이벤트를 받아 submit() 함수가 실행 되면 <form> ~ </form> 내부의 정보들이 서버로 전송 된다.
<input type="submit" value="저장">
senddata(this)는 사용자 함수로 form의 하단에 submit 버튼을 클릭 했을 때 실행 된다. onsubmit 이벤트는 form 내에서 submit 버튼이 클릭 됐을 때 발생한다. 함수의 this 매개 변수는 form 자체를 통째로 함수 내부에 전송하겠다는 것이다.
<script>
function senddata(f){
// senddata 함수에서 f 매개변수는 form 객체이며 form 내부의 요소들을 구조적으로 포함하고 있다.
// 예를 들어 form 내부에 name 이라는 이름을 갖은 input 요소의 값을 참조 하고 싶을 때는 f.name.value처럼 가장 상위 요소부터 순차적으로 참고한다. 이건 form 내부의 name이라는 요소의 value 값을을 의미한다.
if(f.name.value == "") {
alert("이름을 입력하지 않았습니다.");
return false;
}
// 이 문장은 if 조건문으로 name 값에 아무것도 입력이 없다면 alert() 함수를 실행 시켜 경고를 내보내고 return false로 함수를 종료하고 false(거짓) 값을 반환 한다. return "리턴 값" 문을 만나게 되면 함수를 종료하고 리턴 값을 함수 호출자에게 반환한다.
if(!f.sex[0].checked && !f.sex[1].checked) {
alert("성별을 입력하지 않았습니다.");
return false;
}
// 성별을 입력 받는 sex 변수는 같은 이름을 갖고 있어 배열 형태로 자료를 담고 있다.
// sex[0]은 첫번째 배열 요소, 즉 "남"의 input 요소이고 sex[1]는 "여"의 input 요소이다.
// radio나 checkbox 타입은 value 대신 checked 속성으로 해당 요소가 체크 되었는지를 판단하다.
if(f.birth.value == "") {
alert("생년월일을 입력하지 않았습니다.");
return false;
}
if(f.intro.value == "") {
alert("소개를 입력하지 않았습니다.");
return false;
}
f.action = "save.php";
// action은 form에서 submit이 실행 됐을 때 정보를 전달 할 웹서버 측의 프로그램 파일 경로를 지정한다.
// 이 문장에서는 submit이 발생하면 save.php에 form 안에 있는 정보들이 전송 된다.
f.submit();
// 마지막으로 입력 값을 모두 비교 했다면 submit() 함수를 실행 해 form의 정보를 웹서버로 전송한다.
}
</script>
HTML 문서에서 주석은 //, /* ~ */, <!-- ... -->가 사용 된다.
javascript의 구문은 C언어와 비슷하며 연산자와 문법 또한 유사하다. http://blog.naver.com/mering_k/220102439166 연사자를 설명한 블로그이다.
연산자에서 "+"는 숫자형 데이터 일 때는 더하기 연산을 하지만 문자형일 때는 문자열을 붙이는 역할을 한다.
"문자열" + " 변수입니다." 이런 연산은 "문자열 변수입니다."라는 결과를 갖어온다. 데이터 타입은 자바스크립트 뿐만 아니라 다른 언어들도 모두 유사한 면이 있기 때문에 한 번만 익혀두면 다른 언어에서 어렵지 않게 응용 할 수 있다.
자바스크립트는 HTML 문서 내에서 TAG로는 부족한 다양한 기능을 부여하기 위해 사용하는데 특히 HTML 문서 내의 객체들을 다루게 될 때는 문장이 다소 복잡 할 수 있고 브라우저마다 조금씩 다르게 적용되는 명령어나 문법들 때문에 코딩 작업이 어려울 수 있다. 그런 복잡한 작업을 쉽고 간편하며 다양하게 응용 할 수 있도록 만든 자바스크립트 라이브러리가 있다. 혹은 프레임워크라고도 한다.
■ jQuery란?
공식 사이트는 http://jquery.com/이며 어려운 자바스크립트를 쉽게 사용 할 수도록 한 라이브러리(함수들의 집합)이며 대중적으로 많은 프로그래머와 디자이너가 애용하고 있다. jQuery는 자바스크립트 기능을 단순화 하는 것을 넘어 모바일 페이지 작성이나 애니메이션 효과 등 다양한 UX, UI 작업에 유용하다.
jQuery를 사용 할 문서의 상단에 소스코드를 참조할 수 있는 문장을 넣게 되는데 jquery.com의 파일을 불러와 사용해도 되고 내 서버에 파일을 업로드 해 사용 할 수도 있다.
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>....
이렇게 문서 내에 javascript 외부 파일을 불러와 사용 할 수 있다. 이 문장을 만나게 되면 이 문서에서는 jQuery를 사용 할 수 있다.
javascript의 기본 문법을 충분히 숙지 한 다음에 jQuery를 접근하는 것이 좋지만 시간이 허락하지 않는다면 javascript 사용법 정도 익힌 후에 jQuery를 해도 필요한 거의 모든 기능을 구현하는데 소스코드를 작성 할 때 javascript의 본래 문법이나 함수와 jQuery의 문법이 혼란 스러울 수 있다.
'프로그래밍 > 홈페이지 제작 기초' 카테고리의 다른 글
| 2-2 보강. 홈페이지 제작 시 자주 사용하는 style(CSS) 모음과 속성 설명 (0) | 2019.09.20 |
|---|---|
| 2-1 보강. 홈페이지 제작 시 자주 사용하는 HTML 태그 정리 (0) | 2019.09.20 |
| 1강. 멀티미디어의 이해와 진로 (0) | 2019.09.20 |