편집하려는 미디어 쿼리에 해당하는 시각적 미디어 쿼리 막대를 클릭하십시오.
마지막 업데이트 날짜
2021년 12월 20일
비주얼 미디어 쿼리를 사용하여 다른 화면 크기에 해당하는 다른 중단점에서 웹 페이지를 보고 편집합니다.
미디어 쿼리는 다른 디바이스 또는 미디어 유형에 대해 다른 스타일 규칙을 정의하여 반응형 웹 사이트를 디자인할 수 있는 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 패널에 나열된 미디어 쿼리도 이러한 색상으로 표시됩니다.
각 범주는 하나 이상의 미디어 쿼리로 구성됩니다. 미디어 쿼리 조건이 문서에 정의 되지 않은 경우 해당 비주얼 미디어 쿼리 바에도 표시되지 않습니다. 예를 들어 문서에 min-width 조건이 포함되지 않은 경우 보라색 막대가 표시되지 않습니다.
중단점 값은 막대에 표시됩니다. min-width는 막대 왼쪽에, max-width는 막대 오른쪽에 표시됩니다.
A. 중단점 B. 비주얼 미디어 쿼리 바 C. 미디어 쿼리 아이콘 추가 D. Scrubber
Visual Media Queries 숨기거나 펼치기
비주얼 미디어 쿼리 바는 기본적으로 라이브 뷰에 표시됩니다. 막대를 숨기려면 도구 모음에서 [Visual Media Queries 막대 토글] 버튼을 사용하십시오.
중단점 간 전환
지정된 크기(중단점)로 페이지를 보려면 해당 미디어 쿼리 바를 클릭합니다. 문서가 중단점에 맞춰집니다.
또는 스크러버를 필요한 중단점으로 끌 수 있습니다.
Dreamweaver 문서 창 크기에 맞게 보기 크기를 조절하려면 다음 중 하나를 수행하십시오.
- [더블 클릭하여 폭 맞추기] 텍스트가 보이는 문서 오른쪽의 회색 영역에서 아무 곳이나 더블 클릭합니다. 회색 영역이 보이지 않으면 스크러버를 왼쪽으로 드래그하십시오.
- 문서 창 하단의 드롭다운 목록에서 [전체 폭] 옵션을 선택하십시오.
이 옵션이 보이지 않으면 스크러버를 끌어 웹 페이지 크기를 줄이십시오.
미디어 쿼리 시각적으로 편집하기
크기 조절 핸들이 나타납니다. min 및 max-width 값이 모두 있는 미디어 쿼리의 경우 막대 양쪽에 크기 조절 핸들이 나타납니다.
핸들을 필요한 크기로 드래그하십시오.
미디어 쿼리는 새 min-width 및/또는 max-width 값으로 자동 업데이트됩니다. 미디어 쿼리가 성공적으로 편집되었음을 나타내는 알림이 표시됩니다. 비주얼 미디어 쿼리 바에 해당하는 여러 미디어 쿼리가 있는 경우 모든 미디어 쿼리가 업데이트됩니다. 업데이트된 미디어 쿼리 개수가 성공 메시지와 함께 표시됩니다.
실행 취소하려면 Ctrl+Z(Win) 또는 Cmd+Z(Mac)를 누르십시오.
또는 중단점 값을 두 번 클릭하여 키보드로 값을 입력할 수 있습니다.
새 미디어 쿼리 추가
스크러버를 눈금자를 따라 필요한 크기로 드래그하십시오.
를 클릭합니다.
표시되는 팝업에는 최대 폭 옵션이 기본적으로 선택되어 있습니다. 최소 폭 또는 최소-최대를 지정하려면 드롭다운 목록에서 적절한 옵션을 선택하고 필요한 단위를 선택하십시오.
그런 다음 미디어 쿼리를 추가할 CSS 소스를 선택하십시오.
새 CSS 파일을 생성하도록 선택하면 다른 팝업창이 나타납니다. 새 CSS 파일의 이름과 경로를 지정하고 [확인]을 클릭하십시오.
실행 취소하려면 Ctrl+Z(Win) 또는 Cmd+Z(Mac)를 누르십시오.
미디어 쿼리 삭제
해당 시각적 미디어 쿼리 막대를 마우스 오른쪽 버튼으로 클릭하십시오.
[삭제]를 클릭한 후 삭제하려는 미디어 쿼리를 클릭하십시오.
[확인]을 클릭하여 모든 미디어 쿼리 및 관련 선택기를 삭제할지 확인하십시오.
실행 취소하려면 Ctrl+Z(Win) 또는 Cmd+Z(Mac)를 누르십시오.
미디어 쿼리 코드 보기
필요한 시각적 미디어 쿼리 막대를 마우스 오른쪽 버튼으로 클릭하고 코드로 이동에 마우스를 올리십시오.
선언된 파일과 함께 해당 중단점 범위의 모든 미디어 쿼리 목록이 나타납니다.
코드 보기에서 해당 코드로 이동하려면 필요한 미디어 쿼리를 클릭하십시오.
코드 보기가 표시되지 않으면 문서가 분할 보기로 전환되어 코드가 표시됩니다.
