[반응형] 반응형 웹 디자인

★ 반응형을 위한 기본 HTML 설정

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta name "viewport" content="width=device-width, initial-scale=1.0">

=> 문서의 인코딩은 utf-8로 설정하고, 부포트는 간단하게 가로값(width)을 디바이스의 기본 가로값(device-width)으로 유지하고 비율은 1.0으로 설정해 디바이스로 접속했을 때 디바이스의 웹 브라우저 해상도로 보이게 한다.

★ 파비콘

http://www.favicon.cc/

=> 파비콘 사이트

★ 해상도

1. 대형 모니터

2. 와이드 모니터

3. 일반 모니터

4. 태블릿 PC

5. 소형 태블릿 PC

6. 스마트폰

모니터 해상도(스크롤 포함)

1024*768

1280*960

1920*1200

2560*1600

모바일 해상도

(최저)

아이폰 - 320

갤럭시S3 - 360

갤럭시 노트 - 400

https://en.wikipedia.org/wiki/Lists_of_display_resolutions

(-> 해상도 정리되어있는 사이트 )

★ HTML5 시맨틱태그

★ 반응형 웹디자인

https://mediaqueri.es/

( -> 미디어쿼리 사이트 갤러리 )

@media all and(orientation:portrait){

   #article {background:#000}

 }

-> height값이 width 값보다 상대적으로 클 때 적용

@media all and (orientation:landscape){

   #article {background:#fff}

 }

-> width값이 height 값보다 상대적으로 클 때 적용

===>>> 스마트폰을 세로로 보면 검은색 배경이 보이고, 가로로 보면 흰색 배경이 보이게

미디어쿼리 단점 : 1. 익스8이하에서 지원 안함. 2. 필요없는 코드, 이미지의 비합리적인 사용

★ 해상도별 미디어 쿼리

1. 일반 가로형

@media screen and(orientation: landscape){}

2. 일반 세로형

@media screen and (orientation portrait){}

3. 스마트폰(가로/세로)

@media only screen and (min-device-width: 320px) and (max-device-width:480px){}

4. 스마트폰(가로)

@media only screen and (min-width: 321px){}

5. 스마트폰(세로)

@media only screen and (max-width: 320px){}

6. iPad(가로/세로)

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px){}

7. iPad(가로)

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape){}

8. iPad(세로)

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait){}

★ CSS3

https://cssreset.com/

( -> 해외의 대표적인 CSS reset을 모아둔 사이트)

http://www.css3.info/preview/

(-> CSS3의 기능을 미리볼 수 있는 사이트)

벤더 프리픽스

- css3의 원소스가 지원되지 않는다면 상황에 맞게 사용

http://prefixr.cloudvent.net/

(-> 자동으로 벤더 프리픽스를 붙여주는 사이트)

일반 웹 브라우저에서 100% 글자 크기는 16px이다.

★ 웹폰트

http://pxtoem.com/

(-> px을 em으로 변환해주는 사이트)

http://www.colorzilla.com/gradient-editor/

(-> 그라데이션 제작을 도와주는 사이트)

http://eotfast.com/?reqp=1&reqr=

(-> 폰트 TTF to EOT 변환해주는 사이트)

font-face

https://fonts.google.com/

=> 구글 웹폰트

https://typekit.com/fonts/source-sans

http://www.webink.com/font/source-sans-pro

★ CSS3 애니메이션

★가변적 넓이값 구하기