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. DONE!
  2. 심외무별법
    감사합니다. 잘보고 있습니다.
  3. 김종엽
    2016.08.24 완료!
  4. Daehyeop Ko
    감사합니다!
  5. wonhee lee
    감사합니다
  6. cicada
    감사합니다!
  7. Ian Si Mong Seong
    수강완료
    2016.08.01
  8. JustStudy
    2016.07.20 수
    고맙습니다 1.
  9. 이승민
    잘봤습니다. 감사합니다 ㅎ
  10. joo0914krs
    감사합니다.
  11. 빨강머리앤
    와우 ~
    평소 궁금했던 내용입니다.... 열심히 공부해서 반응형 만들어 볼 수 있겠네요. ^^
    수업이 지루하지 않고 재밌습니다.
    감사 감사
  12. 좋은 강의 잘 들었습니다.
    감사합니다.
  13. 고고
    이렇게 하면 반응형 웹이 되는건가요??
  14. 이웃집도토해
    둘 다 모바일 환경에서 반응형 웹 디자인(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의 형태로 명시 해 놓는 것이 바람직합니다.

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