HTML 수업

모바일 지원 (viewport)

예제

<!DOCTYPE html>
<html>
<head>
  <title>HTML - 수업소개</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1><a href="index.html">HTML</a></h1>
<ol>
  <li><a href="1.html">기술소개</a></li>
  <li><a href="2.html">기본문법<a/></li>
  <li><a href="3.html">하이퍼텍스트와 속성</a></li>
  <li><a href="4.html">리스트와 태그의 중첩</a></li>
</ol>

<h2>선행학습</h2>

본 수업을 효과적으로 수행하기 위해서는 웹애플리케이션에 대한 전반적인 이해가 필요합니다. 이를 위해서 준비된 수업은 아래 링크를 통해서 접근하실 수 있습니다.
</body>
</html>

 

댓글

댓글 본문
작성자
비밀번호
  1. 푸른하늘
    7
  2. 바람과 나무
    감사합니다.
  3. 오빠는다르다
    감사합니다~!!!
  4. 이주형
    meta tag가 하는 일이 정말 많네요~!^_^
  5. 잘 봤어요^^
  6. 14번째
    5.13.
  7. php가 첫취업?
    실력좀 좋아지면 모바일쪽도 구동해보고싶습니다..
  8. 김소희
    그럼 반응형은 따로 필요 없는건가요!?
  9. 미니밥통
    동영상 시청 동시에 네이버 등 사이트 같이 보니 일부 동일하게 적용되는 가이드 코딩 언어가 있어서
    직관적으로 이해하기 매우 빨라요. 감사합니다.
  10. 아트디아
    감사합니다^^
  11. 해커가꿈인사람
    2016.12.20
    강의수강 완료
  12. 임지호
    모바일에서 웹페이지크기를 최적화시키는 방법
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    웹페이지의 폭을 장치의 폭으로 설정하고 초기화면을 줌 안한 상태로 맞춘다는 코드.
    PC가 아닌 장치에서의 웹페이지 크기를 최적화하는 코드. 그냥 기계적으로 넣어주면 된다.
  13. 두두두
    감사합니다.
  14. matheios
    강의 감사합니다~~
  15. D.JA
    DONE!
  16. 심외무별법
    감사합니다. 잘보고 있습니다.
  17. 김종엽
    2016.08.24 완료!
  18. Daehyeop Ko
    감사합니다!
  19. wonhee lee
    감사합니다
  20. cicada
    감사합니다!
  21. Ian Si Mong Seong
    수강완료
    2016.08.01
  22. JustStudy
    2016.07.20 수
    고맙습니다 1.
  23. 이승민
    잘봤습니다. 감사합니다 ㅎ
  24. joo0914krs
    감사합니다.
  25. 빨강머리앤
    와우 ~
    평소 궁금했던 내용입니다.... 열심히 공부해서 반응형 만들어 볼 수 있겠네요. ^^
    수업이 지루하지 않고 재밌습니다.
    감사 감사
  26. 좋은 강의 잘 들었습니다.
    감사합니다.
  27. 고고
    이렇게 하면 반응형 웹이 되는건가요??
  28. 이웃집도토해
    둘 다 모바일 환경에서 반응형 웹 디자인(Responsive Web Design)을 위한 기능입니다.
    https://spoqa.github.io......tml
    이 글을 참고하시면 좋습니다. 아래는 영문 위키를 참고하여 구체적인 차이를 설명한 내용입니다.
    제가 공부한 내용을 적는 것이니 틀린 부분이 있을 수 있습니다.

    스펙상의 차이점은 http://dolly77.tistory.com/88 처럼 세부적으로 차이가 나는데
    viewport라는 용어 자체는 이전부터 있었고 브라우저 화면 영역을 의미하는 단어였습니다.
    애플의 사파리에서 viewport를 meta태그에 명시해서 사용하기 시작하여 여러 브라우저에도 채택되었는데
    이는 viewport라는 단어 자체가 html에서 특별한 기능이 있다기 보다는
    의미자체가 화면영역이라는 고유명사이므로 name속성의 값으로 지정하여 사용한 것입니다.
    w3c에서는 HTML이 아닌 CSS에서 명시하는 것을 권장한다고 합니다.

    한편 media query는 CSS2 버전에서 개발되어 발전해오다가
    2012년경부터 CSS3에서 사용되는 반응형 웹의 레이아웃을 위한 표준으로 w3c가 권장하고 있습니다.
    주요 특징은 출력장치에 따라 레이아웃을 다르게 지정할 수 있습니다. aside를 출력하지 않거나 합니다.

    실 사용 시의 둘의 구분은 목적과 개발환경에 따라 구분되어 사용된다고 할 수 있습니다.
    viewport만으로 충분히 콘텐츠를 이용하는데 불편이 없다면 미디어쿼리를 지정해줄 필요가 없습니다만
    IE11 등에서는 viewport를 지원하지 않으니 웹 호환성을 고려하면 W3C의 권고대로 CSS에서 지정하는 것이 좋습니다.
    @viewport의 형태로 명시 해 놓는 것이 바람직합니다.

    결론 - 눈치 보시면서 대세를 따르세요!
    대화보기
    • kimgy
      항상 고맙습니다. 그런데, 모바일을 지원하는 방법에서 media query 와는 어떻게 다른 건지 궁금합니다. 질문을 제대로 한 것인지 모르겠네요. ㅡㅡ
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기