CSS:미디어 쿼리

이 블로그는 응답식 웹 디자인이 무엇인지, 그리고 CSS에서 미디어 조회를 어떻게 사용하는지 간소화했다.
블로그 밑에 공간을 주제로 한 코드펜이 있는데 미디어 조회의 기본 지식을 소개했다.

세련된 디자인과 매끄러운 레이아웃

무엇이 호응성 디자인입니까?
그것은 내용을 보기 위한 장치의 레이아웃에 응답할 수 있는 웹 디자인 방법이다.
용어'Responsive Design'은 이산 마커트가 2010년에 명명한 것으로 세 가지 기술을 묘사하는 데 쓰인다.

부드러운 격자

유연한 이미지

미디어 쿼리

부드러운 메쉬
Flexbox나 Grid 이전에 웹 페이지에 흐르거나 고정된 레이아웃을 만들 수 있습니다.그러나 이 두 가지 레이아웃은 모두 문제가 있다. 왜냐하면 웹 디자이너의 화면 크기가 모두 정확하기 때문이다.
액체 레이아웃은 브라우저를 가득 채우기 위해 늘어나지만, 수축될 때, 디자인은 압축되어, 매우 길거나 가느다란 텍스트 줄이 있어서 읽기가 어렵다.
고정 레이아웃은 사이트 너비보다 작은 장치 화면에 수평 스크롤 막대를 제공합니다.

유연한 이미지
이미지의 유연성을 위해 max-width을 100%으로 설정하면 컨테이너의 100%를 차지하지만 결코 커지지 않습니다.브라우저가 용기의 길이에 따라 큰 시간을 조정하면 크기를 조정합니다.

미디어 쿼리
미디어 쿼리를 사용하면 화면 크기에 따라 CSS의 레이아웃을 변경할 수 있습니다.레이아웃을 변경할 때 사용자 화면의 정확한 크기로 조정할 수 있도록 조건을 설정할 수 있습니다.
응답 설계를 수행하기 전에 JavaScript를 사용하여 올바른 CSS를 로드할 수 있습니다.

떠다니다
개발자들은 모든 장치의 화면 크기를 수동으로 조정할 필요가 없도록 레이아웃을 만드는 방법을 필요로 한다.
부드러운 격자를 사용했기 때문에 수동으로 조정할 필요가 없다.메쉬가 자동으로 조정됩니다.유연한 격자를 사용할 때 내용이 좋지 않아 보이기 전에 단점을 설정할 필요가 없다.
Float는 부동 요소마다 백분율 너비를 지정하여 유연한 메쉬를 만들 수 있습니다.부동 요소의 전체 백분율은 100%를 초과하지 않도록 설정됩니다.
이단 마커트(Ethan Marcotte)는 원소의 폭을 픽셀로 나누어 정확하게 계산할 수 있는 공식을 사용했다.
만약 용기가 width의 500px으로 설정된다면, 우리는 내부 열 요소가 용기의 폭을 초과하지 않도록 하는 방법이 필요하다.공식은 내열 픽셀을 부열 픽셀로 나누는 것이다.
만약 우리가 100px의 열 원소를 가지고 있다면.100px / 500px = 0.2입니다. 그래서 우리는 소수점을 오른쪽의 위치로 이동하여 이 열의 width을 20%으로 설정합니다.

Flexbox 및 Grid
CSS Flexbox 및 Grid는 기본적으로 응답합니다.
Flexbox의 기본 동작은 용기 flex-items의 크기에 따라 flex-container 사이의 공간을 축소하고 분배하는 것입니다.
CSS 그리드는 fr이라는 새로운 유닛을 구현했습니다.이 단원은 격자 궤도 사이에 사용 가능한 공간을 분배할 것이다.fr은 사용 가능한 용기 중 공간의 일부분이다.

뷰포트 meta 태그
응답 HTML 페이지는 일반적으로 문서 헤더에 meta 태그를 둡니다.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

meta 태그는 메타데이터를 나타냅니다.메타데이터란?메타데이터는 "기타 데이터 정보를 설명하고 제공하는 데이터 그룹"이다.
메타데이터는 항상 HTML 문서의 머리 부분에 있습니다.문자 세트, 페이지 설명, 키워드, 문서 작성자 및 뷰포트 설정을 정의하는 데 사용할 수 있습니다.meta 태그의 정보는 사용자에게 표시되지 않습니다.
위의 예에서 속성 name은 뷰포트를 정의하는 데 사용됩니다.viewport은 사용자 장치 화면에 표시되는 영역입니다.content 속성은viewport와 결합하여 사용하면 개발자가 뷰포트를 제어하고 웹 페이지의 사이즈와 축소 비율을 설정할 수 있다.content="width=device-width, initial-scale=1.0"콘텐츠 속성의 첫 번째 부분은 웹 페이지의 넓이를 사용자 장치의 화면 넓이로 설정하는 것입니다.브라우저가 페이지를 로드할 때 initial-scale=1.0에서 페이지의 초기 배율 수준을 설정합니다.

미디어 쿼리 사용
미디어 쿼리에는 선택할 수 있는 미디어 유형과 임의의 미디어 기능 표현식이 사용됩니다.논리 연산자를 사용하여 여러 개의 조회를 조합할 수 있다.
미디어 유형(미디어 유형이 지정된 경우)이 문서를 보는 장치와 일치하고 모든 미디어 기능 표현식이 true로 계산되면 미디어 쿼리는 true으로 계산됩니다.미디어 쿼리는 대소문자를 구분하지 않습니다.알 수 없는 미디어 유형을 가진 검색의 계산 결과는 시종 false이다.
Media Types :

all

print

screen

speech

screen 미디어 유형을 사용하겠습니다.미디어 유형을 정의하지 않으면 기본적으로 미디어 쿼리는 all이 됩니다.

구문

@media screen and (max-width: 320px) {
   div {
      width: 250px;
  }
}

의 첫 번째는 @media으로 조회를 시작합니다.

미디어 유형을 screen으로 설정합니다.저는 logical operators and 중의 하나를 사용했습니다. 이것은 미디어 유형과 브라우저의 조건을 결합시킬 것입니다.

max-width 미디어 기능은 화면 크기가 320px보다 작으면 레이아웃을 다음 코드 블록에서 사용할 레이아웃으로 변경합니다.

"코드 펜에서 편집"을 누르면 계속됩니다.
이 블로그는 미디어 조회의 기본 지식을 소개했다.읽어주셔서 감사합니다!

리소스

MDN Responsive Design

Newer HTML/CSS Features For Responsive Design

MDN Media Queries

W3Schools Media Queries

CSS-Tricks Media Queries

Media Queries For Standard Devices