비주얼 미디어 쿼리를 사용하여 다른 화면 크기에 해당하는 다른 중단점에서 웹 페이지를 보고 편집합니다.

미디어 쿼리는 다른 디바이스 또는 미디어 유형에 대해 다른 스타일 규칙을 정의하여 반응형 웹 사이트를 디자인할 수 있는 CSS3 모듈입니다. 이 규칙을 기반으로 화면 크기, 브라우저 창 크기, 디바이스 크기 및 방향, 해상도 등 여러 조건에 맞게 내용이 렌더링됩니다.

@media 규칙을 사용하여 CSS에 미디어 쿼리를 추가할 수 있습니다. 또는 여러 미디어 유형에 대한 별도의 스타일 시트를 만든 다음 구문을 사용하여 호출할 수 있습니다.

<link rel='stylesheet' media='all' href='normal.css' />
<link rel='stylesheet' media='print' href='print.css' />
<link rel='stylesheet' media='screen and (min-width: 701px)' href='medium.css' />

디바이스의 브라우저는 미디어 쿼리를 확인하고 해당 CSS 파일을 사용하여 웹 페이지를 표시합니다. 

자세한 내용은 이 문서를 참조하십시오.

HTML 또는 CSS 파일에 미디어 쿼리 관련 코드를 추가하여 미디어 쿼리를 추가할 수 있습니다. 또한 Dreamweaver에서는 다음을 쉽게 사용하여 미디어 쿼리를 만들고 관리할 수 있습니다.

이 두 방법 간의 기본적 차이는 시각적 측면입니다. 코딩한 다음 라이브 뷰에서 변경한 내용을 보려면 CSS Designer를 사용합니다. 여러 중단점에서 페이지를 시각화하고 동시에 디자인을 변경하려면 비주얼 미디어 쿼리를 사용하는 것이 가장 좋습니다.

비주얼 미디어 쿼리 바

비주얼 미디어 쿼리 바는 페이지에 표시되는 미디어 쿼리의 시각적인 표현입니다. 이 바를 통해 다양한 중단점에서 웹 페이지를 시각화할 수 있으며 웹 페이지의 다양한 구성 요소가 여러 뷰포트에서 리플로우되는 방식을 시각화할 수 있습니다. 여러 뷰포트에서 페이지를 보는 동안 다른 뷰포트의 페이지 디자인에 영향을 주지 않고 특정 뷰포트의 디자인을 변경할 수 있습니다.

비주얼 미디어 쿼리는 수평 행으로 된 3개의 바로 구성되며 각 바는 미디어 쿼리 범주를 나타냅니다.

  •  녹색: max-width 조건의 미디어 쿼리
  •  파란색: min-width 및 max-width 조건의 미디어 쿼리
  •  자주색: min-width 조건의 미디어 쿼리

참고:

CSS Designer 패널에 열거된 미디어 쿼리도 이 색상으로 사전 설정됩니다.

각 범주는 하나 이상의 미디어 쿼리로 구성됩니다. 미디어 쿼리 조건이 문서에 정의 되지 않은 경우 해당 비주얼 미디어 쿼리 바에도 표시되지 않습니다. 예를 들어 문서에 최소 폭 조건이 없으면 자주색 막대가 표시되지 않습니다.

중단점 값은 막대 왼쪽에 최소 폭, 오른쪽에 최대 폭으로 막대에 표시됩니다.

중단점 값
중단점 값

A. 중단점 B. 비주얼 미디어 쿼리 바 C. 미디어 쿼리 아이콘 추가 D. Scrubber 

비주얼 미디어 쿼리 숨기기 또는 표시

비주얼 미디어 쿼리 바는 기본적으로 라이브 뷰에 표시됩니다. 막대를 숨기려면 도구 모음에 있는 [비주얼 미디어 쿼리 바 토글]을 사용합니다.

중단점 간 전환

지정된 크기(중단점)로 페이지를 보려면 해당 미디어 쿼리 바를 클릭합니다. 문서의 중단점에 스냅합니다.

또는 scrubber를 필요한 중단점으로 드래그할 수 있습니다.

Dreamweaver 문서 창 크기를 조정하려면 다음 작업 중 하나를 실행합니다.

  • [더블 클릭하여 폭 맞추기] 텍스트가 보이는 문서 오른쪽의 회색 영역에서 아무 곳이나 더블 클릭합니다. 회색 영역이 보이지 않으면 Scrubber를 왼쪽으로 드래그합니다.
  • 문서 창의 아래쪽에 있는 드롭다운 목록에서 전체 폭 옵션을 선택합니다.
보기 크기 조정
보기 크기 조정

이 옵션이 보이지 않으면 scrubber를 드래그하여 웹 페이지 크기를 줄입니다.

시각적으로 미디어 쿼리 편집

  1. 편집하려는 미디어 쿼리에 해당하는 비주얼 미디어 쿼리 바를 클릭합니다.

    크기 조절 핸들이 나타납니다. min-widthmax-width 값이 모두 있는 미디어 쿼리의 경우 바의 양쪽에 크기 조절 핸들이 나타납니다.

    크기 조절 핸들
    크기 조절 핸들

  2. 필요한 크기로 핸들을 드래그합니다.

    미디어 쿼리는 새 min-width 및/또는 max-width 값으로 자동 업데이트됩니다. 미디어 쿼리가 성공적으로 편집되었음을 나타내는 알림이 표시됩니다. 비주얼 미디어 쿼리 바에 해당하는 여러 미디어 쿼리가 있는 경우 모든 미디어 쿼리가 업데이트됩니다. 업데이트된 미디어 쿼리 수가 성공 메시지와 함께 표시됩니다.

참고:

취소하려면 Ctrl+Z(Win) 또는 Cmd+Z(Mac)를 누릅니다.

또는 중단점 값을 더블 클릭하면 키보드를 사용하여 값을 입력할 수 있습니다. 

새 미디어 쿼리 추가

  1. 필요한 크기로 자를 따라 scrubber를 드래그합니다.

  2. 를 클릭합니다.

    미디어 쿼리 추가
    미디어 쿼리 추가

  3. 표시되는 팝업에는 최대 폭 옵션이 기본적으로 선택되어 있습니다. 최소 폭이나 최소-최대값을 지정하려면 드롭다운 목록에서 적절한 옵션을 선택하고 필요한 단위를 선택합니다.

    그런 다음 미디어 쿼리를 추가해야 하는 CSS 소스를 선택합니다.

    새 CSS 파일을 생성하도록 선택하면 다른 팝업창이 나타납니다. 새 CSS 파일의 이름과 경로를 지정하고 [확인]을 클릭합니다.

참고:

취소하려면 Ctrl+Z(Win) 또는 Cmd+Z(Mac)를 누릅니다.

미디어 쿼리 삭제

  1. 해당 비주얼 미디어 쿼리 바를 마우스 오른쪽 버튼으로 클릭합니다.

  2. [삭제]를 클릭한 다음 삭제하려는 미디어 쿼리를 클릭합니다.

  3. [확인]을 클릭하여 미디어 쿼리와 연계된 선택기를 모두 삭제합니다.

참고:

취소하려면 Ctrl+Z(Win) 또는 Cmd+Z(Mac)를 누릅니다.

미디어 쿼리에 대한 코드 보기

  1. 필요한 비주얼 미디어 쿼리 바를 마우스 오른쪽 버튼으로 클릭하고 코드로 이동을 마우스로 가리킵니다.

    미디어 쿼리가 선언된 파일과 함께 특정 중단점 범위에 있는 모든 미디어 쿼리 목록이 나타납니다.

  2. 필요한 미디어 쿼리를 클릭하여 코드 보기에서 해당 코드로 이동합니다.

    코드 보기가 보이지 않으면 문서가 분할 보기로 전환되어 코드를 표시합니다.

이 작업에는 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License의 라이센스가 부여되었습니다.  Twitter™ 및 Facebook 게시물은 Creative Commons 약관을 적용받지 않습니다.

법적 고지 사항   |   온라인 개인 정보 보호 정책