안녕하세요.
이 튜토리얼에서는 미디어 쿼리에 대해 살펴보겠습니다.
미디어 쿼리는 CSS의 섹션으로 웹 사이트의 레이아웃과 스타일을 모바일, 태블릿 및 데스크탑과 같은 다양한 디바이스는 물론이고 다양한 다른 출력 방식에 맞게 결정합니다.
예를 들어 사이트를 인쇄할 때 레이아웃이 달라지는 개념인 거죠.
이번 버전의 Dreamweaver CC는 미디어 쿼리를 아주 간편하게 추가하고 업데이트하는 기능을 제공합니다.
그러면 본격적으로 살펴보죠.
현재 작업 영역은 표준 모드에서 라이브 뷰로 작업하고 있습니다.
미디어 쿼리라는 이 옵션을 여러분들께 보여드리기 위해서죠.
여기 이것은 CSS 코드에 있는 미디어 쿼리를 시각적으로 표시하는 것입니다.
여기를 클릭하면 각 미디어 쿼리에 해당되는 크기에 따라 사이트가 변경되고 다양한 크기의 뷰에서 표시되는 사이트를 확인할 수 있죠.
미디어 쿼리 막대가 표시되지 않는 경우 왼쪽에 있는 이 옵션을 누르면 됩니다.
미디어 쿼리 때문에 작업 영역이 복잡해지는 것이 싫다면 오른쪽에 있는 이 회색 영역을 두 번 클릭하면 됩니다.
현재 Dreamweaver CC의 라이브 뷰에서 미리 보기를 통해 보고 있는데 이 방법도 좋습니다.
그렇지만 브라우저에서 작업하려면 실시간 브라우저 미리 보기를 사용할 수 있습니다.
여기 오른쪽 하단에 있는 이 아이콘을 클릭하면 브라우저나 모든 디바이스에서 반응형 미디어 쿼리를 실시간으로 미리 볼 수 있습니다.
실시간으로 확인하면서 상호 작용할 수 있는 거죠.
실시간 브라우저 미리 보기 설정에 대한 튜토리얼은 별도로 마련되어 있으므로 확인하시기 바랍니다.
이제 미디어 쿼리를 생성하는 데 사용하는 코드를 살펴겠습니다.
먼저 분할 뷰로 화면을 전환한 다음 styles.css로 이동합니다.
사이트의 아래쪽으로 내려가서 보면 여기 보이는 것이 미디어 쿼리입니다.
항상 @media로 시작되죠.
여기에는 화면 폭이 각기 다른 세 개의 뷰가 있습니다.
미디어 쿼리가 적용된 경우 브라우저에서 웹 사이트가 열리면 웹 사이트가 표시되는 브라우저의 폭을 식별합니다.
예를 들어 웹 사이트를 태블릿에서 열면 이 미디어 쿼리에 포함되어 있는 모든 CSS를 호출합니다.
이 화살표를 클릭하여 하위 항목을 열면 보이는 이 코드가 호출되고 그에 따라 태블릿 디바이스에 표시됩니다.
데스크탑이나 대형 디스플레이를 위한 대형 미디어 쿼리 경우도 마찬가지입니다.
이번에는 CSS 디자이너 패널을 열겠습니다.
윈도우 메뉴에서 CSS 디자이너를 선택합니다.
여기에 있는 이 소스 창에는 연결된 스타일 시트 및 웹 페이지와 연관된 모든 내부 스타일 시트가 표시됩니다.
이 경우 styles.css만 있는데 클릭해 보겠습니다.
그리고 @미디어 창에서 미디어 쿼리 중 하나를 클릭합니다.
그러면 하단에 있는 선택기는 선택된 미디어 쿼리에 따라 바뀝니다.
선택기 섹션은 선택된 미디어 쿼리 내에서 정의된 모든 선택기를 표시합니다.
이것은 사이트에서 정의된 모든 미디어 쿼리이고 이것은 페이지의 전체 스타일입니다.
전체 스타일은 전체 사이트의 기반이 됩니다.
여기에 있는 세 개의 미디어 쿼리가 다른 크기의 뷰로 바뀌면 전체 스타일 시트를 덮어씁니다.
이 경우 전체는 모바일 디바이스가 되겠습니다.
이 사이트는 모바일을 우선으로 디자인했기 때문입니다.
모바일 퍼스트 접근 방식이란 이 사이트처럼 모바일 디바이스나 최소 폭이 768픽셀 미만이 되는 브라우저를 위한 스타일과 레이아웃을 먼저 만드는 방식을 의미합니다.
사이트 폭이 768픽셀을 초과하면 선택기가 활성화되면서 태블릿 또는 데스크탑 크기에 맞게 화면이 조정됩니다.
좋습니다.
그러면 미디어 쿼리를 바꿔 보겠습니다.
먼저 styles.css를 선택합니다.
그런 다음 여기에 있는 제목을 조정하려고 합니다.
이 제목은 hero-title이라고 하는 선택기를 사용합니다.
그런데 992px 크기의 미디어 쿼리만 조정하려고 합니다.
일반 데스크탑에 해당하죠.
이 미디어 쿼리에 맞도록 크기를 조정해 보겠습니다.
먼저 여기 이 미디어 쿼리를 클릭하고 하단에 있는 .hero-title을 클릭합니다.
그러면 styles.css 코드에서 해당 코드 줄로 이동합니다.
취향에 따라 코드 뷰에서 편집할 수도 있습니다.
CSS 디자이너 패널을 보면 코드 줄에 해당하는 영역으로 이동하여 모든 속성이 이 선택기에 목록으로 표시됩니다.
이 경우 이것은 제가 변경하려는 font-size입니다.
클릭하고 잠시 누른 상태에서 드래그합니다.
글꼴 크기를 크게 만들었는데 튜토리얼 용도로는 잘 보일 것입니다.
이 모든 미디어 쿼리를 한눈에 확인할 수 있도록 패널을 더 깔끔하게 정리해 보겠습니다.
큰 글꼴 크기에서도 여전히 비율에 맞게 표시됩니다.
태블릿에서도 좋아 보입니다.
더 작은 크기는 어떨까요?
모바일 크기로 드래그해봐도 제대로 표시됩니다.
하지만 현재 작업 중인 미디어 쿼리의 크기가 992px이므로 글꼴이 크게 보입니다.
CSS 디자이너 패널 없이 작업할 수 있는 다른 방법은 조정하려는 요소를 간단히 클릭하는 것입니다.
현재 작업 중인 .hero-title을 마우스 오른쪽 버튼으로 클릭하고 코드로 이동을 선택합니다.
그러면 전체 스타일 시트에서처럼 .hero-title이 표시됩니다.
맨 위에 있는 거죠.
두 번째는 미디어 쿼리에 있는 768px입니다.
다음은 방금 작업한 992px이고 마지막으로 대형 미디어 쿼리가 있죠.
여기에서 원하는 크기를 선택합니다.
저는 이것을 클릭하겠습니다.
그러면 이것을 제어하는 코드 줄로 이동하는데 이 코드는 하단에 있습니다.
아래로 내려와 수동으로 조정합니다.
8.4vw 정도로 조정해 보죠.
이 경우 현재 이 페이지에는 미디어 쿼리가 없으므로 CSS 디자이너 패널을 통해 미디어 쿼리를 추가해 보겠습니다.
먼저 스타일을 적용하려는 CSS 시트가 있는지 확인합니다.
이 경우 styles.css가 되겠습니다.
@미디어 아래에 있는 더하기(+) 버튼을 클릭합니다.
조건의 드롭다운 메뉴마다 추가 설정이 있는데 여기 media에는 디자인 출력을 표시하는 옵션이 있습니다.
예를 들어 screen으로 화면 출력, print로 인쇄 형식을 선택할 수 있습니다.
또한 조건을 구현하는 코드가 생성됩니다.
이 orientation(방향) 쿼리는 해당 디바이스가 landscape(가로) 또는 portrait(세로)일 때 표시되는 것을 결정하죠. resolution(해상도) 설정도 있는데 고해상도 디스플레이의 경우 144dpi가 적당합니다.
마찬가지로 아래에 해당 코드가 생성됩니다.
이제 반응형 디자인을 위한 미디어 쿼리를 추가하겠습니다. min-width(최소 폭)을 선택한 다음 768px로 설정해 보겠습니다.
현재 단위는 px(픽셀)로 정의되어 있지만 픽셀 외에도 다양한 단위 옵션이 있습니다.
또한 이 더하기 기호로 여러 개의 조건을 추가할 수도 있습니다.
예를 들어 max-width(최대 폭)을 991px로 설정할 수 있습니다.
아래에 and 구문이 생겼는데 기능이 제대로 작동하려면 이 두 숫자가 유효해야 함을 의미합니다.
이 경우에는 사용하지 않을 것이므로 빼기 아이콘을 클릭하여 삭제합니다.
확인을 클릭합니다.
그러면 미디어 쿼리가 여기에 있는 CSS 디자이너 패널에 표시됩니다.
또한 상단의 미디어 쿼리 막대에도 표시됩니다.
앞서 최소 폭을 정의했기 때문에 이 유용한 화살표를 통해 이 미디어 쿼리가 이 최소 폭부터 오른쪽에 있는 다음 크기의 미디어 쿼리의 최소 폭 미만까지 호출된다는 것을 알 수 있습니다.
또한 쉽게 식별하도록 보라색으로 표시되는데 최소 폭은 항상 보라색으로 표시됩니다.
다른 프로젝트를 잠시 살펴보면 max-width를 선택한 경우 이처럼 녹색으로 표시되죠.
여기 최소 및 최대 폭은 파란색으로 표시되므로 손쉽게 식별할 수 있습니다.
그러면 다시 프로젝트로 돌아가 여기 아래에 있는 styles.css 아래로 스크롤하면 세 번째 미디어 쿼리가 표시됩니다.
코드 하단에 있는 미디어 쿼리가 보이시죠.
이제 이 미디어 쿼리에 코드를 추가해 보겠습니다.
중괄호 사이에 있는 공간에 Return 키를 몇 번 누릅니다.
그런 다음 앞서 만들어놓은 코드를 붙여넣겠습니다.
이 선택기, 즉 클래스 선택기는 위쪽에 있는 이 EXHIBITION 서체에 영향을 주고 글꼴과 간격을 변경합니다.
여기 상단을 보면 제 미디어 쿼리가 있습니다.
CSS 디자이너 패널에서 방금 만든 미디어 쿼리입니다.
이 사이드바를 드래그하면 이 사이트는 모바일 퍼스트 접근 방식으로 디자인했기 때문에 이렇게 표시됩니다.
그러나 제 미디어 쿼리로 변경되면 .hero-leadin 스타일을 덮어써서 이렇게 변합니다.
모바일보다는 큰 태블릿 크기에 적합하게 바뀝니다.
미디어 쿼리는 이렇게 작동됩니다.
지금까지 CSS 디자이너 패널을 사용해 미디어 쿼리를 만들어 봤는데 이번에는 이 패널을 닫거나 최소화한 다음 미디어 쿼리 막대를 이용해 미디어 쿼리를 만들어 보겠습니다.
어떤 방법을 선택하건 상관없습니다.
지금 알려드릴 방법은 보다 시각적인 방식이죠.
이 막대가 어디에 있건 상관없습니다.
여기 더하기 버튼이 있는데 이 버튼을 클릭하면 이미 max-width가 선택되어 있습니다.
사이드 막대가 있던 위치가 반영된 거죠.
이번에도 최소 폭을 설정할 텐데 992px을 입력한 다음 새 css 파일 생성을 클릭하고 이미 만들어둔 styles.css를 선택한 다음 확인을 클릭합니다.
이 방식을 사용해도 되고 CSS 디자이너 패널을 사용해도 됩니다.
결과는 동일합니다.
여기 코드 아래쪽을 보면 min-width가 설정되어 있죠.
이제 미리 만든 선택기를 추가해 보겠습니다.
CSS 디자이너 패널을 이용해도 상관없습니다.
이 경우 바로 붙여넣어 보겠습니다.
그러면 동일한 클래스인 .hero-leadin이 추가되었고 이제 최소 992px 이상이 될 때만 호출됩니다.
여기 상단을 보면 모바일 버전이 있고 다음 미디어 쿼리로 전환하면 이렇게 바뀌고 마지막으로 992px에서 다시 바뀝니다.
여기를 클릭하면 다른 미디어 쿼리로 쉽게 이동할 수 있습니다.
이로써 미디어 쿼리 튜토리얼을 마치겠습니다.
이 튜토리얼에 사용된 코드를 다운로드하려면 이 페이지에서 제공되는 링크를 이용하십시오.
지금까지 화면 상단의 라이브 뷰, 하단의 코드 뷰와 CSS 디자이너 패널을 사용하여 반응형 웹 사이트를 위한 미디어 쿼리를 간편하게 만드는 방법을 살펴봤습니다.
시청해 주셔서 감사드리며 다양한 Dreamweaver CC 튜토리얼이 마련되어 있으므로 확인하시기 바랍니다.
