1.다음 코드가 어떤 의미인지 설명하세요.

   <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=2.0,user-scalable=yes">

viewport는 스마트 기기상에서 최초에 페이지를 로딩할때 확대정도, 최소,최대 확대비율등을 다루는 meta data에 속하는 속성으로 모바일 장치에서 최적화된 웹페이지를 만들기 위해 설정함.

[width=device-width]
기기의 너비에 맞춰 화면의 크기를 맞춤
ex)

1. viewport 미적용
   http://www.w3schools.com/css/example_withoutviewport.htm
2. viewport 적용
   http://www.w3schools.com/css/example_withviewport.htm

[initial-scale=1.0]
뷰포트의 초기 화면의 크기값으로 1.0은 확대,축소 없는 본 크기 그대로값
초기값 : 1, 범위 : 1 ~ 10
'user-scalable' 값이 'no'로 설정되지 않는 한, 'minimum-scale','maximum-scale' 속성의 의해
축소/확대가 가능하다.

[minimum-scale=1.0, maximum-scale=2.0]
minimum-scale=1.0 으로 설정하면 비율의 최적화 화면으로 표시, 축소 작동은 하지 않음.
초기값 : 0.25, 범위 : 0 ~ 10
maximum-scale=2.0 으로 설정하면 최대 2배까지 확대가능
초기값 : 1.6, 범위 :0 ~ 10

[user-scalable=yes]
'user-scalable' 속성은 사용자가 스케일을 조절할 수 있는지 여부를 지정하는 값으로
'yes' or 'no' 값을 지정할 수 있으며, yes가 기본값이고, 이는 사용자가 스케일을 조정할 수 있도록 함.
'user-scalable' 속성은 되도록이면 yes를 유지하는게 좋다고 함.
예전에 'user-scalable' 속성을 아이폰에서 landscape 모드가 되면 폰트가 커지는 이슈로 'no'로 지정하는경우가 많았는데,

-webkit-text-size-adjust

속성을 사용하면 폰트 사이즈를 고정하는것이 가능함.

body { -webkit-text-size-adjust : none }

따라서 확대, 축소는 사용성에 크게 영향을 미칠 수 있기 때문에 되도록이면 막는것을 지양하는것이 좋다고 함.

8.아래 조건에 맞게 미디어쿼리문을 작성해야합니다. 대괄호에 알맞은 단어를 채우세요.

• 화면 너비 640px미만 일때 배경색상 #000
• 화면 너비 640px이상 일때 배경색상 #dadada
• 인쇄시 배경색상 #fff

@media [screen] and (max-width:639px) {
body{
        background:#000;
    }
 }
@media [screen] and (min-width:640px) {
 body{
        background:#dadada
    }
 }
@media [print] {
 body{
        background:#000;
    }
}   

[HTML4.01과 CSS2에서는 media type에 대응하는 스타일 시트를 따로 구성할 수 있는 방식 제공]

<STYLE type="text/css" media="projection">
    H1 { color: blue}
</STYLE>
<link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css">
<link rel="stylesheet" type="text/css" media="print" href="serif.css">

참고URL
http://www.w3.org/TR/REC-html40/present/styles.html#h-14.2.4

[CSS2에서 정의된 media type 정의 방법]

@media screen {
    * { font-family: sans-serif }
}

참고URL
http://www.w3.org/TR/CSS21/media.html

위 방법은 media type만 결정 할 수 있었기 때문에 같은 미디어의 다양한 환경을 모두 수용하기 어려웠음.
하지만, CSS media quries modies을 이용하면서 디바이스 종류뿐만 아니라 다양한 조건을 이용하여 Style을 분기할 수 있게됨.

[Media Type]

• all : 모든 장치에 적합
• print : 인쇄물(paged material) 및 인쇄 미리보기 모드에서 화면 상에 보이는 문서를 위해 계획됨.
  ex ) 컴퓨터 스크린에서는 sans-serif글꼴이 가독성이 좋고, 인쇄된종이에서는 serifs글꼴이 가독성이 좋음
• screen : 컴퓨터 스크린, 테블릿, 스마트폰 등
• speech : 페이지를 읽어주는 화면 낭독기
• * css2 및 Media Queiry3에서는 이 외에도 여러 부가 미디어 유형(tty, tv, projection, handheld, braille, embossed, aural) 이 정의 됐지만, 현재 Media Queiry4에서는 사라짐.

[외부 파일을 사용하는 방법]

<link rel="stylesheet" media="screen and (min-device-width: 200px)" href="common.css" />
<link rel="stylesheet" media="screen and (min-device-width: 800px)" href="common2.css" />  

['<'style'>' 태그 이용하는 방법]

<style type="text/css" media="screen and (min-device-width: 200px)">
body { background-color: #0F0; }
</style>
 <style type="text/css" media="screen and (min-device-width: 800px)">
body { background-color: #F00; }
</style>

[css 파일내에 사용하는 방법]

<style type="text/css">
@media screen and (min-device-width: 200px) {
body { background-color: #0F0; }
}
@media screen and (min-device-width: 800px) {
body { background-color: #F00; }
}
</style>

[only, not]
media type을 선별하는 접두어

[ only ]
미디어 쿼리를 지원하는 사용자 agent만 media query 구문을 해석하라는 뜻이고 생략이 가능함.
생략했을때 기본값이 only로 처리됨.

@media only screen {
body { background-color: #F00; }
}

[ not ]
전체 미디어 쿼리를 부정하기 위해 사용, 뒤에 오는 모든 조건을 부정하는 연산

@media not screen {
body { background-color: #F00; }
}

*only 나 not을 사용하려면 미디어 타입을 규정해야 함.
*미디어 쿼리는 대소문자 구별하지 않음.

[width]
user-agent의 현재 width값에 대응해서 반응

@media screen and (width:640px) {
    body{
        background:#000;
    }
 }

[min-width]
최소 가로 너비를 지정하고 지정된 값 이상이면 그 값에 대해 반응

@media screen and (min-width:640px) {
    body{
        background:#000;
    }
 }

[max-width]
최대 가로 너비를 지정하고 지정된 값 이하이면 그 값에 대해 반응

@media screen and (max-width:639px) {
    body{
        background:#000;
    }
 }

[min-width / max-width and 연산자 사용하여 응용]

@media screen and (min-width: 768px) and (max-width: 1024px) {
    body{
        background:#000;
    }
 }

[min-width / max-width or 연산자 사용하여 응용]

@media screen and (width: 320px) , (width: 768px) {
    body{
        background:#000;
    }
 }

이 외에도 device-width/divice-height(출력장치의 너비,높이) , orientation(portrait/landscape 화면이 가로모드인지, 세로모드인지 지정) , aspect-ratio(화면영역의 가로,세로 비율), device-aspect-ratio(출력장치의 가로,세로 비율), color(출력 장치의 색상 구성요소 당 비트 수), color-index(장치가 표시 할 수 있는 수), monochrome(흑백 장치에 색상 당 비트 수),resolution(출력 장치의 해상도),scan(tv출력 장치의 스캐닝 과정),grid (출력 장치가 그리드 장치 또는 비트맵 장치냐에 따라 결정)등 여러가지 조건문이 될 수 있는 특징들이 있음.

참고URL
https://developer.mozilla.org/ko/docs/Web/Guide/CSS/Media_queries

1. 모바일에서 텍스트에 전화번호 유형이 있는경우, 자동 링크를 막기 위해서는 아래와 같이 메타 태그
   ios 적용

<meta name="format-detection" content="telephone=no">
그러나, iOS에서는 자동 링크가 제거 되지만, 안드로이드에서는 적용되지 않는 문제가 있다.

안드로이드는 해당 엘리먼트에 style="pointer-events:none"로 자동 링크를 막을 수 있다.
(iOS도 적용은 되지만, 간혹 앱을 통해 확인할 경우 안되는경우도 있음.)

1. css로 pointer-events:none을 주면
   예) <span style="pointer-events:none">01044050909</span> 해결할 수 있다.