====== CSS Responsive Web Design - Media Queries ====== * description : CSS Responsive Web Design - Media Queries * author : 오션 * email : shlim@repia.com * lastupdate : 2021-07-06 Tue \\ =====The source of this article===== [[https://www.w3schools.com/css/css_rwd_mediaqueries.asp|CSS Responsive Web Design - Media Queries]]\\ ====== What is a Media Query? ====== 미디어 쿼리(Media Query)는 %%CSS3%%에 도입된 %%CSS%% 테크닉입니다.\\ \\ 특정 조건이 참인 경우에만 %%CSS%% 속성 블록을 포함하는 ''%%@media%%'' 규칙을 사용합니다.\\ \\ ==== Example ==== 브라우저 창이 600px 이하인 경우 배경색(background color)은 lightblue가 됩니다.\\

Resize the browser window. When the width ofthis document is 600 pixels or less, the background-color is "lightblue", otherswise it is "lightgreen".

===== Add a Breakpoint ===== 이 튜토리얼의 앞부분에서 row(행)과 column(열)이 있는 반응형 웹 페이지를 만들었지만, 작은 화면에서는 좋지 않았습니다.\\ \\ 미디어 쿼리가 도움이 될 수 있습니다. 디자인의 특정 부분이 중단점(breakpoint)의 각 측면에서 다르게 작동하는 중단점을 추가 할 수 있습니다.\\ {{:wiki:css:css_note:rwd_desktop.png|Desktop}} {{:wiki:css:css_note:rwd_phone.png|Phone}} \\ 미디어 쿼리를 사용하여 768px 지점에 중단점을 추가합니다.\\ ==== Example ==== 스크린(브라우저 창)이 768px보다 더 작아지면, 각각의 컬럼은 100%의 너비를 가지게 됩니다.\\ \\

Chania

  • The Flight
  • The City
  • The Island
  • The Food

The City

Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.

What?

Chania is a city on the island of Crete

Where?

Crete is a Greek island in the Mediterranean Sea.

How?

You can reach Chania airport from all over Europe.

Resize the browser window to see how the content respond to the resizing.

{{tag>오션, Responsive Web Design - Media Queries}}