HTML5 문서 편집
HTML5 문서의 편집기는 크게
2가지 종류로 나뉜다.
- 텍스트 편집기
- WYSIWYG(What You See Is What You Get) 편집기
HTML5 문서는 텍스트 파일이므로
메모장 등의
아무 텍스트 편집기나 사용하면 되고
UTF-8 형식의 .html 확장자로
저장하면 된다.
텍스트 편집기 중에는 에디트플러스,
이클립스, 서브라임 텍스트 등과 같이
HTML 태그와 속성, CSS 스타일,
자바스크립트 코드를
다른 색으로 보여주어 HTML5 문서
작성을 쉽게 해주는
편리한 텍스트 편집기들도 있다.
WYSIWYG 편집기는 웹 브라우저에
의해 출력되는 모양을 함께 보면서
웹 페이지를 편집할 수 있는 편집기다.
이런 종류의 편집기를 이용하면
HTML5에 관한 지식이 부족해도
쉡게 웹 페이지를 만들 수 있따.
Adobe의 드림위버, 커피컵, FCK에디터
등의 편집기들이 이에 속한다.
이제 웹 페이지를 작성해보자.
먼저 웹 페이지를 저장하기 위해
적당한 곳에 폴더를 만들고
대충 다음과 같이 HTML 문서를
작성해 보자.
<!DOCTYPE html>
<html>
<head>
<title>처음입니다.</title>
</head>
<body>
<h1>나의 홈 페이지</h1>
<hr>
<p>
저는 오늘 처음으로 홈 페이지를 만듭니다.
많이 방문해 주십쇼.
</p>
</body>
</html>
저장할 경우에는 미리 적당히
만들어 놓은 폴더에 저장하며,
확장자 설정은 HTML로 한다.
저장 후, 해당 폴더로 이동해 보면
저장한 HTML 파일을 볼 수 있다.
검증(validation)
HTML5 페이지를 표준에 맞게
작성하는 것이 일차적으로 중요하다.
하지만 현재 웹 페이지의 HTML5
태그, CSS3, 자바스크립트 코드가
표준에 적합하게 작성되어 있는지
모두 검사하는 도구는 없어,
각각 다른 도구로 검사가 이루어
지고 있다.
- HTML5 태그 검사: html5.validator.nu/
- CSS 스타일 시트 검사: www.css-validator.org/
- 자바스크립트 오류 검사: Eclipse, JSLint 등
디버깅(Debuging)
개발자들은 HTML 페이지 작성
과정에서
많은 오류 수정을 거치는데,
이 과정을 디버깅(debuging)이라
부른다.
대부분의 브라우저들은 HTML
페이지의
잘못 작성된 부분을 알려주거나,
자바스크립트 코드의 실행되는 과정을
보면서 디버깅할 수 있는 도구를 지원한다.
그중에서 크롬 브라우저가 HTML5
표준을 잘 준수하고
좋은 디버깅 도구를 제공한다고
알려져 있다.
크롬에서는 디버깅 도구를 '개발자
도구'라 부르며,
브라우저에서 마우스 오른 클릭 후,
검사 메뉴를 선택하면
개발자 도구를 열 수 있다.
흔히 F12키가 단축키이며, 비전공자가
이것을 보았을 때 당황한다.
참고 및 출처
 |
|