CSS3 미디어쿼리와 스크린 경계 > 퍼블리싱강좌
♨ 카랜더 일정 :
링크
첨부
컨텐츠 정보
- 6,168 조회
본문
우선 해야할 일
반응형 웹을 하기 위해서 기본적으로 설정/선언하거나 포함해야 할 항목들이 있습니다.
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
관련자료
-
링크
댓글목록
등록된 댓글이 없습니다.
● 영상분석)시놀로지NAS에 네임서버 한방에 쉽게 셋팅하는 영상입니다 _조회수_댓글수(
577
● 영상분석)도메인이란? 웹사이트에 나만의 도메인 등록하는 방법 (ft. HTTPS 평생 … _조회수_댓글수(
567
● 우리집 외부 아이피 인터넷 연결에서 열린 포트 식별 확인 하기 _조회수_댓글수(
3251
● ha작업) esxi서버 HDD 용량 키우기 작업 _조회수_댓글수(
3120
● 영상분석)시놀로지NAS에 네임서버 한방에 쉽게 셋팅하는 영상입니다 _조회수_댓글수(
577