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

★ 반응형을 위한 기본 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 애니메이션



★가변적 넓이값 구하기