인터넷응용프로그래밍 Atom(개발 환경)
웹 개발툴 Atom https://atom.io/
웹 개발툴 Atom 문서 라이브러리 -> ex1 폴더 생성 후 Atom Edit에서
웹 개발툴 Atom 해당 프로젝트 마우스 오른쪽 클릭 -> New File -> 파일명.html
웹 개발툴 Atom (자동완성기능) <(꺽세) 없이 해당 태그를 타이핑
웹 개발툴 Atom (파일에서 실행) 완성된 html 파일들은 라이브러리 폴더에서 실행
웹 개발툴 Atom (실행단축기) 컨트롤 + 쉬프트 + P -> install packages 검색 -> open-html-in-browser 다운로드 Install 후 해당 package를 클릭하고 keymap 정보를 가져와야 함
웹 개발툴 Atom (실행단축기 Cont.) Keymap 정보를 복사한 후 왼쪽 상단 탭의 File -> keymap… 클릭 복사한 keymap 정보를 라인에 상관없이 붙여넣기 ctrl-shift-q시 해당 html이 브라우저로 실행됨
인터넷응용프로그래밍 HTML5
웹 개발툴 MS Expression Web Edit Plus Aptana Adobe Dreamweaver
Ex1) Welcome to HTML5!
Ex2) Headings
Ex3) Link
Ex4) Images
Ex5) List <ul> Unordered List <ol> Ordered List
Ex6-1) about Tables
Ex6-2) Tables
Ex7-1) about Form
Ex7-2) Form
Ex8) Input
Ex8) Input 브라우저에 따라서 Input type의 기능을 지원하지 않을 수도 있음 Chrome IE
브라우저 지원 http://caniuse.com/#search=web%20storage 에서 제공하는 브라우저(버전)별 지원 표
실습 과제1) Table을 이용한 개인 명함 제작 명함의 개인 사진을 img 태그 사용하여 제작 명함의 틀을 table 태그를 사용 명함의 내용 중 e-mail은 클릭 시에 메일 보내기가 가능해야 함 아래 그림 참고
실습 과제2) 회원가입 페이지 제작 input 태그의 다양한 type 옵션을 이용하여 제작 이름, id, 비밀번호, e-mail, 생년 월일, 전화번호, 지역 등을 받음 e-mail과 전화번호의 경우 pattern 옵션을 이용하여 제작 지역의 경우 option 태그를 이용해서 추천지역이 뜨도록 함 Option 태그