11.Nas_1
새창 작성 수정 목록 링크 Edit G카랜다 HDD HDD HDD 게시물 주소 복사

CSS3 미디어쿼리와 스크린 경계 > 퍼블리싱강좌

♨ 카랜더 일정 :
  • 링크
    https://sir.kr/pb_lecture/167 2800 회 연결
    회 연결
  • 첨부

    • 작성자 정보

    컨텐츠 정보

    본문

    우선 해야할 일

    반응형 웹을 하기 위해서 기본적으로 설정/선언하거나 포함해야 할 항목들이 있습니다.

    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 설정에 상관없이 화면폭에 맞춰서 렌더링합니다.

    VHvMnXvIRIRB6o0ICXm9lIcFt0myZIBxe3uoNloJtHg7OyHZJ0BB_PimZRoSuUzICo9jbU-_oJKAjwPu-7MK-V-aVkoZuiLL9NgPwZpkc2Vi8id1Uaj7

    viewport 설정이 되어있지 않는 웹 페이지를 iPhone에서 봤을때 (왼쪽)와 viewport 설정이 되어 있는 경우의 iPhone에서 볼떄 (가운데), 그리고 viewport 설정과 상관없이 Android에서 볼때 (오른쪽): 출처 - https://docs.google.com/present/view?id=dkx3qtm_22dxsrgcf4

    -------------------------------------- ♠ 출처는 링크 참조 바랍니다. https://11q.kr ♠

    [ 추가 정보 ... 더보기) ]
    뷰PDF 1,2
    office view

    관련자료

    댓글목록

    등록된 댓글이 없습니다.

    목록
    글검색
    새창 작성 수정 목록 링크 Edit G카랜다 HDD HDD HDD 게시물 주소 복사

    Total 1,676 / 45 Page
    날짜순 조회순 추천순
    • [ RaiDrive 다운로드 및 시놀로지 webdav or u5pvr sftp 서버 드라이브 연결 하기 ]
    등록자 shimss11q 쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물
    등록일 03.10 조회 8339 추천 0

    ■ ▶RaiDrive 다운로드무료 프로그램이며, 자유롭게 다운받아 사용하면 됩니다.https://www.raidrive.com/ko/downlo…

    • [ ■역방향프록시 응용) 시놀로지 도커 사용자 epg2xml/xmltv.xml 을 dsm 응용프로그램/역방향 프… ]
    등록자 shimss11q 쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물
    등록일 03.10 조회 8491 추천 0

    ■ 시놀로지 도커 사용자 epg2xml/xmltv.xml 을 dsm 응용프로그램/역방향 프록시 규칙으로 웹상에서 epg 정보 출력 하기 ▶ ds…

    • [ ■작업스케줄러응용) 시놀로지 도커 사용자 epg2xml/xmltv.xml 을 web/저장경로 폴더에 정기… ]
    등록자 shimss11q 쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물
    등록일 03.10 조회 10126 추천 0

    ■ 시놀로지 도커 사용자 epg2xml/xmltv.xml 을 web/저장경로 폴더에 정기적으로 rsync로 복사웹상에서 epg를 구현하여 안드로…

    • [ 공유기 접속먹통)iptime 공유기 포트미러링 문제 해결 ] 댓글 1
    등록자 shimss11q 쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물
    등록일 03.09 조회 9940 추천 0

    ■포트미러링 :인터넷으로 통신하는 모든 패킷을 4번포트로 전송합니다.포트 미러링 하면 외부 포트 연결 동작시 통신이 차단 되면서 공유기 먹통됨거…

    • [ 400 Bad Request Request Header Or Cookie Too Large nginx ]
    등록자 shimss11q 쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물
    등록일 03.09 조회 8660 추천 0

    ■ ▶ 해셜정보 ☞ ♠ 저는 크롬브라우즈 사용 쿠키 제거 해결정상적으로 연결정보찾아 공유 드리며 출처는 링크 참조 바랍니다. https://11…

    • [ DTS Music Video Demo Collection 영화 홈씨어터 설치 DTS.Demo.Disc.18… ] 댓글 1
    등록자 shimss11q 쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물
    등록일 03.07 조회 6719 추천 0

    http://nachostime.tv/4wjck9tbsoiy-demo

    • [ ★★★해결완료)synology_docker_tvheadend 삭제후 재설치 작업 정보 및 작업중에 채널스캔시… ] 댓글 5
    등록자 shimss11q 쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물
    등록일 03.06 조회 12236 추천 0

    해결완료)synology_docker_tvheadend 삭제후 재설치 20180308 작업중에 채널스캔시 먹통 문제 해결작업중)synology_…

    • [ 시놀로지 DSM 6.1.5-15254 Update /etc/sudoers 수정 방법및 WinSCP에서 RO… ]
    등록자 shimss11q 쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물
    등록일 03.05 조회 7710 추천 0

    ■시놀로지 DSM 6.1.5-15254 Update /etc/sudoers 수정 방법및 WinSCP에서 ROOT 권한 얻어 winscp 접속 하…

    • [ epg일부 채널 정보 한글깨짐 문의/docker tvheadend조건 ] 댓글 2
    등록자 shimss11q 쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물
    등록일 03.04 조회 11535 추천 0

    ■일부 채널이 한글 제목이 깨짐니다개선 / 설정 사례 조언 부탁 드립니다▶https://github.com/wonipapa/epg2xml/iss…

    • [ docker 이용 tvheadend backup 백업 복원하기 ] 댓글 4
    등록자 shimss11q 쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물
    등록일 03.03 조회 15144 추천 0

    ■ docker 이용 tvheadend backup 백업 복원하기 입니다 링크1은 처음 설치방법이 자세히 설명 사이트 참조 바랍니다.초기 설치후…

    • [ 사운드가 올바른 스피커에서 나오는지 테스트하려면 Dolby 테스트 톤을 다운로드하십시오. ]
    등록자 shimss11q 쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물
    등록일 03.01 조회 6554 추천 0

    사운드가 올바른 스피커에서 나오는지 테스트하려면 Dolby 테스트 톤을 다운로드하십시오.Windows의 경우1 단계테스트 톤 : Dolby At…

    • [ skiptv_20180506_ALL_NEW_4K_11q.kr.zip 채널 4k 해상도 재정리 저장(공유불가)… ] 댓글 109
    등록자 shimss11q 쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물
    등록일 03.01 조회 69920 추천 0

    https://11q.kr/g5s/bbs/board.php?bo_table=s11&wr_id=4340#c_4358에 재정리 저장 합니다.…

    • [ 스마트에디터2/smarteditor2 우측 아이콘 안보여 영역 줄이기 ] 댓글 1
    등록자 shimss11q 쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물
    등록일 02.22 조회 6686 추천 0

    파일 위치 w:\g5\plugin\editor\smarteditor2\js\service\SE2BasicCreator.js nMinWidth:p…

    • [ 서버 가동 시간 linux 명령어 uptime 시간 표시하기..^^ ]
    등록자 shimss11q 쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물
    등록일 02.22 조회 6413 추천 0

    서버 가동 시간 linux 명령어 uptime 시간 표시하기..^^<?php$ret = exec("uptime");var_dump($ret…

    • [ u5pvr 리눅스 펌웨어 진행 준비 webdav tvheadend 백업후 복원까지 정상화 하기 20180… ] 댓글 2
    등록자 shimss11q 쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물
    등록일 02.15 조회 7802 추천 0

    u5pvr 리눅스 펌웨어 진행 준비 webdav tvheadend 백업후 복원까지 정상화 하기 20180215#백업하기#/home/hts/.ht…

    • [ 스마트 에디터 툴바 아이콘 삭제하는 방법 ]
    등록자 shimss11q 쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물
    등록일 02.15 조회 6456 추천 0

    스마트 에디터 툴바 아이콘 중에서 잘 사용하지 않는 기능들을 삭제하는 방법입니다.모바일 같은 곳에서는 가로 사이즈가 좁기 때문에 일부 아이콘만 …

    • [ [11q.kr/g5 수정 _test 서버 검증]댓글에 위지윅 에디터 붙이기(스마트에디터2) ] 댓글 6
    등록자 shimss11q 쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물
    등록일 02.14 조회 8971 추천 0

    [11q.kr/g5 수정 _test 서버 검증]댓글에 위지윅 에디터 붙이기(스마트에디터2)적용버전 [보안패치]그누보드 5.2.9.8.1 버전 사…

    • [ 스마트에디터2에서 이미지파일 첨부시 자동사이즈 조절 ]
    등록자 shimss11q 쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물
    등록일 02.14 조회 7218 추천 0

    스마트에디터2에서 이미지파일 첨부시 자동사이즈 조절 ---->>>> 성공http://eyoom.net/bbs/board.p…

    • [ 상단으로가기 메뉴버튼 만들기 ]
    등록자 shimss11q 쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물
    등록일 02.12 조회 6147 추천 0

    https://sir.kr/g5_tip/3901-------------------------------------- ♠ 출처는 링크 참조 바랍니…

    Now
    • [ CSS3 미디어쿼리와 스크린 경계 > 퍼블리싱강좌 ]
    등록자 shimss11q 쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물
    등록일 02.12 조회 6700 추천 0

    우선 해야할 일반응형 웹을 하기 위해서 기본적으로 설정/선언하거나 포함해야 할 항목들이 있습니다.viewport meta tag 설정요약아래코드…


    ♥간단_메모글♥

    최근글

    새댓글

    PHP 안에 HTML ☞ 홈페이지 화면갱신 시간은 ♨
    ▶ 2024-06-27 04:25:11

    오늘의 홈 현황

    • 현재 접속자♨ 783 명
    • 오늘 가입자※ 0 명
    • 어제 가입자※ 4 명
    • 주간 가입자※ 9 명
    • 오늘 방문자 1,116 명
    • 어제 방문자 2,422 명
    • 최대 방문자 13,042 명
    • 전체 방문자 4,398,145 명
    • 전체 게시물※ 8,658 개
    • 전체 댓글수※ 24,773 개
    • 전체 회원수 11,070 명

    QR코드

    ☞ QR코드 스캔은 kakao앱 자체 QR코드
    알림 0








    최신글↑