사용 안내서 취소

미디어 쿼리 만들기

 

 

미디어 쿼리를 사용하여 장치의 보고된 특성을 기반으로 CSS 파일을 지정할 수 있습니다(반응형 디자인). 장치의 브라우저는 미디어 쿼리를 확인하고 해당 CSS 파일을 사용하여 웹 페이지를 표시합니다.

예를 들어 다음 미디어 쿼리는 폭이 300-320픽셀인 장치에 대한 phone.css 파일을 지정합니다.

<link href="css/orig/phone.css" rel="stylesheet" type="text/css" media="all and (min-width: 300px) and (max-width: 320px)">
<link href="css/orig/phone.css" rel="stylesheet" type="text/css" media="all and (min-width: 300px) and (max-width: 320px)">
<link href="css/orig/phone.css" rel="stylesheet" type="text/css" media="all and (min-width: 300px) and (max-width: 320px)">

미디어 쿼리에 대한 자세한 소개는 Adobe 개발자 센터에서 Don Booth의 기사(www.adobe.com/go/learn_dw_medquery_don_kr)를 참조하십시오.

W3C의 미디어 쿼리에 대한 자세한 내용은 www.w3.org/TR/css3-mediaqueries/를 참조하십시오.

미디어 쿼리 만들기

Dreamweaver에서 사이트 전체 미디어 쿼리 파일이나 문서 특정 미디어 쿼리를 만들 수 있습니다.

사이트 전체 미디어 쿼리 파일

파일이 포함된 사이트의 모든 페이지에 대한 표시 설정을 지정합니다.

사이트 전체 미디어 쿼리 파일은 사이트의 모든 미디어 쿼리에 대한 중앙 저장소 역할을 합니다. 이 파일을 만든 후, 페이지를 표시하는 데 파일의 미디어 쿼리를 사용해야 하는 사이트의 페이지에서 이 파일에 링크를 적용합니다.

문서 특정 미디어 쿼리

미디어 쿼리가 문서에 직접 삽입되고 페이지가 삽입된 미디어 쿼리를 기반으로 표시됩니다.

  1. 웹 페이지를 만듭니다.

  2. 수정 > 미디어 쿼리를 선택합니다.

  3. 다음 중 하나를 수행합니다.

    • 사이트 전체 미디어 쿼리 파일을 만들려면 [사이트 전체 미디어 쿼리 파일]을 선택합니다.

    • 문서 특정 미디어 쿼리를 만들려면 [이 문서]를 선택합니다.

  4. 사이트 전체 미디어 쿼리의 경우 다음을 수행합니다.

    1. [지정]을 클릭합니다.

    2. [새 파일 만들기]를 선택합니다.

    3. 파일 이름을 지정하고 [확인]을 클릭합니다.

  5. 일부 장치는 실제 폭을 보고하지 않을 수 있습니다. 장치에서 실제 폭을 보고하도록 하려면 [장치에서 실제 폭 강제 보고] 옵션을 활성화합니다.

    이 옵션을 선택하면 다음 코드가 파일에 삽입됩니다.

    <meta name="viewport" content="width=device-width">
    <meta name="viewport" content="width=device-width">
    <meta name="viewport" content="width=device-width">
  6. 다음 중 하나를 수행합니다.

    • "+"를 클릭하여 미디어 쿼리 파일의 속성을 정의합니다.

    • 표준 사전 설정으로 시작하려면 [기본 사전 설정]을 클릭합니다.

  7. 표의 행을 선택하고 [속성]의 옵션을 사용하여 속성을 편집합니다.

    설명

    CSS 파일을 사용해야 하는 장치에 대한 설명입니다. (예: 스마트폰, TV, 태블릿 등)

    최소 폭 및 최대 폭

    CSS 파일은 보고된 폭이 지정된 값에 해당하는 장치에 사용됩니다.

    참고:

    장치의 범위를 명시적으로 지정하지 않으려면 [최소 폭] 또는 [최대 폭]을 비워 두십시오. 예를 들어 폭이 320px 이하인 전화기를 대상으로 하는 경우 [최소 폭]을 비워 두는 것이 일반적입니다.

    CSS 파일

    [기존 파일 사용]을 선택하고, 장치에 대한 CSS 파일을 찾습니다.

    아직 만들지 않은 CSS 파일을 지정하려면 [새 파일 만들기]를 선택합니다. CSS 파일의 이름을 입력합니다. [확인]을 누르면 파일이 만들어집니다.

  8. [확인]을 클릭합니다.

  9. 사이트 범위 미디어 쿼리에 대한 새 파일이 만들어집니다. 파일을 저장합니다.

사이트 전체 미디어 쿼리: 기존 페이지에 대해 모든 페이지의 <head> 태그에 미디어 쿼리 파일을 포함합니다.

mediaquery_adobedotcom.css가 www.adobe.com/kr 사이트에 대한 사이트 전체 미디어 쿼리 파일인 미디어 쿼리 링크의 예:

<link href="mediaquery_adobedotcom.css" rel="stylesheet" type="text/css">
<link href="mediaquery_adobedotcom.css" rel="stylesheet" type="text/css">
<link href="mediaquery_adobedotcom.css" rel="stylesheet" type="text/css">

기존 미디어 쿼리 파일 사용

  1. 웹 페이지를 만들거나 기존 페이지를 엽니다.

  2. 수정 > 미디어 쿼리를 선택합니다.

  3. [사이트 전체 미디어 쿼리 파일]을 선택합니다.

  4. [지정]을 클릭합니다.

  5. 이미 미디어 쿼리가 포함된 CSS 파일을 만든 경우 [기존 파일 사용]을 선택합니다.

  6. 검색 아이콘을 클릭하여 파일을 찾아 지정합니다. [확인]을 클릭합니다.

  7. [사이트 전체 미디어 쿼리 파일]을 선택합니다.

  8. 장치에서 실제 폭을 보고하도록 하려면 [장치에서 실제 폭 강제 보고] 옵션을 활성화합니다. 이 옵션을 선택하면 다음 코드가 파일에 삽입됩니다.

    <meta name="viewport" content="width=device-width">
    <meta name="viewport" content="width=device-width">
    <meta name="viewport" content="width=device-width">
  9. [확인]을 클릭합니다.

다른 사이트 전체 미디어 쿼리 파일 선택

이 절차를 통해 미디어 쿼리 대화 상자에서 설정한 사이트 전체 미디어 쿼리 파일을 변경합니다.

  1. 사이트 > 사이트 관리를 선택합니다.

  2. 사이트 관리 대화 상자에서 해당 사이트를 선택합니다.

  3. [편집]을 클릭합니다. [사이트 설정] 대화 상자가 표시됩니다.

  4. 왼쪽 패널의 [고급 설정]에서 [로컬 정보]를 선택합니다.

  5. 오른쪽 패널의 [사이트 전체 미디어 쿼리 파일]에서 [검색]을 클릭하여 미디어 쿼리 CSS 파일을 선택합니다.

    참고:

    사이트 전체 미디어 쿼리 파일을 변경해도 다른 사이트 전체 미디어 쿼리 파일 또는 이전 사이트 전체 미디어 쿼리 파일에 링크된 문서에는 영향을 미치지 않습니다.

  6. [저장]을 클릭합니다.

미디어 쿼리 기반 웹 페이지 보기

미디어 쿼리에 지정된 크기가 멀티스크린 버튼/창 크기 옵션에 표시됩니다. 메뉴에서 크기를 선택하면 다음과 같이 변경되는 것을 확인할 수 있습니다.

  • 지정된 크기를 반영하여 보기 크기가 변경됩니다. 문서 프레임 크기는 변경되지 않습니다.

  • 미디어 쿼리에 지정된 CSS 파일이 페이지를 표시하는 데 사용됩니다.

쉽고 빠르게 지원 받기

신규 사용자이신가요?