"Responsive web design" ( 우리회사웹사이트반응형으로리모델링하기 ) 정찬명

Size: px

Start display at page:

Download ""Responsive web design" ( 우리회사웹사이트반응형으로리모델링하기 ) 정찬명"

지윤 삼
5 years ago
Views:

1 "Responsive web design" ( 우리회사웹사이트반응형으로리모델링하기 ) 정찬명

2 Episode1: 우리사장님

3 PC Mobile

4 PC Mobile

6 기존모바일웹의문제 PC 웹과모바일웹을따로제작. 모바일브라우저로접속시모바일웹페이지로 redirection. 새로운모바일단말기또는브라우저가나올때마다서버측개발자는새단말기정보를추가한다음이를분기처리.

7 PC Mobile

8 PC Mobile

9 Episode2: 개념탑재

10 " 반응형웹디자인이란?" 사용자환경에따라 유익하게반응하는디자인 사용자환경 = PC, 모바일, OS, 화면크기

11 HTML5 Forms + CSS3 Media Queries Image Replacement Image Sprites

12 " 반응형웹디자인의장점 " 다양한해상도와단말기에서두루 잘보임 신형단말기가등장해도추가대응 필요없음 서버사이드개발이슈가적어투자 대비효율높음

13 " 반응형웹디자인의한계 " PC 와모바일환경을모두고려해야 하기때문에디자이너는성능과타협 할필요가있음 포털사이트와같이복잡하고무거운 사이트는구현이쉽지않음

14 " 반응형으로적합한곳 " 가볍고단순한사이트 블로그, SNS 이벤트페이지 기업홍보사이트

15 " 반응형으로적합하지않은곳 " 무겁고복잡한사이트 대형포털 한국형쇼핑몰 테이블레이아웃

16 Episode4: 현실은달라

17 반응형을고려하여 기초부터튼튼하게 다시짓고싶겠지만

18 " 우리의현실 " 반응형을고려한다고해서처음부터사이트를다시제작하는경우는드물고보통은 PC에최적화된사이트를반응형으로개선

19 Episode5: 가느냐마느냐

20 " 정팀장은분석중..." 우리회사웹사이트는... 가볍고단순한가? 테이블레이아웃인가? 유지보수가유연한구조인가?

22 우리회사웹사이트는... 가볍고단순 테이블레이아웃아님 Image Replacement Image Sprite 반응형으로개선하기쉬운체질

23 " 결론, Let's do it!"

24 향후반응형을고려하고있다면 PC 용웹사이트체질개선이선행 2. 테이블레이아웃걷어내기 3. Image Replacement 4. Image Sprite 5. HTML5

25 Episode6: 무엇부터하지?

26 " 그냥미디어쿼리사용하면되 는거아닌가?"

27 " 반응형웹을위한실행순서 " 1. 성능개선 CSS, JS, IMG 파일병합, 모바일용저용량이미지생성 2. HTML HTML5 로전환, 시멘틱마크업, forms 활용 3. CSS 모바일대응위한 CSS3 Media Queries 활용

28 Episode7: 성능개선

30 "JS 파일은병합후문서하단으로 " <head> 에서 JS 파일을참조하면 JS 해석이끝날때까지 <img> 파일을로드하지않으므로 JS 파일은 <body> 끝으로옮긴다. http 요청횟수를줄이기위해여러개의 JS 파일을하나로병합한다.

31 "JS 파일은병합후문서하단으로 " 개선전 <head> <script type="text/javascript" src="jquery min.js"></script> <script type="text/javascript" src="jquery-ui custom.js"></script> <script type="text/javascript" src="nhn.js"></script> <script type="text/javascript" src="default.js"></script> <script type="text/javascript" src="lcslog.js"></script> </head> 개선후 <body>... 어쩌구저쩌구... <script type="text/javascript" src="default.js"></script> </body>

32 " 이미지조각모음 " btn_on.gif btn_off.gif btn_over.gif 이렇게조각낸이미지는 http 요청수를 줄이기위해하나로병합한다.

33 " 이미지조각모음 " 개선전 btn_on.gif btn_off.gif btn_over.gif 개선후 btn.gif

34 " 모바일용저용량이미지생성 "

35 " 모바일용저용량이미지생성 "

36 " 동일한이미지로큰것과작은것을준비 한다음 IR 기법으로배경처리하고미디어 쿼리로해상도에따라분기하면모바일에 서큰이미지는전송요청하지않는다. 반 대의경우도마찬가지." ( 화면상으로만숨기는것이아니라실제로 http 요청을하지않음 )

37 Episode8: HTML 고치기

38 "HTML 도반응형?"

39 "HTML5 forms 는반응형 "

40 input type="search" input type="tel" input type="url" input type=" " input type="number"

41 "HTML5 로 DTD 바꾸기 " ( 어렵지않아요 ~)

42 수정전 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " 수정후 <!DOCTYPE html>

43 수정전 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 수정후 <meta charset="utf-8" />

44 수정전 <link rel="stylesheet" type="text/css" href="nhn.css"/> <style type="text/css">...</style> 수정후 <link rel="stylesheet" href="nhn.css"/> <style>...</style>

45 수정전 <script type="text/javascript" src="nhn.js"></script> 수정후 <script src="nhn.js"></script>

46 " 구조를더의미있게 "

47 Before

48 After

49 Before

50 After

51 Episode9: 그런데누구세요?

52 IE6

53 IE7

54 IE8

55 " 누구세요?" header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption

56 낡은브라우저는 HTML5 에새 로등장한태그를인식하지못해 제대로렌더링하지않음.

57 " 철지난브라우저구하기 " HTML5 IE 6~8 enabling script

58 "HTML5 shim" <head>  </head>

59 "IE 조건부주석 "  표준계열브라우저는이부분을주석으로처리하고 IE9 미만버전의브라우저는포함된내용을해석함. HTML 요소를읽기전에참조해야하므로 <head>...</head> 사이에넣는다.

60 Episode10: 산넘어산

61 "HTML5 shim 적용결과 "

62 IE6

63 IE7

64 IE8

65 " 여전히깨지는이유 " HTML5 enabling script로 HTML 요소를해석했지만새로추가된태그는 'display:inline' 상태로렌더링한다.

66 새로운태그를바르게 표시하는방법

67 "CSS Reset" header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption { display: block }

68 IE6

69 IE7

70 IE8

71 HTML5 shim과 CSS reset을통해더이상낡은브라우저에서깨지지않음

72 Episode11: 너무작거나큰

73 모바일기기에서어떻 게보일까?

74 " 너무작아서보이지않음 "

75 " 화면을크게만들자 "

76 " 너무커서보이지않음 "

77 " 화면을크게만든다음 CSS 를걷어내자 "

78 Episode12: 크게만들기

79 " 모바일뷰포트적용 " <head>...</head>

80 " 모바일뷰포트적용?" 휴대폰해상도와웹페이지 해상도를일치시키는작업.

81 " 모바일뷰포트적용 " <head>...</head>

82 예를들면, 휴대폰해상도는 640px 인데 1024px 웹페이지화면을구 겨넣어보여주려니자글자글 어색함. ( 휴대폰해상도와웹페이지해상도가다름 )

83 그래서, 휴대폰해상도가 640px이면한화면에딱 640px 크기만보여주도록설정하자.

84 " 모바일뷰포트적용?" 휴대폰해상도와웹페이지 해상도를일치시키는작업.

85 <meta name= "viewport" content= "width=device-width, initial-scale=1, inimum-scale=1, maximum-scale=2, user-scalable=yes" />

86 <meta name="viewport" content="width=device-width, initial-scale=1, inimum-scale=1, maximum-scale=2, user-scalable=yes" />

87 Viewport width = "640px" Page width = "320px" " 일단화면을크게만드는데성공 " iphone4 경우 640px 해상도를갖고있어페이지는 640px 크기만큼보일것으로기대했으나실제로는 320px 크기로확대되었음. 기대치보다 2 배확대된것인데이는다른기종에비해해상력 ( 픽셀을더잘게쪼개는능력 ) 이 2 배좋기때문에충분한크기를표시하기위해절충한결과.

88 Episode13: CSS 조건분기

89 좁은화면에서는 CSS 를해석 하지않도록질의설정 CSS Media Queries

90 only all and ( 조건문 ){ 실행문 all and ( 조건문 ){ 실행문 ( 조건문 ){ 실행문 } 위는모두같은표현.

91 "641px (min-width:641px){ /* 뷰포트너비가 641px 이상이면해석 */... body { margin:0 } img { border:0 }... /* 기존의 PC 용 CSS 를이곳에몽땅 */ }

92 " 적용결과 " " 섹시하지만예쁘지는않다 "

93 "CSS 를 완전히벗겨낼수는없다 "

94 "640px 이하 해상도를위한 CSS 를작성하자 "

95 "utf-8"; /* 해상도 640px 이하라면이부분을해석 */ /* 모바일용 CSS 코드를이곳에작성 (min-width:641px){ /* 해상도 641px 이상이면이부분을해석 */ /* 기존의 PC 용 CSS 코드를이곳에몽땅 */ }

96 "utf-8"; img { max-width:100% (min-width:641px){ img { max-width:auto } }

97 before after

98 before after

99 Episode14: Mobile First

100 Quiz: 작은해상도에대응하는모바일용 CSS 코드를조건문안에넣지않은이유는?

101

102

103

104

105

106 Smartphone global market share Q.

107 Answer: 모바일용코드를조건문안에포함하지않는이유는미디어쿼리 (CSS3) 를지원하지않는모바일브라우저에서잘볼수있도록고려하기때문. 미디어쿼리를지원하지않는브라우저는모바일화면이디폴트로표시된다.

108

109 Mobile First

110 Episode15: IE6~8?

111 IE6~8 브라우저는 CSS3 미 디어쿼리지원안함 ( 앗, 그렇다면 IE6~8 브라우저는???)

112

113 respond.min.js

114 HTML5 shim + respond.min.js <head>  </head> 주의 : 이파일은 IE 브라우저에서오류가있을수있음

115 Summary: RWD

116 " 반응형웹디자인이란?" 사용자환경에따라 유익하게반응하는디자인

117 " 반응형으로적합한곳 " 가볍고단순한사이트

118 " 향후반응형을고려하고있다면 " PC 용웹사이트체질개선이선행

119 " 반응형웹을위한실행순서 " 1. 성능개선 ( 제일중요 ) 2. HTML5 3. CSS3 Media Queries

120 "HTML5 shim" <head>  </head> HTML5 Markup IE 6~8 지원

121 "CSS Reset" header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption { display: block }

122 <meta name= "viewport" content= "width=device-width, initial-scale=1, inimum-scale=1, maximum-scale=2, user-scalable=yes" />

123 CSS Media "utf-8"; (min-width:641px){ PC... }

124 HTML5 shim + respond.min.js <head>  </head> CSS3 Media Queries IE 6~8 지원

125 Thank you. blog: me2day: twitter: facebook: naradesign naradesign naradesign

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 CHAPTER 7. HTML 와 CSS 로웹사이트만들 기 웹사이트작성 웹사이트구축과정 내비게이션구조도 홈페이지레이아웃 헤더 web Shop 내비게이션메뉴