Responsive Design - II

자료의 출처는 codecademy(https://www.codecademy.com/) 'front-end engineer' course이며, 학습 후 정리한 내용입니다.

⚡️ 올바르지 않은 내용이 있을 경우 댓글로 남겨주시면 감사하겠습니다. ⚡️

---

MEDIA QUERIES

Responsive Web Design

화면 크기는 장치마다 크게 다를 수 있으므로 웹 사이트에서 모든 크기의 화면에 가장 잘 맞게 콘텐츠를 크기 조정 및 재구성하는 것이 중요하다.

 

웹 사이트가 자신이 보는 화면의 크기에 반응할 때 이를 Responsive website라고 한다.

 

웹 사이트는 수천 개의 다양한 화면 크기로 표시될 수 있기 때문에 화면 크기 변화에 대응할 수 있어야 하고 사용자가 액세스할 수 있도록 콘텐츠를 조정할 수 있어야 한다.

Media Queries

CSS는 media queries(미디어 쿼리)를 사용하여 웹 사이트의 콘텐츠를 다른 화면 크기에 맞게 조정한다.

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

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

미디어 쿼리가 적용되는 방법을 보여주는 예제

미디어 쿼리는 480픽셀보다 작은 화면(대부분의 스마트폰 너비)에 대한 규칙을 정의한다.

이 예제를 몇 가지 부분으로 나누어 보자.

1. @media: 이 키워드는 미디어 쿼리 규칙을 시작하고 CSS compiler에게 규칙의 나머지 부분을 분석하는 방법을 지시한다.
2. only screen: 이 규칙을 사용해야 하는 장치 유형을 나타낸다.  
   screen: 장치의 유형에 관계없이 항상 콘텐츠를 표시하는 데 사용되는 미디어 유형
   only 키워드는 이 규칙이 하나의 미디어 유형(screen)에만 적용됨을 나타내기 위해 추가된다.
3. and (max-width :480px): 이 규칙의 일부를 media feature이라고 하며 CSS compiler가 480픽셀 이하의 장치에 CSS 스타일을 적용하도록 지시한다.
   media feature은 미디어 쿼리 내에서 CSS를 렌더링하기 위해 충족해야 하는 조건이다.
4. CSS 규칙은 미디어 쿼리의 {} 안에 내재되어 있다.
   미디어 쿼리가 충족되면 규칙이 적용된다.
   예제에서 body 요소의 텍스트는 사용자 화면이 480px보다 작을 때 12px의 font-size로 설정된다.

Range

특정 화면 크기는 다중 너비 및 높이 media feature을 설정하여 지정한다.

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 규칙을 적용

min-width media feature 다음에 두 번째 and 키워드가 사용되고, 이를 통해 두 가지 요구사항을 서로 연결할 수 있다.

 

다음 예제는 다음과 같은 두 가지 별도의 규칙을 사용하여 작성

@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 규칙을 적용할 수 있다.

 

Dots Per Inch (DPI)

화면 해상도(screen resolution) 통제

고해상도 미디어를 지원할 수 있는 화면이 있는 사용자에게만 고품질 미디어(이미지, 비디오 등)를 공급하고자 하는 경우가 많다.

또한 화면 해상도를 타겟팅하면 화면이 제대로 표시되지 않을 수 있는 고해상도(대형 파일 크기) 이미지를 다운로드하지 않아도 된다.

 

해상도를 기준으로 대상을 지정하기 위해 min-resolution 및 max-resolution media feature을 사용

두 media feature은 인치당 도트 수(dots per inch, dpi) 또는 센티미터당 도트 수(dots per centimeter, dpc)의 해상도 값을 허용

 

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

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

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

And Operator

and operator(연산자)를 사용하여 하나의 미디어 쿼리에 동일한 유형의 여러 미디어 기능을 연결

 

여러 media feature을 충족하기 위해 and operator가 사용된다.

 

max-width가 480px, min-resolution 300dpi를 충족하기 위해 and 연산자를 사용한다.

Ex)

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

and 연산자를 두 media feature 사이에 배치함으로써 브라우저는 미디어 쿼리 내에서 CSS를 렌더링하기 전에 두 미디어 기능이 모두 참이어야 한다.

Comma Seperated List

미디어 쿼리의 여러 media feature 중 하나만 충족해야 하는 경우 쉼표(,)로 목록에서 media feature을 분리한다.

 

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

• 화면의 너비는 480픽셀 이상
• 화면이 가로 모드(landscape mode)

코드 작성 예시

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

예제에서 쉼표(,)를 사용하여 여러 규칙을 구분한 뒤, CSS를 적용하려면 미디어 기능 중 하나만 참이어야 한다.

 

두 번째 media feature은 orientation이다. 

orientation media feature은 페이지의 너비가 높이보다 큰지 여부를 감지한다.

페이지가 더 넓으면 landscape로, 더 크면 portrait이다.

Breakpoints

미디어 쿼리가 설정된 지점을 breakpoint이라고 한다.

breakpoint는 웹 페이지가 제대로 표시되지 않는 화면 크기이다.

 

예를 들어 가로 방향의 태블릿을 대상으로 하려면 다음과 같은 breakpoint를 생성할 수 있다.

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

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

 

모든 장치의 breakpoint를 설정하는 것은 모양과 크기가 서로 다른 많은 장치가 있기 때문에 매우 어렵다.

특정 장치에 따라 breakpoint을 설정하는 대신, 웹 사이트가 콘텐츠에 따라 자연스럽게 중단되는 위치를 볼 수 있도록 브라우저 크기를 조정하는 것이 가장 좋다.

레이아웃이 깨지거나 이상하게 보이는 치수는 미디어 쿼리 breakpoint가 된다.

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

 

웹 사이트가 자연스럽게 깨지는 크기를 관찰하면 모든 프로젝트를 특정 화면 크기에 맞게 강제하지 않고 프로젝트별로 최상의 사용자 환경을 만드는 미디어 쿼리 breakpoint를 설정할 수 있다.

프로젝트마다 요구 사항이 다르며, 반응성이 뛰어난 디자인을 생성하는 것도 다르지 않아야 한다.

 

장치 너비별 breakpoint 목록을 확인하고, 화면 너비의 참조를 사용하여 웹 사이트를 테스트하여 다양한 장치에서 보기 좋은지 확인해보라.

 

---

참고

• https://www.codecademy.com/learn/paths/front-end-engineer-career-path/tracks/fecp-making-a-website-responsive/modules/fecp-learn-responsive-design/cheatsheet

Making a Website Responsive: Learn Responsive Design Cheatsheet | Codecademy

• https://content.codecademy.com/courses/freelance-1/unit-5/screen-sizes.png

• https://developer.chrome.com/docs/devtools/device-mode/

Simulate mobile devices with Device Mode - Chrome Developers

• https://www.taniarascia.com/you-dont-need-a-framework/

Understanding the Fundamentals of Responsive Design