Dreamweaver에서 사용자 지정 미디어 쿼리를 만드는 방법 - 유체 격자 레이아웃 기능을 사용하여 페이지를 만들 때 더미

유체 격자 레이아웃 기능을 사용하여 페이지를 만들면 Dreamweaver에서 자동으로 해당 미디어 쿼리가 자동으로 만들어지며 다음과 같은 미디어 쿼리가 웹에서 사용됩니다. 하지만 자신 만의 맞춤 미디어 쿼리를 만들어서 자신의 CSS 규칙을 타깃으로 사용할 수 있습니다.

미디어 쿼리는 인쇄용으로 최적화 된 대체 페이지 디자인을 만드는 것과 같이 다른 용도로 10 년 이상 웹에서 사용되었습니다. 미디어 쿼리는 화면 또는 인쇄 (가장 일반적인 두 가지)와 같은 미디어 유형과 높이 또는 너비와 같은 특정 기능을 검사하는 선택적 표현식으로 구성됩니다. 가장 일반적으로 사용되는 미디어 유형은

• all: 모든 장치에 적합

• print: 인쇄 미리보기 및 페이지 인쇄시 표시

• 화면: 모든 화면에 표시된 내용 용

핸드 헬드 미디어 유형 는 거의 사용되지 않으며 작은 화면, 제한된 대역폭 및 비트 맵 그래픽 만 지원하는 흑백 디스플레이가있는 휴대 전화 및 기타 장치에만 가장 잘 사용됩니다. iOS 기기와 대부분의 스마트 폰은 화면 미디어 유형으로 분류됩니다.

스타일 시트를 연결하거나 가져 오는 방법으로 스타일 시트를 외부 파일로 적용하거나 스타일 시트를 자신의 헤드 영역에 내부 스타일로 포함 할 수 있습니다 페이지의 HTML 코드 인라인 스타일을 사용하여 장치를 대상으로 지정할 수도 있습니다. 특정 장치 만 특정 규칙을 적용하려는 경우 편리한 옵션입니다.

이러한 옵션을 조합하여 사용할 수 있으며, 여러 외부 스타일 시트를 동일한 웹 페이지로 가져 오거나 연결할 수 있습니다. 대상으로 지정할 미디어 기능이있는 미디어 유형을 정의한 후에 스타일을 페이지에 적용하는 방법을 지정합니다.

Dreamweaver의 외부 스타일 시트에서 미디어 쿼리를 사용하는 방법

두 가지 방법으로 외부 스타일 시트와 함께 미디어 쿼리를 사용할 수 있습니다. 첫 번째 옵션은 미디어 쿼리로 구분 된 여러 스타일 집합으로 하나의 외부 스타일 시트에 연결하는 것입니다. Dreamweaver가 유체 격자 레이아웃을 만들 때 스타일을 연결하는 방법입니다.

둘째 옵션은 둘 이상의 개별 외부 스타일 시트를 각 HTML 페이지에 연결하고 각 스타일 시트에 미디어 쿼리를 포함시키는 것입니다. 어느 쪽이든, CSS와 HTML에 대한 코드는 별도의 파일에 저장되며 태그는이를 연결합니다.

모든 미디어 쿼리 및 관련 스타일을 하나의 파일 또는 별도의 CSS 파일에 저장하든, 추가 스타일 시트를 모든 HTML 페이지에도 연결할 수 있습니다. 예를 들어 별도의 스타일 시트에 별도의 스타일 세트를 포함 할 수 있습니다.이 스타일 시트는 프린터로 보낼 때 페이지의 서식을 지정합니다.

Dreamweaver에서 미디어 쿼리 작성 방법

Dreamweaver에서 원하는만큼 미디어 쿼리를 생성 할 수 있으며 하나 이상의 CSS 파일에 여러 미디어 쿼리를 포함 할 수 있습니다. Dreamweaver에서 새 미디어 쿼리를 만들려면 다음 단계를 따르십시오.

[창] → [CSS 스타일]을 선택하여 CSS 디자이너 패널을 엽니 다.

1. 소스 패널에서 기존 스타일 시트를 선택하거나 소스 패널에서 더하기 기호 (+)를 클릭하여 새 스타일 시트를 만듭니다.

2. CSS Designer 패널의 @Media 패널에서 더하기 기호 (+)를 클릭하십시오.

   

3. 미디어 쿼리 정의 대화 상자가 열립니다.

   첫 번째 드롭 다운 목록에서 미디어를 선택하고 두 번째 드롭 다운 목록에서 화면을 선택하십시오.

4. 커서를 각 드롭 다운 목록의 오른쪽으로 이동하여 더하기 기호를 표시 한 다음 더하기 기호를 클릭하여 새 필드를 추가하십시오.

   

5. 미디어 쿼리 대화 상자에 방향을 지정할 수있는 새 필드가 나타납니다. 이 필드는 선택 사항이지만 일반적으로 태블릿 또는 스마트 폰에서 가로 및 세로보기에 대해 다른 디자인을 만들려는 경우에 사용됩니다. 방향에 따라 추가 레이아웃을 생성하지 않으려면 마이너스 기호를 클릭하여이 필드를 제거 할 수 있습니다.

   참고:

   더하기 및 빼기 기호는 대화 상자의 오른쪽으로 커서를 굴릴 때만 표시됩니다. 커서를 드롭 다운 목록 오른쪽으로 이동하고 더하기 기호를 두 번 클릭하여 필드를 추가 한 다음 최소 너비 조건을 입력하십시오.

6. 미디어 쿼리 대화 상자에 최소 너비 필드가 표시되므로 쿼리를 대상으로 지정할 최소 너비를 지정할 수 있습니다. 미디어 쿼리가 지정한 최소 또는 최대 너비 범위를 기반으로 스타일을 대상으로하기 때문에 최소 너비가 중요합니다. 다음 단계에서 다룹니다.

   커서를 드롭 다운 목록의 오른쪽으로 이동하고 세 번째로 더하기 기호를 클릭하여 필드를 추가 한 다음 최대 너비 조건을 입력하십시오.

7. 대화 상자에 최대 너비 필드가 표시되므로 쿼리를 대상으로 지정할 최대 너비를 지정할 수 있습니다.

   확인을 클릭하십시오.

8. 미디어 쿼리 대화 상자가 닫히고 미디어 쿼리가 생성되어 CSS Designer 패널의 소스 패널에서 선택한 스타일 시트에 추가됩니다.

   선택한 스타일 시트에 추가 미디어 쿼리를 추가하려면 3-8 단계를 반복하십시오. 다른 스타일 시트에 미디어 쿼리를 추가하려면 2-8 단계를 반복하십시오.

9. 미디어 쿼리를 원하는만큼 많은 다른 스타일 시트에 저장할 수 있지만, 모든 스타일 시트를 별도로 서버에서 다운로드해야하므로 더 많은 대역폭이 필요하므로 하나의 외부 스타일 시트에 모두 저장하는 것이 더 효율적입니다. 여러 미디어 쿼리를 사용하여 하나의 긴 스타일 시트를 다운로드하는 것은 여러 스타일 시트를 다운로드하는 것보다 약간 효율적입니다.