[CODECADEMY] CSS MEDIA QUERIES (@media, 화면의 폭 과 넓이 지정, 반응형디자인, 미디어쿼리)

 

한눈에 정리하기!!!

 

	@media (max-width: 700px) { div{ display: none; } }	@media (min-width: 700px) { div{ display: none;} }
screen size	maximum 700 px	minimum 700 px
width > 700px	no changing x	div {display: none;}
width < 700px	div {display: none; }	no changing x
standard	Computer monitor (big screen)	phone (smaller screen)
	화면이 클때를 기준으로 CSS를 작성한 다음, 화면이 작아질 때, @media 값을 실행해라.	화면이 작을때를 기준으로 CSS를 작성한 다음,  화면이 커질 때, @media 값을 실행해라.
=	if the screen is less than 700 px, follow div {display: none; }	if the screen is greater than 700 px, follow div {display: none;}

 

 

 

 

 

1. Media Queries

 

CSS는 미디어 쿼리 를 사용 하여 웹 사이트의 내용을 다양한 화면 크기에 맞 춥니다. 

미디어 쿼리를 사용하면 CSS는 현재 화면의 크기를 감지하고 화면 너비에 따라 다른 CSS 스타일을 적용 할 수 있습니다.

 

@media only screen and (max-width: 480px) {
  body {
    font-size: 12px;
  }
}

 

위의 예는 미디어 쿼리가 적용되는 방법을 보여줍니다. 

미디어 쿼리는 480 픽셀보다 작은 화면에 대한 규칙을 정의합니다 

이 예제를 부분으로 나누겠습니다.

 

1. @media —

이 키워드는 미디어 쿼리 규칙을 시작하고

나머지 규칙을 구문 분석하는 방법에 대해 CSS 컴파일러에 지시합니다.

2. only screen—

이 규칙을 사용해야하는 장치 유형을 나타냅니다.

CSS는 다른 장치를 대상으로 한 초기의 시도에서 다양한 미디어 유형 (screen, print, handheld)을 통합했습니다.

근거는 미디어 유형을 알면 적절한 CSS 규칙을 적용 할 수 있다는 것입니다.

그러나 "핸드 헬드"및 "스크린"장치는 훨씬 더 넓은 범위의 크기를 차지하기 시작했으며

미디어 장치 당 하나의 CSS 규칙만으로는 충분하지 않습니다.

screen 장치 유형에 관계없이 항상 콘텐츠를 표시하는 데 사용되는 미디어 유형입니다.

only 키워드는 이 규칙은 하나의 미디어 유형에 적용을 나타 내기 위해 추가됩니다 (screen).

3. and (max-width : 480px) —

이 규칙 부분을 미디어 기능 이라고 하며

너비가 480 픽셀 이하인 장치에 CSS 스타일을 적용하도록 CSS 컴파일러에 지시합니다.

미디어 기능은 미디어 쿼리 내에서 CSS를 렌더링하기 위해 충족해야하는 조건입니다.

4.. CSS 규칙은 미디어 쿼리의 중괄호 안에 중첩됩니다.

미디어 쿼리가 충족되면 규칙이 적용됩니다.

위의 예에서, 사용자 화면 미만 480 픽셀 인 경우 body요소의 텍스트가 font-size가 12px 로 설정된다.

 

 

---

 

2. 범위 (range)

 

여러 너비 및 높이 미디어 기능을 설정하여 특정 화면 크기를 대상으로 할 수 있습니다. 

min-width및 min-height각각의 최소 폭과 최소의 높이를 설정하기 위해 사용된다. 

반대로, max-width및 max-height각각의 최대 폭 및 최대 높이를 설정.

여러 너비와 높이를 사용하여 미디어 쿼리에 범위를 설정할 수 있습니다.

 

@media only screen and (min-width: 320px) and (max-width: 480px) {
    /* ruleset for 320px - 480px */
}

 

위의 예는 화면 크기가 320 픽셀에서 480 픽셀 사이 인 경우에만 CSS 규칙을 적용합니다. 

미디어 기능 and다음에 두 번째 키워드 가 사용 min-width됩니다. 

이를 통해 두 가지 요구 사항을 서로 연결할 수 있습니다.

 

@media only screen and (min-width: 320px) { 
    /* ruleset for >= 320px */
}


@media only screen and (min-width: 480px) { 
    /* ruleset for >= 480px */
}

위의 예제는 두 가지 별도의 규칙을 사용하여 작성할 수도 있습니다.

위 예제의 첫 번째 미디어 쿼리는 화면 크기가 320 픽셀을 초과하거나 초과 할 때 CSS 규칙을 적용합니다. 

그런 다음 두 번째 미디어 쿼리는 화면 크기가 480 픽셀을  초과 할 때 CSS 규칙을 적용합니다.

즉, 첫 번째 미디어 쿼리에 존재하는 CSS 규칙을 재정의하거나

첫 번째 미디어에 아직 존재하지 않는 추가 CSS 규칙을 적용 할 수 있습니다.

 

위의 두 예제는 모두 유효하며 다른 개발자의 코드를 읽을 때 두 패턴이 모두 사용 된 것 같습니다.

 

 

---

 

 

 3. 해상도 (DPI)

 

우리가 목표로 할 수있는 또 다른 미디어 기능은 화면 해상도입니다. 

우리는 종종 고해상도 미디어를 지원할 수있는 화면이있는 사용자에게만

고품질 미디어 (이미지, 비디오 등)를 제공하고자합니다. 

또한 대상 화면 해상도는 화면에 제대로 표시되지 않을 수있는

고해상도 (큰 파일 크기) 이미지 다운로드를 피하는 데 도움이됩니다.

 

해상도를 기준으로 타겟팅하기 위해 min-resolution및 max-resolution미디어 기능을 사용할 수 있습니다 . 

이러한 미디어 기능은 dpi (인치당 도트 수) 또는 센티미터 당 도트 수 (dpc)의 해상도 값을 허용합니다. 

해상도 측정에 대한 자세한 내용은 여기를 참조하십시오 .

 

@media only screen and (min-resolution: 300dpi) {
    /* CSS for high resolution screens */
}

 

위 예의 미디어 쿼리는 화면 해상도가 인치당 300 도트 이상인지 확인하여 고해상도 화면을 대상으로합니다. 

화면 해상도 쿼리가 충족되면 CSS를 사용하여 고해상도 이미지 및 기타 미디어를 표시 할 수 있습니다.

 

---

4. And Operator

 

 

이전 연습에서는 and연산자 를 사용하여 동일한 유형의 여러 미디어 기능을 하나의 미디어 쿼리에 연결했습니다 . 

그것은 우리가 min-width와 max-width 사용하여 범위를 만들 수 있는 미디어 쿼리.

@media only screen and (max-width: 480px) and (min-resolution: 300dpi) {
    /* CSS ruleset */
}

두 미디어 기능 사이에  and 연산자를 배치하면 브라우저는 미디어 쿼리 내에서

CSS를 렌더링하기 전에 두 미디어 기능이 모두 참이어야합니다.

and연산자는 필요한 만큼 많은 매채를 연결할 수 있다. 

 

 

 

---

 

5. 쉼표로 구분 된 목록 (Comma Separated List)

미디어 쿼리에서 여러 미디어 기능 중 하나만 충족해야하는 경우

 미디어 기능을 쉼표로 구분 된 목록으로 분리 할 수 ​​있습니다.

예를 들어, 아래 중 하나만 참일 때 스타일을 적용해야하는 경우 :

화면 너비가 480 픽셀 이상입니다.
화면이 가로 모드입니다

@media only screen and (min-width: 480px), (orientation: landscape) {
    /* CSS ruleset */
}

  
    
위의 예에서 쉼표 ( ,)를 사용하여 여러 규칙을 구분했습니다. 

위의 예에서는 CSS를 적용하기 위해 미디어 기능 중 하나만 적용하면됩니다.

두 번째 미디어 기능은 orientation입니다. 

orientation페이지가 높이보다 더 폭이있는 경우 미디어 감지 기능이 있습니다. 

페이지가 더 넓으면 landscape으로 간주되고 페이지가 더 크면으로 portrait간주됩니다.

 

---

 

6. Breakpoints

 

미디어 쿼리를 사용하여 화면 크기와 해상도에 따라 CSS 규칙을 적용하는 방법을 알고 있지만

설정할 쿼리를 어떻게 결정합니까?

 

미디어 쿼리가 설정되는 지점을 Breakpoints 이라고 합니다 .  

Breakpoints 은 웹 페이지가 제대로 표시되지 않는 화면 크기입니다. 

예를 들어 가로 방향 인 태블릿을 대상으로하려면 다음  Breakpoints 을 만들 수 있습니다.

 

@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    /* CSS ruleset */
}

 

위의 예는 가로 모드에서 태블릿 크기의 화면 크기 범위를 만들고 방향을 식별합니다.

그러나 모양과 크기가 다른 장치가 많기 때문에

상상할 수있는 모든 장치에 Breakpoints 을 설정하는 것은 매우 어렵습니다. 

또한 새로운 장치는 매년 새로운 화면 크기로 출시됩니다.

 

가장 좋은 방법은 특정 장치를 기반으로 중단 점을 설정하는 대신

웹 사이트의 내용에 따라 자연스럽게 중단되는 위치를 볼 수 있도록 브라우저 크기를 조정하는 것입니다. 

 

레이아웃이 깨지거나 이상하게 보이는 차원이 미디어 쿼리 중단 점이됩니다. 

이러한 중단 점 내에서 CSS를 조정하여 페이지 크기를 조정하고 재구성 할 수 있습니다.

웹 사이트가 자연스럽게 중단되는 크기를 관찰하면

모든 프로젝트를 특정 화면 크기에 맞추지 않고

프로젝트별로 프로젝트에서 최상의 사용자 경험을 제공하는 미디어 쿼리 중단 점을 설정할 수 있습니다. 

프로젝트마다 요구 사항이 다르므로 반응 형 디자인을 만드는 것도 다르지 않습니다.