명품 웹 프로그래밍.

Slides:



Advertisements
Similar presentations
프로그래밍언어론 TA 윤들녁. 소개 윤들녁 연락처 : 공대 7 호관 4 층 401 호 데이터베이스 연구실 실습 후 날짜 _ 학번.zip 으로.
Advertisements

을지대학교 무선 네트워크 사용 방법 2010 년 06 월 01 일. 을지대학교 무선 네트워크 사용 방법 1. PC 무선랜 카드 활성화 및 체크 1 단계 : 시작 -> 설정 -> 네트워크 설정 2 단계 : 무선 네트워크 설정 선택 -> 마우스 버튼 오른쪽 클릭 -> 사용.
1 08 시스템 구성도 고려사항 * 웹 서버 클러스터 구성  클러스터 구축은 ㈜ 클루닉스의 Encluster 로 구축 (KT 인증,IT 인증 획득, 실제 클러스터 구축 사이트 200 여곳 )  웹 서버 클러스터는 Dynamic, Static, Image.
Window media player 1. 윈도우 미디어 플레이어가 많이 끊길 때 윈도우 미디어 플레이어실행 > 도구 > 옵션 > 성능 > 연결 속도 > 연결 속도 선택 Lan(10Mbps) 선택 > 네트워크 버퍼링 버퍼 10 초 네트워크창 > 스트리밍 프로토콜 > UDP.
한국예탁결제원 모바일 서비스 안내. 1. KSD 모바일 서비스 구축 배경 스마트폰 보급 및 이용확대 모바일 환경으로 서비스 환경 변화 고객 니즈 수용 및 서비스 향상.
앱인벤터 기초과정 (1차시) ㈜헬로앱스 강사: 김영준 목원대학교 겸임교수.
1 개요.
난이도 : 초급 제1장 앱 인벤터 소개 및 준비.
2016 유성환 Hybrid MOBILE.
웹 호환성 향상 전략 조 훈 DBDIB DBDIB.
컴퓨터와 인터넷.
목 차 C# 언어 특징 .NET 프레임워크 C# 콘솔 프로그램 C# 윈도우 프로그램 실습 프로그래밍세미나 2.
목차 Contents 무선인터넷용 비밀번호 설정방법 Windows 7 Windows 8 Windows XP MAC OS.
HTML5 웹 프로그래밍 입문 (개정판) 1장. 인터넷과 웹환경의 발전.
CHAPTER 1. 기초 사항.
Ⅰ. 클라이언트 스크립트 Ⅱ. 서버 스크립트 그렇다면 프로그래밍 언어를 수행하는 컴퓨터의 개념적인 구조를 살펴 본다면, 프로그래밍 언어가 무엇인지 이해하는데 도움이 될 것입니다. 현재 컴퓨터 구조의 모태가 되고 있는 폰 노이만 구조는 그림에서 보는 것과 같이, 명령어와.
1. 신뢰할 수 있는 싸이트 등록 인터넷 익스플로러 실행 후 실행
1 HTML5 개요.
Power Java 제3장 이클립스 사용하기.
1. Windows Server 2003의 역사 개인용 Windows의 발전 과정
Network Lab. Young-Chul Hwang
PHP입문 Izayoi 김조흔.
31강 JAVA 네트워크 JAVA 네트워크 InetAdress, URLConnection 클래스 Socket의 이해
8장. 원격지 시스템 관리하기.
제 2 장 WML 시뮬레이터 및 무선인터넷 서버 설치
NJM Messenger 박상원 박연호.
                              데이터베이스 프로그래밍 (소프트웨어 개발 트랙)                               퍼스널 오라클 9i 인스톨.
모바일 자바 프로그래밍 JDBC / WAP Ps lab 오민경.
홈페이지용 그림 활용법 그림 삽입 태그 <IMG> 배경 그림 다루기 그림과 문자열의 어울림
학습목표 학습목차 다른 홈페이지의 HTML 파일 코드를 보는 방법에 대해 알아봅니다.
FTP 프로그램의 활용 FTP 프로그램의 용도 인터넷 공간에 홈페이지 파일을 업로드할 때 필요
제 01 장 인터넷 프로그래밍 개요 학기 인터넷비즈니스과 강 환수 교수.
Wireless Java Programming
Slice&link.
1 개요.
Web Basic 김영성 인천대 OneScore
2장. JSP 프로그래밍을 위한 환경구성 제2장.
인터넷 따라 하기 ◆ 인터넷 시작 하기 ◆ 인터넷 끝내기 ◆ 홈페이지 방문 및 정보검색 ◆ 전자우편( ) 가입
2018년 11월 05일 박성진 Web & Internet [08] 레이아웃 P1 2018년 11월 05일 박성진
HTTP 프로토콜의 요청과 응답 동작을 이해한다. 서블릿 및 JSP 를 알아보고 역할을 이해한다.
PHP 개요 및 설치 Yang-Sae Moon Department of Computer Science
Adobe 제품 다운로드 및 설치 방법 안내 Adobe Creative Cloud Adobe License 권한을 받으신 분
뇌를 자극하는 Windows Server 장. 원격 접속 서버.
PC에 설치된 엔드포인트 클라이언트 프로그램을 클릭하여 프로그램 상자를 엽니다
명품 웹 프로그래밍.
ASP.NET AJAX / AJAX Control Toolkit 응용 2008 컴퓨터공학실험( I )
웹디자인
CGI란 무엇인가? CGI(Common Gateway Interface)의 정의
World Wide Web 중앙대학교 안 봉 현
인천대학교 웹과 인터넷 수업 개요 및 내용 소개.
네트워크 환경 구축과 이미지 전송 호스트/타겟 통신 직렬 통신을 이용한 이미지 전송 수퍼 데몬 BOOTP 환경 구축
프로젝트 제안서 -TCP/IP를 이용한 메신저 구현-
웹(WWW).
Cold Spring Harbor Laboratory Press 저널 이용 매뉴얼
암호학 응용 Applied cryptography
Introduction to JSP & Servlet
암호학 응용 Applied cryptography
.Net Web Application 2007 컴퓨터공학실험(Ⅰ)
모바일(폰)메일 서비스 정흠수 최동훈.
01. 분산 파일 시스템의 개요 네트워크에 분산된 파일을 사용자가 쉽게 접근하고 관리할 수 있게 해준다.
Chapter01 HTML 시작하기
웹과 모바일 홈페이지의 이해와 제작 CSS 깊이 알기
웹과 모바일 홈페이지의 이해와 제작 HTML태그와 CSS로 꾸미기
9 브라우저 객체 모델.
슬라이드 쇼의 설정 슬라이드 쇼의 실행 파일과 폴더의 관리 글꼴을 포함해서 저장 웹 페이지로 게시 압축 파일
프로그래밍 언어 학습을 위한 가상실습환경 창원대학교 이수현.
Chapter01 HTML 시작하기
학부 컴퓨터공학부 교육과정 (학부) 2학년 4학년 3학년 1학년 1학기 2학기 IPP 자격과정 전공트랙
About Html5 모바일인터넷과 이수진.
20 XMLHttpRequest.
Presentation transcript:

명품 웹 프로그래밍

강의 목표 웹의 기본 개념과 구조를 이해한다. 웹 서버와 웹 브라우저의 상호 관계를 이해한다. 웹 문서와 기존의 전자 문서와의 차이점을 이해한다. 웹 페이지를 구성하는 HTML, CSS, 자바스크립트의 3 요소를 이해한다. HTML5의 목적과 기능을 안다. HTML5로 웹 페이지를 작성하는 과정을 알고 필요한 도구를 안다.

웹의 기본 목적과 구성 웹의 기본 목적 웹의 구조 웹의 구성 다른 여러 컴퓨터에서 문서를 공유하거나 보는 목적 웹에서 다루는 문서를 웹 문서라고 부름 웹의 구조 인터넷을 활용하여 거미줄처럼 연결된 정보 소통 망, World Wide Web 웹 문서를 인터넷 상의 컴퓨터들끼리 주고 받는 네트워크 시스템 웹의 구성 웹 서버와 웹 클라이언트 컴퓨터들로 구성 웹 서버 웹 사이트를 탑재하는 컴퓨터. 구글(www.google.com), 네이버(www.naver.com) 등 웹 문서, 이미지. 동영상 등의 데이터 저장 관리 웹 클라이언트의 요청을 받아 웹 문서 전송 웹 서버로 작동하도록 하는 소프트웨어 실행 웹 클라이언트 사용자 인터페이스 담당 웹 서버에 웹 문서를 요청하고 받아 사용자에게 출력

웹 서버와 웹 클라이언트로 이루어진 웹 인터넷 아마존 웹 서버 웹 서버 웹 클라이언트 웹 서버 웹 서버 웹 클라이언트 HTML 문서, 이미지, 동영상 HTML 문서, 이미지, 동영상 웹 서버 HTML 문서, 이미지, 동영상 인터넷 웹 서버 HTML 문서, 이미지, 동영상 웹 클라이언트 구글 웹 서버 웹 서버 HTML 문서, 이미지, 동영상 HTML 문서, 이미지, 동영상 웹 클라이언트

웹 서버와 웹 클라이언트의 작동 웹 문서 요청 HTML 문서, 이미지, 동영상 웹 문서 전송 웹 클라이언트 웹 서버

인터넷과 웹은 다르다 인터넷 월드 와이드 웹, 웹(WWW) 인터넷이 고속도로라면 웹은 고속도로 망을 이용한 물류 산업 웹의 개념이 나오기 전부터 만들어진 컴퓨터 연결 네트워크 1969년 미 국방성 고등 연구 계획국(ARPA) 여러 대학들과 계약 업체 사이의 컴퓨터 연결 컴퓨터마다 고유한 주소(IP 주소, 113.198.80.208)를 부여하여 컴퓨터 구분 인터넷을 활용하는 응용 서비스 사례 전자우편(e-mail) 뉴스(news) 파일 전송(ftp) 채팅(Internet Relay Chat) 메신저(Messenger) P2P(Peer to Peer) 스트리밍 서비스(Streaming Service) 인터넷 전화기(Internet Phone) 월드 와이드 웹(World Wide Web) 월드 와이드 웹, 웹(WWW) 인터넷을 활용하는 응용 서비스 중의 하나 웹 서버와 웹 브라우저로 구성되는 정보 전달 및 공유 서비스 인터넷이 고속도로라면 웹은 고속도로 망을 이용한 물류 산업

웹 브라우저의 종류 인터넷 익스플로러 오페라 파이어폭스 크롬

Netscape Communicator 웹 브라우저의 역사 1990 WORLDWIDEWEB Nexus 1993 Mosaic 1994 Netscape Navigator 1995 Internet Explorer 1996 Opera 1998 Netscape Communicator 2002 Mozilla Firefox 2003 Safari 2008 Chrome 2015 Microsoft Edge

최초의 웹 브라우저, WorldWideWeb 웹 개념 창시자, Tim Berners-Lee가 개발 이후 Nexus로 개명 출처) Wikipedia

여러 웹 브라우저의 특징 Netscape Navigator Internet Explorer Opera Safari 일반인도 쉽게 사용하도록 GUI를 갖춘 최초의 브라우저 1993년 Marc Andreesseen 개발. Netscape 사 창업 Internet Explorer 1995년 마이크로소프트에서 개발 윈도우 운영체제에 끼워 배포하여 순식간에 Netscape 잠식 Opera 1994년 오페라 소프트웨어에서 개발. 1996년에 출시 프로그램 크기 작고, 렌더링 속도 빠름. 사용 미미 Safari 2003년 애플에서 개발. Mac OS와 모바일 iOS에서 실행 Mozilla Firefox 2002년 Mozilla 재단에서 개발. W3C의 표준안에 가장 충실 Mozilla 재단은 Netscape 사가 브라우저 소스를 공개하고 만든 재단 Google Chrome 2008년 구글에서 개발. 새로운 강자. 현재 가장 많이 사용되고 있음 Microsoft Edge 2015년 마이크로소프트에서 개발 Internet Explorer 업그레이드 중단

2016년 기준 웹 브라우저의 시장 점유율 비교 데스크톱 브라우저 점유율 비교 (b) 모바일/태블릿 브라우저 점유율 비교

웹 사이트 구축 웹 사이트 구축 웹 서버로 사용할 컴퓨터에 웹 서버 소프트웨어 설치 웹 페이지, 동영상, 이미지 저장, 데이터베이스 설치 웹 서버 응용프로그램 개발 및 설치 웹 서버 소프트웨어(HTTPd) 검색 HTML 문서, 이미지, 동영상 등 DATABASE 회원관리 주문 지도 웹 서버 응용프로그램 웹 브라우저 요청 전송 웹 서버 컴퓨터 웹 클라이언트 로그인 웹 사이트

웹 서버 소프트웨어 웹 서버 소프트웨어 기능 웹 서버 소프트웨어 종류 웹 브라우저로부터 요청(웹 문서 혹은 검색) 해석 필요한 웹 서버 응용프로그램 작동시키기 웹 서버 응용프로그램의 실행 결과를 웹 브라우저로 전송 웹 서버 소프트웨어 종류 Apache 사에서 만든 Apache 마이크로소프트 사에서 만들고 Windows NT에서만 실행되는 IIS NGINX 사에서 만든 nginx 구글에서 만들고 구글 사이트에서 실행되는 GWS(Google Web Server)

웹 서버 응용프로그램 웹 사이트의 목적을 이행하는 서버 측 소프트웨어 웹 서버 응용프로그램 개발 언어 예) 검색 사이트 – 검색 웹 서버 응용프로그램 필요 예) 번역 사이트 – 번역 웹 서버 응용프로그램 필요 예) 회원 관리 사이트 – 회원 관리 웹 서버 응용프로그램 필요 웹 서버 응용프로그램 개발 언어 서버용 자바스크립트 JSP(Java Server Page) – Java의 스크립트 언어 Java – 자바 서블릿 C/C++ PHP, Perl, Python 등

웹 문서와 전자 문서 전자 문서 웹 문서 워드나 한글, 메모장 등으로 작성하고 볼 수 있는 문서 하나의 문서는 보통 하나의 파일로 저장 페이지 별로 파일에 저장하지 않음 텍스트 본문, 이미지, 오디오, 비디오 등을 모두 문서 내에 직접 저장 웹 문서 HTML 언어로 작성/웹 브라우저로 보기 웹 문서는 페이지 단위로 파일에 분할하여 저장 페이지 마다 하나의 파일에 나누어 작성되고 저장 – 웹 페이지 각 페이지는 하이퍼링크로 연결 웹 페이지 텍스트 만 저장 - 이미지, 그래픽, 동영상 등은 별도의 파일로 저장 웹 페이지에 이미지, 그래픽, 동영상 파일의 이름으로 연결 웹 페이지들의 연결 하이퍼링크(hyperlink) – 다른 웹 페이지의 주소를 가진 텍스트 정보 웹 페이지들은 하이퍼링크로 상호 연결됨 웹 문서를 읽는 순서는 사용자가 결정 웹 문서는 사용자가 하이퍼링크를 따라 웹 페이지 선택 – 네비게이션 전자 문서는 문서를 만드는 사람이 결정

한글 파일(전자 문서 사례) 웹 문서

웹 페이지의 주소, URL http://www.oracle.com:80/technetwork/java/index.html 프로토콜 서버주소 TCP/IP 포트번호 경로명 웹페이지 파일이름 프로토콜 : HTTP, https, file, ftp, telnet, mailto, news 등 서버주소 : 웹 페이지를 가진 컴퓨터의 인터넷 주소, IP 주소 TCP/IP 포트 번호 : 서버가 브라우저로부터 접속을 기다리는 TCP/IP 포트 번호. 프로토콜마다 다르며, HTTP의 경우 80, telnet은 23 경로명 : 웹 서버 내 웹 페이지 파일의 폴더 경로 파일이름 : 웹 페이지의 HTML 파일 이름

웹 브라우저와 웹 서버 사이의 통신, HTTP 웹 서버 oracle 웹 서버 1~5 사이의 과정 : HTTP 세션 http://www.oracle.com/index.html HTML 페이지, 이미지, 동영상 웹 서버 3. HTML 페이지(index.html) 요청 4. HTML 페이지 (index.html) 읽기 5. HTML 페이지(index.html) 전송 6. HTML 페이지 해독 및 출력 1. 웹 서버(www.oracle.com) 연결 요청 2. 웹 서버에 연결 수락 oracle 웹 서버 1~5 사이의 과정 : HTTP 세션

웹의 시작 Tim Berners-Lee의 아이디어에서 시작 1989년 웹 개념 제안 1990년 WorldWideWeb 프로젝트 시작 서버-클라이언트로 동작하는 HTTP 모델 창시 HTML 언어 개발, 하이퍼링크 개념 구현 세계 최초의 웹 서버와 웹 브라우저 개발

Tim Berners-Lee가 CERN에서 사용하던 NeXT 컴퓨터 최초의 웹 브라우저 WorldWideWeb를 개발하는데 이용 (참조 : https://en.wikipedia.org/wiki/World_Wide_Web)

웹의 성공 만들기 쉬운 웹 문서 효율적인 HTTP 통신 웹 서버와 웹 브라우저의 작업 분담 사용하기 쉬운 HTML 태그 언어, 단순하고 직관적 HTML 태그의 웹 페이지는 텍스트 문서 아무 텍스트 편집기로 편집 가능 효율적인 HTTP 통신 웹 브라우저가 웹 페이지를 모두 전송 받고 나면 웹 서버와의 접 속을 끊는 방식 웹 서버에 많은 웹 브라우저의 동시 접속에 따른 낮은 부담 웹 서버와 웹 브라우저의 작업 분담 웹 서버는 웹 브라우저로부터 요청 받은 자원 전송 담당 웹 문서를 출력하는 것은 브라우저의 몫 웹 서버의 낮은 부하로 많은 동시 접속자 지원

모든 곳에 웹이 있다. 웹은 오늘날 정보 통신의 기본 플랫폼 다양한 기기에 웹 서버 설치 웹은 장치를 제어하는 쉬운 방법 TV, 셋톱, 로봇, 장난감, 무선 공유기 등 웹은 장치를 제어하는 쉬운 방법 무선 공유기 사례 무선 공유기에는 키보드와 스크린 없음 무선 공유기에 웹 서버 설치 아무 브라우저를 이용하여 무선 공유기의 웹 서버와 접속 브라우저를 이용하여 무선 공유기 내의 설정 관리

웹 페이지 구성 웹 페이지 구성 3 요소 웹 페이지는 3 요소를 분리하여 개발 웹 페이지의 구조와 내용 - HTML 웹 페이지의 모양 - CSS(Cascading Style Sheet) 웹 페이지의 행동 및 응용 프로그램 – Javascript 웹 페이지는 3 요소를 분리하여 개발

HTML, CSS, Javascript로 분리된 웹 페이지 만들기 <!DOCTYPE html> <html> <head> <title>웹 페이지의 구성 요소</title> </head> <body> <h3>Elvis Presley</h3> <hr> He was an American singer and actor. In November 1956, he made his film debut in <span>Love Me Tender</span>. He is often referred to as "<span>the King of Rock and Roll</span>". </body> </html> HTML 태그로 구조와 내용만 있는 웹 페이지

HTML,CSS,Javascript로 분리된 웹 페이지 만들기 <!DOCTYPE html> <html> <head> <title>웹 페이지의 구성 요소</title> <style> body { background-color : linen; color : green; margin-left : 40px; margin-right : 40px;} h3 { text-align : center; color : darkred;} hr { height : 5px; border : solid grey; background-color : grey } span { color: blue; font-size: 20px; } </style> </head> <body> <h3>Elvis Presley</h3> <hr> He was an American singer and actor. In November 1956, he made his film debut in <span>Love Me Tender</span>. He is often referred to as "<span>the King of Rock and Roll</span>". </body> </html> CSS로 문서의 모양(스타일) 코딩

3. Javascript 코드로 사용자 인터페이스 처리 <!DOCTYPE html> <html> <head> <title>웹 페이지의 구성 요소</title> <style> body { background-color : linen; color : green; margin-left : 40px; margin-right : 40px;} h3 { text-align : center; color : darkred;} hr { height : 5px; border : solid grey; background-color : grey } span { color: blue; font-size: 20px; } </style> <script> function show() { // <img>에 이미지 달기 document.getElementById("fig").src = "ElvisPresley.png" } function hide() { // <img>에 이미지 제거 document.getElementById("fig").src= ""; </script> </head> <body> <h3 onmouseover="show()" onmouseout="hide()"> Elvis Presley</h3> <hr> <div><img id="fig" src=""></div> He was an American singer and actor. In November 1956, he made his film debut in <span>Love Me Tender</span>. He is often referred to as "<span>the King of Rock and Roll</span>". </body> </html> 자바스크립크 코드 추가 텍스트에 마우스를 올리면 show() 함수 호출 텍스트에 마우스를 올리면 엘비스 이미지 출력. 내리면 없어짐

HTML5 HTML 언어의 역사 HTML, CSS, Javascript, 웹 브라우저의 타임 라인 1990년 물리학자인 Tim Berners-Lee가 정의 표준화된 태그로 웹 페이지를 작성하는 언어 <img>, <hr>, <table>, <li> 등 HTML, CSS, Javascript, 웹 브라우저의 타임 라인 다음 슬라이드

HTML CSS Javascript Web Browser 1990 HTTP HTML 2.0 1993 1994 Netscape 1995 Internet Explorer 1996 Opera 1998 2002 Mozilla Firefox 2003 Safari 2008 Chrome 2015 Microsoft Edge HTML 3.0 1997 HTML 3.2 HTML 4.0 HTML 5 시작 2007 2014 HTML 5 CSS 1 CSS 2 2012 CSS 3 Javascript 1.0/1.1 Javascript 1.2 Javascript 1.3/1.4 2000 Javascript 1.5 2005 Javascript 1.6 2006 Javascript 1.7 Javascript 1.8 HTML CSS Javascript Web Browser 1991 HTML 1.0

HTML5 출현 배경 1. 비표준 기술의 혼재, 웹 브라우저의 비 호환성 2. 인터넷 기기의 다양화 Active-X나 플러그인, 플래시 등 비표준 기술 난립 브라우저 사이에 HTML 문서와 웹 자원에 대한 심각한 비호환성 2. 인터넷 기기의 다양화 PC, 모바일 단말기 등에서 모두 웹 사용 기존의 웹 페이지가 모바일 기기에서 작동하지 않음 3. 새로운 범용 웹 표준의 필요성 비표준 기술에 의존하는 PC 위주의 기존 웹 방식의 한계 모바일 기기(스마트 폰과 태블릿 장치 등)를 수용할 수 없음 모바일과 PC에서 동시에 사용할 수 있도록 하는 범용 웹 표준 필 요성 대두 새로운 웹 표준 -> HTML5

인터넷 접속 가능한 다양한 기기 모바일 기기 태블릿 PC 스마트 TV, 게임기 등 다양한 기기 Galaxy Bada iPhone Blackberry Window Phone 태블릿 PC 스마트 TV, 게임기 등 다양한 기기 Gear VR Play Station

HTML5 표준과 의의 HTML5 표준 제정 표준에 담긴 내용 W3C와 하이퍼텍스트 워킹 그룹 (WHAT WG, Web Hypertext Application Technology WorkingGroup) 표준에 담긴 내용 웹 페이지의 구조는 HTML5 태그로, 웹 페이지의 모양은 CSS3로, 웹 페이지의 행동은 javascript로 분리 개발 HTML 태그에서 문서의 모양과 관계된 태그나 속성 폐기 웹 페이지의 플랫폼이나 장치 의존성 제거 HTML5로 개발된 웹 페이지나 웹 애플리케이션은 PC/모바일 등의 기기나, 운영체제에 관계없이 동일한 실행 확보 Active-X, 플래시 필요 없음 문서 작성의 개념을 넘어 웹 애플리케이션 작성을 지원하는 자바 스크립트 API 표준화

HTML5 이전의 웹과 HTML5를 도입한 웹의 비교 기존 웹 페이지 웹 브라우저 Active-X/플래시여러 플러그인 게임 애니메이션 동영상 HTML5로 만든 웹 페이지 HTML5를 지원하는 PC 에서만 지원 태블릿/스마튼폰/PC에 관계없이 지원 (a) HTML5 이전의 웹 (b) HTML5를 도입한 웹 필요없음

HTML5의 기능 HTML5 전체 기능 HTML5 기능 요약 웹 문서 작성을 위한 HTML 태그 셋 웹 애플리케이션 작성을 위한 API HTML5 기능 요약 웹 폼(Web Form) 오디오, 비디오 Canvas SVG(Scalable Vector Graphic) 웹 스토리지(Web Storage) 웹 SQL 데이터베이스(Web SQL Database) 인덱스 데이터베이스(Indexed Database API) 파일 입출력(File I/O) 위치 정보 API(Geolocation API) 웹 워커(Web Worker) 웹 소켓(Web Socket) 오프라인 웹 애플리케이션(Offline Web Application)

HTML5 문서 편집 HTML5 문서 편집기 텍스트 편집기 메모장, 한글, 워드 등 아무 텍스트 편집기 가능 .html인 텍스트 파일로 저장 텍스트의 기본 문자셋 – UTF-8 HTML 파일이나 CSS3, 자바스크립트 파일 모두 UTF-8 코드로 저장되어야 함 WYSIWYG(What You See Is What You Get) 편집기 Adobe의 Dreamweaver, CoffeeCup, FCKeditor 등 HTML5 태그 정보 제공 출력되는 모습을 보면서 작성 가능 간단한 오류 체크

HTML5 문서 편집기 사례 : 서브라임 텍스트

HTML5 태그 검사 태그 오류

CSS3 스타일 시트 검사 ‘:’ 위치에 ‘=‘ 를 잘못 사용한 오류

오류 라인은 1 = 에 오류 있음

디버깅을 위한 개발자 도구 열기(크롬 브라우저 사례) 이 메뉴를 클릭하면 개발자 도구를 연다.

‘개발자 도구’에서 ‘Sources’ 메뉴로 소스 보기

라인 18에 중단점(break point)를 설정하여 자바스크립트의 실행을 멈춘 화면 한 라인씩 실행 버튼 마우스로 클릭하면 break point 설정