인터넷응용프로그래밍 Atom(개발 환경).

Presentation on theme: "인터넷응용프로그래밍 Atom(개발 환경)."— Presentation transcript:

1 인터넷응용프로그래밍 Atom(개발 환경)

2 웹 개발툴 Atom

3 웹 개발툴 Atom 문서 라이브러리 -> ex1 폴더 생성 후 Atom Edit에서

4 웹 개발툴 Atom 해당 프로젝트 마우스 오른쪽 클릭 -> New File -> 파일명.html

5 웹 개발툴 Atom (자동완성기능) <(꺽세) 없이 해당 태그를 타이핑

6 웹 개발툴 Atom (파일에서 실행) 완성된 html 파일들은 라이브러리 폴더에서 실행

7 웹 개발툴 Atom (실행단축기) 컨트롤 + 쉬프트 + P -> install packages 검색 -> open-html-in-browser 다운로드 Install 후 해당 package를 클릭하고 keymap 정보를 가져와야 함

8 웹 개발툴 Atom (실행단축기 Cont.) Keymap 정보를 복사한 후 왼쪽 상단 탭의 File -> keymap… 클릭 복사한 keymap 정보를 라인에 상관없이 붙여넣기 ctrl-shift-q시 해당 html이 브라우저로 실행됨

9 인터넷응용프로그래밍 HTML5

10 웹 개발툴 MS Expression Web Edit Plus Aptana Adobe Dreamweaver

11 Ex1) Welcome to HTML5!

12 Ex2) Headings

13 Ex3) Link

14 Ex4) Images

15 Ex5) List <ul> Unordered List <ol> Ordered List

16 Ex6-1) about Tables

17 Ex6-2) Tables

18 Ex7-1) about Form

19 Ex7-2) Form

20 Ex8) Input

21 Ex8) Input 브라우저에 따라서 Input type의 기능을 지원하지 않을 수도 있음 Chrome IE

22 브라우저 지원 에서 제공하는 브라우저(버전)별 지원 표

23 실습 과제1) Table을 이용한 개인 명함 제작
명함의 개인 사진을 img 태그 사용하여 제작 명함의 틀을 table 태그를 사용 명함의 내용 중 은 클릭 시에 메일 보내기가 가능해야 함 아래 그림 참고

24 실습 과제2) 회원가입 페이지 제작 input 태그의 다양한 type 옵션을 이용하여 제작
이름, id, 비밀번호, , 생년 월일, 전화번호, 지역 등을 받음 과 전화번호의 경우 pattern 옵션을 이용하여 제작 지역의 경우 option 태그를 이용해서 추천지역이 뜨도록 함 Option 태그