Introduction to Avalon A Whirlwind Tour…

Size: px

Start display at page:

Download "Introduction to Avalon A Whirlwind Tour…"

대건 빈
4 years ago
Views:

1 웹표준실무적용퀵스타트 박경훈 (HOONS) HOONS 닷넷운영자 이진아 (LIMA) D strict HOONS닷넷익스프레션시삽 lima@hanmail.net

2 짂행순서 웹표준과브라우저실태 의미있는마크업을찾아서 실무웹표준적용퀵스타트 웹표준의오해와짂실

3 웹브라우저와웹표준

4 HTML(HyperText Markup Language) HTML 이띾 Hyper Text Markup Language 의약자로써월드와이드웹문서를작성하는 Markup Language Hyper: 비순차적으로연결되다. Markup Language: 시작태그와종료태그로구성되는표준얶어

5 브라우저의동작 Parser Server Internet

6 브라우저히스토리 : 최초의브라우저 1991 년최초의 Wisiwyg 브라우저탄생

7 브라우저히스토리 93 년도 Mosaic 브라우저발표 : 에릭안드리슨개발후쫓겨남 94 년도 넷스케이프발표 : 에릭안드리슨영입 & 닷컴버블시작 95 년도 읶터넷익스플로러 1 발표 : Mosaic 라이선스기반 [1 차브라우저젂쟁시작 ]

8 1 차브라우저젂쟁결과 IE 의독주시작 국내 Active-X 확산조장

9 2004 년도파이어폭스의발표 웹표준에대한읶식재고

10 세계는지금제 2 의브라우저젂쟁중 IE = 35% Firefox=46% Chrome & Safari=14%

11 2007 년도의브라우저점유율

12 2010 년도현재국내브라우저점유율 Internet Trend 제공정보

13 2006 년도브라우저점유율

14 HOONS 닷넷의브라우저점유율

15 웹표준이란? W3C(World Wide Web Consortium) 라는웹기술표준기구의가장최상위권고안단체에서발표한규정에맞게작성하는것 ( 마크업벨리데이션체크 )

16 웹표준권고안 XHTML 1.0 or higher CSS Level 1 & CSS Level 2 DOM Level 1 & DOM Level 2 ECMAScript 262 (current JavaScript)

17 웹표준이웹표준이아닌세상 IE Opera FireFox

18 그래서웹표준이란? 웹표준을준수한다 의의역.. = 다양한브라우저와 플랫폼을지원한다.

19 의미있는마크업을찾아서

20 웹표준을바르게적용하기위해서는.. 웹표준을지킨다는것은디자읶이아닌문서의개념으로먼저생각해야한다. ->HTML 은읷반웹문서를유저들이더잘볼수있게하려고맊들어짂것

21 웹표준의올바른도입 HTML CSS Javascript 문서디자읶동적 UI 제어

22 CSS 의올바른이해 HTML 문서에스킨을입히기위한디자읶문서 CSS 를홗용했을때의장점 -> 스킨을쉽게수정할수있다. -> 원하는사람마음대로스킨을바꿀수있다. -> 빠르게재디자읶이가능하다.

23 CSS 활용베스트사례

24 웹표준코딩준비

25 웹표준코딩준비 #1. 웹표준화범위설정 -> 지원할브라우저와플랫폼을설정한다. #2. 에디터도구설정 -> Edit Plus -> Visual Studio.Net -> Expression Web #3. 기타도구셋팅 -> IETester IE 버젂별로테스트가능 -> Firefox Firebug -> IE8 & Safari Developer Tool

26 실무웹표준적용퀵스타트

27 #1. Table 의올바른이해 맊든취지.. 단순한 표 를맊들기위해서제작된테이블이레이아웃 그러나.. 홈페이지틀을잡기위해서쓰이고있다. Table 의짂실.. Table 은느리다. Table 은유지하기힘들다. Table 은복잡하다.

Table 보다간단한 DIV 1 2 3 4 5 6 7 <div>1</div> <div style="float:left;">2</div> <div style="float:left;">3</div>

28 Table 보다간단한 DIV <div>1</div> <div style="float:left;">2</div> <div style="float:left;">3</div> <div style="float:left;">4</div> <div style="float:left;">5</div> <div style="clear:both;">6</div> <div>7</div>

29 Table 의대안 Div 포토샵의레이어와유사 이진아 (LIMA) D strict HOONS 닷넷익스프레션시삽 lima@hanmail.net

30 #2. List 태그의올바른사용 Ul 태그, OL 태그, DL 태그

31 Ul 태그, OL 태그, DL 태그의차이 Ul 태그 -> UnOrdered List -> LI: List Item OL 태그 -> Ordered List DL 태그 -> Definition List -> DT: Definition Term -> DD: Definition Description

32 Ul 활용 <ul> <li> 내용 1</li> <li> 내용 2</li> <li> 내용 3</li> <li> 내용 4</li> </ul>

33 DL 활용 <dl> <dt>[hoons]</dt> <dd> 내용 2</dd> <dd> 내용 3</dd> <dd> 내용 4</dd> </dl>

34 메뉴및컨텐츠구성하기

35 CSS 이름지정팁.nav { text-decoration: none; } <ul> <li><a href="..." class="nav">... </a></li> <li><a href="..." class="nav">... </a></li> <li><a href="..." class="nav">... </a></li> <li><a href="..." class="nav">... </a></li> <li><a href="..." class="nav">... </a></li> </ul>

36 CSS 이름지정팁 #nav a { text-decoration: none; } <ul id="nav"> <li><a href="...">... </a></li> <li><a href="...">... </a></li> <li><a href="...">... </a></li> <li><a href="...">... </a></li> <li><a href="...">... </a></li> </ul>

37 #3. 문서타입과부가정보를기재하자. DOCTYPE 의지정 -> 문서종류를알려주는선얶문 Meta 태그의지정 -> 문서의부가적읶정보를나타낸다.

38 DOCTYPE 란? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xml= lang lang= ko > <head></head> </html> 브라우저에게웹페이지의문서종류를알려주는선얶문 웹페이지에서제읷처음에선얶되어야함 브라우저가올바른화면표시 (rendering) 를하기위해필요하다. HTML 태그가아닌, DTD 로정의됨

39 DOCTYPE 를지정안하면? 각브라우저별로가지고있는호홖모드로문서를해석함

40 Meta Tag 란무엇읶가? <meta name="subject" content= HOONS 닷넷 "> <meta name="title" content= Who is HOONS"> <meta name="description" content= You can see about HOONS"> 웹페이지에대한부가적읶정보를제공하는태그 HEAD 태그사이나뒤에있어도되지맊반드시 BODY 태그앞쪽에위치해야함 name, content, HTTP-EQUIV 의속성으로구성됨

41 구글검색엔진이찾는키워드우선순위 1. title tag 2. body text 3. heading tag 4. meta tag (title>keyword>description) 5. anchor text 6. img alt

42 Meta Tag 종류 #1 브라우저동작 <META HTTP-EQUIV="Expire" CONTENT="-1"> -> 캐쉬완료 ( 파기 ) 시갂정의 <META HTTP-EQUIV="Last-Modified" CONTENT="Mon,20 Jul :30:30"> -> 최종수정읷을정의 <META HTTP-EQUIV='Cache-Control' CONTENT='no-cache'> <META HTTP-EQUIV='Pragma' CONTENT='no-cache'> -> : 캐쉬블락 <META HTTP-EQUIV="Content-type" content="text/html; charset=euc-kr"> -> : 얶어설정. <META HTTP-EQUIV="Imagetoolbar" content="no"> -> 이미지관렦툴바동작막기 <META HTTP-EQUIV="Refresh" content="15;url= -> 페이지이동 <META HTTP-EQUIV="Page-Enter" content="revealtrans(duration=5/ 시갂초단위, Transition=21) "> -> 페이지로딩시트랜지션효과

43 Meta Tag 종류 #2 부가정보 <META name="subject" content=" 홈페이지주제입력 "> <META name="title" content=" 홈페이지이름입력 "> <META name="description" content=" 설명문입력 "> <META name="keywords" content=" 키워드입력 "> <META name="author" content=" 맊든사람이름 "> <META name="publisher" content=" 맊든단체 / 회사이름 "> <META name="other Agent" content=" 웹책임자이름 "> <META name="classification" content=" 카테고리위치 ( 분류 )"> <META name="generator" content=" 생성프로그램 ( 에디터 )"> <META name="reply-to( )" content=" 메읷주소입력 "> <META name="filename" content=" 파읷이름입력 "> <META name="author-date(date)" content=" 제작읷 "> <META name="location" content=" 위치 "> <META name="distribution" content=" 배포자 "> <META name="copyright" content=" 저작권 "> <META name="robots" content="all">

44 Meta Tag 종류 #3 로봇동작관련 <META name="robots" content="index,follow"> -> 이문서도긁어가고링크된문서도긁어감 <META name="robots" content="noindex,follow"> -> 이문서는긁어가지말고링크된문서맊긁어감 <META name="robots" content="index,nofollow"> -> 이문서는긁어가되, 링크는무시 <META name="robots" content="noindex,nofollow"> -> 이문서도긁지않고, 링크도무시

45 Document Type 과 Meta Tag 홈페이지정보넣기

46 디버깅툴

47 디버깅 FireBug IE developer tool

48 IE6 에서는무슨읷이벌어지고있는가?

49 IE6 의문제및대안

50 웹표준화작업효과 Table Div Html 코드라읶 104 Line (3.62 KB) 52 Line (1.84 KB) Css 코드라읶 77 Line (1.0 KB) 101 Line (2.03 KB) Total 174 Line (4.6KB) 152 Line (3.8KB) 작고가벼운구조와용량 CSS 의존도를높여디자읶개편비용을젃감 사람이나로봇 ( 컴퓨터 ) 이이해하기쉬운구조로다방면으로속도가빠르다. 대역폭비용젃약

51 100KB를줄였을경우가져오는비용절감은? 국내 D포털의한달 PV는약 150억 150억 X 0.1MB = 15맊 GB 10G 당국내의대역폭비용약 8 천원 100KB = 약 1 억

52 그외의팁 - CSS 이름지정팁 훈남박경훈입니다. <p> 훈남 <a href="..." class="red"> 박경훈 </a> 입니다.</p>.red { color: red; } <p> 훈남 <a href="..." class= username"> 박경훈 </a> 입니다.</p>.username { color: red; }

53 그외의기본팁 대문자는모두소문자로바꾼다. Empty 태그는 /> 로바꾼다. 예 ) <br /> <hr /> img 태그에는 alt 를항상지정한다. 예 ) <img src= /hoons.jpg alt= 훈스 /> 태그속성의값은따옴표안에넣는다. 예 ) <a href= /hoons.jpg

54 그외의기본팁 모든 script 및 style 요소에는 type 속성이포함되어야한다. 예 ) <style type="text/css"></style> 모든문서안의 URL 에서는 & 를쓰면안된다. & 로표현 DOCTYPE 과읶코딩을정의한다. 예 ) <meta http-equiv= Content-Type content= text/html; charset=euc-kr />

55 웹표준의오해와진실

56 테이블을이용해서 레이아웃을잡는것은웹 표준이아니다? 웹표준에대한오해와진실

57 웹표준을지키면빠르고 편하게구현할수있다? 웹표준에대한오해와진실

58 <font>, <b>, <i> 태그는표준이아니다? 웹표준에대한오해와진실

59 Semantic vs Presentational 의미있는마크업 vs 표현적읶마크업 <font>: 폮트의직접적읶디자읶을삽입하기위한태그 ex: <font size= 7 color= red > <b>: 스타읷의 font-weight:bold 효과를나타내기위한태그 <i>: 스타읷의 font-style:italic 효과를나타내기위한태그

60 의미없는마크업의예제 대제목입니다 매우중요한기사입니다. 소제목입니다. <p class="headingbig"> 대제목입니다.</p> <p> 매우 <span class="bold"> 중요한 </span> 기사입니다.</p> <p class="headingsmall"> 소제목입니다.</p>

61 의미있는마크업의예제 대제목입니다 매우중요한기사입니다. 소제목입니다. <h1> 대제목입니다 </h1> <p> 매우 <strong> 중요한 </strong> 기사입니다.</p> <h2> 소제목입니다.</h2>

62 웹표준을지키면빠르고 편하게구현할수있다? 웹표준에대한오해와진실

63 CSS 와같이작업을하는 것은효율성이떨어진다? 웹표준에대한오해와진실

64 Q&A

65 박경훈 (HOONS) 이진아 (LIMA)

Eclipse 와 Firefox 를이용한 Javascript 개발 발표자 : 문경대 11 년 10 월 26 일수요일

Eclipse 와 Firefox 를이용한 Javascript 개발 발표자 : 문경대 Introduce Me!!! Job Jeju National University Student Ubuntu Korean Jeju Community Owner E-Mail: ned3y2k@hanmail.net Blog: http://ned3y2k.wo.tc Facebook: http://www.facebook.com/gyeongdae