미디어 쿼리 만들기

웹 페이지를 만듭니다.

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

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

• 사이트 전체 미디어 쿼리 파일을 만들려면 [Site Wide Media Queries File]을 선택하십시오.

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

사이트 범위 미디어 쿼리의 경우 다음을 수행합니다.

일부 장치는 실제 폭을 보고하지 않을 수 있습니다.장치가 실제 폭을 보고하도록 하려면 [Force Devices To Report Actual Width] 옵션이 활성화되어 있는지 확인하십시오.

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

<meta name="viewport" content="width=device-width">

다음 중 하나를 수행하십시오.

• "+"를 클릭하여 미디어 쿼리 파일의 속성을 정의하십시오.

• 표준 프리셋으로 시작하려면 [Default Presets]을 클릭하십시오.

표에서 행을 선택하고 [Properties] 아래의 옵션을 사용하여 속성을 편집하십시오.

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

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

[Use Existing File]을 선택하고 해당 장치의 CSS 파일을 찾아보십시오.

아직 만들지 않은 CSS 파일을 지정하려면 [Create New File]을 선택하십시오.CSS 파일의 이름을 입력하십시오.[확인]을 누르면 파일이 만들어집니다.

[확인]을 클릭합니다.

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

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

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

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

[지정]을 클릭합니다.

미디어 쿼리로 CSS 파일을 이미 만든 경우 [기존 파일 사용]을 선택하십시오.

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

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

디바이스가 실제 폭을 보고하도록 하려면 [디바이스가 실제 폭을 보고하도록 설정] 옵션이 활성화되어 있는지 확인하십시오.이 옵션을 선택하면 다음 코드가 파일에 삽입됩니다.

<meta name="viewport" content="width=device-width">

[확인]을 클릭합니다.

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

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

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

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

오른쪽 패널의 [사이트 전체 미디어 쿼리 파일]에서 [찾아보기]를 클릭하여 미디어 쿼리 CSS 파일을 선택하십시오.

[저장]을 클릭합니다.