Transcript 1. HTML5와 CSS3반응형 웹 디자인 시작하기

1
1. HTML5와 CSS3 반응형 웹 디자인
시작하기
학습목표: 여기서는 HTML5와 CSS3을 사용한 반응형 웹 디자
인의 필요성과 장점을 살펴본다.
김은옥([email protected])
목차



이장의 개요
HTML5 개요
내용
2
이장의 개요

다양한 크기의 디바이스를 사용한 웹사이트의
접속이 점점 늘어남에 따라 하나의 고정된 폭
으로 제작된 웹 사이트가 대응하기 어려움
 해결책
: HTML5와 CSS3를 사용한 반응형 웹
3
이장의 개요

내용







소형 스크린 디바이스 자원의 중요성
모바일 웹사이트 디자인의 정의
반응형 웹사이트 디자인 예
뷰포트와 스크린 크기의 차이
뷰포트를 변경할 수 있는 브라우저 확장 기능의 설치와 사
용
HTML5를 이용한 깔끔하고 간결한 마크업의 설계
일반적인 디자인 과제 해결을 위한 CSS3의 사용
4
HTML5 개요

HTML4 웹페이지 기술방식
 <div>를
사용해 영역을 구분
<div></div>
<div></div>
<div></div>
 CSS
: 화면에 HTML 태그를 표현
 JavaScript : 처리나 서버에 페이지요청
5
HTML5 개요

HTML5 웹페이지 기술방식
 <section>를
사용해 영역을 구분하고, 자바스크
립트가 담당하던 처리의 일부를 HTML태그의 속
성에서 처리, 한글 인코딩utf-8
<header></header>
<section></section>
<footer></footer>
6
HTML5 개요

HTML5 웹페이지 기술방식
HTML5 : <section>를 사용해 영역을 구분하고, 자바
스크립트가 담당하던 처리의 일부를 HTML태그의 속
성에서 처리, 한글 인코딩utf-8
 CSS3 : 화면에 HTML의 태그를 표현 및 자바스크립
트가 담당하던 처리의 일부를 담당
 JavaScript : 처리나 서버에 페이지요청 + HTML5,
CSS에서 처리할 수 없는 기능등을 담당, 캔버스
(Canvas)에서 사용하면 게임의 작성도 가능.

7
HTML5 개요

HTML5 API





Web Storage : 단말기의 로컬영역(스마트폰의 메모리영역)에
데이터를 저장하는 기능
Application cache : Web 애플리케이션을 오프라인에서도 동
작할 수 있도록 해주는 기능.
Geolocation API : GPS및 네트워크정보로부터 위치정보를 얻
어내는 API
Web Workers : 백그라운드에서 작업하는 기능.
WebSocket : 웹 서버와 웹 브라우저가 양방향으로 통신을 할
수 있는 기능
8
왜 스마트폰이 중요한가?


PC에서 구형IE를 사용해서 웹 사이트에 접속
하는 사용자보다 모바일 폰으로 접속하는 사용
자가 더욱 많아짐.
기존의 웹 사이트는 모바일 폰으로 볼 수 있음
 다만
손가락을 사용해서 확대해서 봐야 함.
 실수로
링크를 누르거나, 원하는 문장을 읽기 위해 화
면을 이리저리 움직여야 함.
9
반응형 디자인이 올바른 선택인가?

예산이 많고 사이트의 규모가 큰 경우
 모바일
웹 사이트(또는 앱)를 따로 작성
 위치기반

서비스나 증강현실 등을 적용할 수 있음
예산이 적거나 사이트의 규모가 작은 경우
 디바이스의
 콘텐츠의
뷰포트 크기에 맞게 콘텐츠를 제공
배치, 글꼴의 크기 등
10
반응형 웹 디자인의 정의
11


모든 뷰포트에서 최
적의 콘텐츠가 보이
게 하는 것
작은 뷰포트 디자인
-> 점차로 큰 뷰포
트와 디자인으로 발
전
뷰포트
스크린
반응형 디자인이 전부인가?


뷰포트의 변경에 따라 웹 페이지 내에서 콘텐
츠의 흐름을 처리
반응형 디자인의 핵심요소
 CSS3미디어
쿼리
 자바스크립트를 대체하는 트랜스폼
 추가로 그래디언트, 그림자. 웹 폰트 등등
12
반응형 디자인이 전부인가?


뷰포트의 변경에 따라 웹 페이지 내에서 콘텐
츠의 흐름을 처리
반응형 디자인의 핵심요소
 CSS3미디어
쿼리
 자바스크립트를 대체하는 트랜스폼
 추가로 그래디언트, 그림자. 웹 폰트 등등
13
반응형 디자인이 전부인가?
14

반응형 웹 디자인을
참고하기 좋은 사이트
 http://mediaqueri.es
HTML5가 왜 좋은가?

HTML5의 코딩 간결
 시간절약

새로운 시멘틱 태그 추가
 <header>,<section>,<footer>등등

HTML5, CSS3 문법참고 사이트
 w3schools.com
15
반응형 웹 디자인 그 이상을 가능하
게 하는 CSS3

CSS3를 인식하지 못하는 이전 버전의 브라우
저에서도 문제를 일으키지 않음
 해석하지

못하는 속성은 건너뜀
CSS3로 디자인 문제 해결
 라운드
사각형 처리
 이미지를 효과로 대체
16
반응형 웹 디자인 그 이상을 가능하
게 하는 CSS3

CSS3의 그밖의 기능
 트랜스
 예시



폼
사이트
http://www.panic.com/blog/
http://demo.marcofolio.net/3d_animation_css3/
http://designlovr.com/examples/dynamic_stack_of_ind
ex_cards/
17
지금 바로 HTML5와 CSS3를 사용
할 수 있을까?


기술이나 도구는 필요할 때만 사용
IE7/IE8은 HTML5시멘틱 요소나 CSS3속성
을 지원하지 않음
 사이트의
방문자 대다수가 IE7/8을 주로 사용한
다면 반응형 웹 페이지로 디자인하는 것은 좋지
않음.
18
합리적인 웹 사이트 디자인을 구현
19

반응형 웹 디자인을 사
용해야 할 경우



모바일 등의 새로운 인
터넷 지원을 원함
깨끗하고 빠르며 유지보
수가 쉬운 코드 베이스
를 원함
브라우저별 사용자 경험
이 다르다는 사실을 인
지

과거의 패턴을 사용
해야 할 경우
 모든
브라우저에서
디자인이 동일하게
보이길 원하는 경우
 사이트의 방문자가
주로 IE7/IE8을 사용
하는 경우