CSS3 미디어쿼리와 스크린 경계 > 퍼블리싱강좌
♨ 카랜더 일정 :
링크
첨부
컨텐츠 정보
- 5,882 조회
본문
우선 해야할 일
반응형 웹을 하기 위해서 기본적으로 설정/선언하거나 포함해야 할 항목들이 있습니다.
viewport meta tag 설정
요약
아래코드를 <head></head> 에 넣으세요.
1 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
긴설명
반응형 웹으로 디자인 하는 것이므로, iOS 기기에서 데스크탑 웹사이트 (레이아웃)을 보고 싶지는 않을 것입니다. 그러기에 모바일 스크린에 맞게 폭과 스케일을 설정하는 것입니다. 특히, 위 설정은 iOS 전용 설정입니다. Android는 위 설정없이 ‘적절하게’ 렌더링합니다.
width=device-width
모바일 브라우져 (특히 iOS 사파리)에서 디바이스 폭보다 큰 웹페이지를 불러오면 좌우 스크롤이 되도록 렌더링합니다. 이런 문제? 를 해결하기 위해서 width를 device-width로 설정하면 해당 기기의 폭에 맞추어서 웹 페이지를 렌더링합니다. 참고로 Android는 width 설정에 상관없이 화면폭에 맞춰서 렌더링합니다.
viewport 설정이 되어있지 않는 웹 페이지를 iPhone에서 봤을때 (왼쪽)와 viewport 설정이 되어 있는 경우의 iPhone에서 볼떄 (가운데), 그리고 viewport 설정과 상관없이 Android에서 볼때 (오른쪽): 출처 - https://docs.google.com/present/view?id=dkx3qtm_22dxsrgcf4
-------------------------------------- ♠ 출처는 링크 참조 바랍니다. https://11q.kr ♠
뷰PDF 1,2
office view
관련자료
-
링크
댓글목록
등록된 댓글이 없습니다.
● 시놀로지와 pc의 파일 복사 속도 높이기 SMB 멀티 채널을 사용하여 나스 속도를 증가… _조회수_댓글수(
498
● 시놀로지 액티브 백업, 매번 윈도우 재설치 & 세팅이 필요없는 이유 (신나따 Ep.03… _조회수_댓글수(
438
● nslookup을 사용하면 도메인네임, IP주소, 기타 DNS레코드를 알 수 있다. _조회수_댓글수(
6320
● 시놀로지와 pc의 파일 복사 속도 높이기 SMB 멀티 채널을 사용하여 나스 속도를 증가시키는 방… _조회수_댓글수(
498
● 시놀로지 액티브 백업, 매번 윈도우 재설치 & 세팅이 필요없는 이유 (신나따 Ep.03) _조회수_댓글수(
438