웹표준 실습 환경 설정
1. 에디트 플러스 (EditPlus)
- https://www.editplus.com/kr/ 에서 평가판 다운로드 가능.
- 가격은 29700원. 이 나라의 개발자를 위해, IT 산업의 미래를 위해 양심을 갖고 모두 정품을 구매하자.
1) 도구모음 창에서 보여야 할 항목 지정
- [보기]-[도구모음/창]에서 보여야 할 항목 클릭
- 기본적으로 도구모음(T)과 상태표시줄(S), 디렉토리창(Alt+Shift+3)은 체크되어 있지만 체크가 꺼져있으면 켜둘 것.
- HTML 도구모음을 체크해서 켜둬야 한다.
2) 글꼴과 글자 크기 지정
[도구(T)]-[기본 설정(P)]-[일반]-[글꼴] : 맑은고딕, Regular, 12
3) XHTML 태그 사용, HTML 태그 자동 닫기
[도구(T)]-[기본 설정(P)]-[일반] : XHTML 태그 사용, HTML 태그 자동으로 닫기 체크
3) 문서 템플릿 지정
- [도구(T)]-[기본 설정(P)]-[파일]-[문서 템플릿] : HTML 문서 템플릿 사용. 열기를 누르면 template.html 파일을 불러온다.
- 그러면 아래와 같이 에디트 플러스에 템플릿 파일을 불러들여온다.
- HTML 템플릿은 새문서를 작성할 때마다 기본으로 입력될 내용을 지정하는 곳이다.
- 아래와 같이 수정한다.
- 1행 <!DOCTYPE html>은 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">으로 수정
- 2행 <html lang="en">은 <html>로 수정
- 4행 <meta charset="UTF=8">은 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">으로 수정.
- 5, 6, 7, 8행의 meta 태그는 삭제
- 다음 [새 이름으로 저장]을 선택하여 눌러 이 파일을 저장한다. 주의할 점은 인코딩을 UTF-8로 해야한다는 점이다.
- html의 charset=uft-8이면 파일 저장시 인코딩도 반드시 UTF-8로 통일해야 텍스트가 깨지지 않는다.
2. 크롬 (chrome)
1) 요소 검사 (F12)
- 선택한 부분의 HTML 소스 확인 가능
- 해당 요소에 적용된 CSS 속성 확인 가능
- 네트워크 속도 확인 가능
2) Web Developper
- [도구]-[확장프로그램]
- CSS, Javascript가 제거된 사이트 결과 확인 가능
3. 파이어폭스 (firefox)
1) 요소 검사 (Ctrl + Shift + I)
- 선택한 부분의 HTML 소스 확인
- 해당 요소에 적용된 CSS 속성 확인
2) Firebug
- [도구]-[부가기능]
- 선택한 부분의 HTML 소스와 해당 요소에 적용된 CSS 속성 확인
- BOX MODEL 레이아웃 확인 가능
3) Web Developper
- [도구]-[부가기능]
- CSS, Javascript가 제거된 사이트 결과 확인 가능
4) Fangs
- 스크린리더의 기능을 비슷하게 제공
'웹접근성과 웹표준' 카테고리의 다른 글
| XHTML의 구문 요소 (0) | 2013.07.18 |
|---|---|
| XHTML의 블록/인라인 요소, 시멘틱 요소 (0) | 2013.07.17 |
| XHTML의 기본 규칙: 마크업, DTP, 코딩 규칙, 기본 구조, title, meta 태그, 유효성 검사 (0) | 2013.07.16 |
| 웹 접근성 향상을 위한 전략 : 웹표준 (0) | 2013.07.14 |
| 웹접근성과 장애인 차별금지법, 한국형 웹 접근성 지침 KWCAG 2.0 (0) | 2013.07.13 |
