[CSS] 반응형 웹사이트 기초

반응형 웹 사이트란?

정의

• 다양한 기기와 화면 크기에 자동으로 대응하여 최적의 사용자 경험을 제공하는 웹사이트를 뜻한다.
• 즉, 웹사이트의 레이아웃, 디자인, 콘텐츠 등이 사용자가 접속하는 기기의 화면크기에 맞게 조정되어 보여지는 것을 말한다.

사용해야 하는 이유

• 다양한 기기 지원: 사용자는 다양한 기기를 사용하여 웹사이트에 접속한다. 모바일 기기(스마트폰, 태블릿), 데스크톱 컴퓨터, 노트북 등 각기 다른 화면 크기와 해상도를 가지고 있다. 반응형 웹사이트를 사용하면 모든 기기에서 웹사이트가 잘 보이고 사용하기 편리하게 제공한다.
• 향상된 사용자 경험 : 반응형 웹사이트는 사용자에게 일관된 경험을 제공한다. 웹사이트가 모든 기기에 최적화 되어 있어 사용자는 어떤 기기를 사용하더라도 일관된 디자인과 레이아웃을 경험할 수 있다. 이는 사용자들의 만족도와 사용성을 향상 시킨다.
• 유지보수 용이성 : 반응형 웹사이트는 단일 코드베이스를 사용하므로 유지보수가 용이하다. 콘텐츠나 기능을 추가, 수정, 삭제할 대 모든 기기에 동일하게 적용되므로 개발 및 유지보수 비용을 줄일 수 있다.
• 사용자 기기 변화 대응 : 새로운 기기가 출시될 때마다 반응형 웹사이트는 기기에 대한 대응을 손쉽게 할 수 있다. 새로운 뷰포트 크기나 해상도에 대한 CSS미디어 쿼리를 추가하거나 콘텐츠의 배치를 조정하여 새로운 기기를 지원할 수 있다.

em과 rem

em

• em은 상대적인 폰트 크기를 지정하는 단위이다.
• em은 부모 요소의 폰트 크기에 상대적으로 설정된다. 만약 부모 요소의 폰트 크기가 16px이고 자식 요소에 2em을 적용한다면 자식 요소의 폰트 크기는 16px * 2인 32px이 된다.
• em은 중첩된 요소에서 상속되며 계층 구조에서의 상대적인 크기 조정을 편리하기 한다.
• 하지만 중첩된 요소에서 em이 계속해서 상속되면서 의도치 않을 크기 변화가 발생할 수 있다.

rem

• rem은 루트 요소(html 요소/ 가장 최상위)의 폰트 크기를 기준으로 항 상대적인 단위이다.
• rem은 em과 달리 부모 요소의 폰트 크기에 영향을 받지 않고 항상 루트요소의 폰트 크기에 상대적으로 설정된다. 기본적으로 루트 요소의 폰트 크기는 보통 16px이다.
• 예를 들어, 2rem을 사용하면 루트 요소의 폰트 크기의 두 배인 32px이 적용된다.
• rem은 반응형 웹 디자인에서 유용하게 사용될 수 있으며, 한 번의 조정으로 모든 요소의 크기를 일관되게 변경할 수 있다.

주의 할 점

• em으로 여백 크기(padding과 margin)을 정할 떄는 자기 자신의 글자 크기를 기준으로 한다.
• em과 rem은 브라우저에서 계산이 필요한 상대적인 단위이기 때문에 성능에 영향을 줄 수 있다. 특히 많은 요소에 대해 em과 rem을 사용하면 브라우저가 재계산하는 작업이 많아질 수 있다. 이러한 경우에는 성능 최적화를 위해 px 등 다른 단위를 고려할 수 있다.
• em과 rem을 사용할 때는 폰트 크기를 일관되게 유지하는 것이 중요하다. 여러 요소에 대해 동일한 상대적인 폰트 크기를 사용하는 것이 좋다. 그렇지 않으면 디자인 일관성이 훼손될 수 있다.

가변 단위

vw

• Viewport Width의 약어로, 웹 브라우저의 보이는 영역인 뷰포트의 너비를 기준으로 한 상대적인 단위이다.
• vw는 뷰포트의 너비를 100등분한 단위이므로, 1vw는 뷰표트의 너비의 1%를 의미한다.

vh

• Viewport Height의 약어로, 웹 브라우저의 보이는 영역인 뷰포트의 높이를 기준으로 한 상대적인 단위이다.
• vh는 뷰포트의 높이를 100등분한 단위이므로, 1vh는 뷰포트 높이의 1%를 의미한다.

vmin과 vmax

• Viewport Minimum의 약어로, 뷰포트의 너비와 높이 중 작은 값에 상대적으로 조정된다. 즉, 너비와 높이 중 작은 값의 비율에 따라 크기가 조정된다.
• Viewport Maximum의 약어로, 뷰포트의 너비와 높이 중 큰 값에 상대적으로 조정된다. 즉, 너비와 높이 중 큰 값의 비율에 따라 크기가 조정된다.
• 예를 들어 뷰포트의 너비가 800px이고 높이가 600px라고 가정한다면, 1vmin은 8px(800px의 1%)이고, 1vmax는 6px(600px의 1%)가 적용된다.

%

• %는 상대적인 크기를 나타내는 단위이다.
• 웹 요소의 부모 요소의 크기에 상대적으로 설정된다.
• 예를 들어, 부모 요소의 너비가 500px이고 자식 요소에게 너비를 50%로 설정하면, 자식 요소는 부모 요소의 너비의 50%인 250px의 크기를 가지게 된다.
• 따라서, % 단위는 화면 크기에 따라 동적으로 크기를 조정할 수 있어 반응형 웹사이트에서 유용하게 사용된다.
• 또한, 다양한 속성에 % 단위를 사용할 수 있으며, 너비, 높이, 마진, 패딩 등 다양한 요소의 크기를 조정하는데 사용된다.

미디어 쿼리

개요

• 미디어 쿼리는 CSS에서 사용되는 기술로, 웹 페이지나 애플리케이션의 미디어 유형과 장치에 따라 스타일을 다르게 적용할 수 있는 방법을 제공합니다.
• 미디어 쿼리를 사용하면 미디어 유형(화면, 프린터, 스크린리더 등)과 뷰포트 크기, 장치의 방향(가로/세로), 해상도 등과 관련하여 조건을 설정하고, 해당 조건에 따라 스타일을 적용할 수 있습니다.

사용법

• 미디어 쿼리는 `@media` 규칙으로 시작하며, 괄호 내에 조건을 기술한다.
• 조건은 미디어 유형, 뷰포트 크기, 장치의 방향, 해상도 등을 포함할 수 있으며, 이러한 조건은 논리 연산자(`and`, `not`, `only`)를 사용하여 조합할 수 있다.
• 조건을 만족하는 경우에 적용할 스타일을 중괄호 내에 기술한다.
• 미디어 쿼리는 CSS 파일 내부에 작성할 수도 있고, HTML 문서 내에 style 태그로 작성할 수도 있다.

미디어 타입

all

• 모든 미디어 유형에 적용되는 기본 타입이다. 모든 미디어 유형에서 스타일을 적용하려면 `all`을 사용한다.

print

• 인쇄에 사용되는 미디어 유형에 적용되는 타입이다. 프린터에서 웹 페이지를 출력할 때 적용되는 스타일을 지정할 수 있다.

screen

• 화면 기반의 미디어 유형에 적용되는 타입이다. 대부분의 웹 브라우저와 모바일 장치에서 화면을 표시할 때 적용되는 스타일을 지정할 수 있다.

speech

• 음성 출력 장치에 사용되는 미디어 유형에 적용되는 타입이다. 화면 낭독기나 음성 브라우저 등에서 웹 페이지를 읽어줄 때 적용되는 스타일을 지정할 수 있다.

예시

• 아래는 뷰포트 너비가 600px 이하일 때의 스타일을 적용하는 미디어 쿼리의 예시이다:

  @media (max-width: 600px) {
        body {
          background-color: lightblue;
        }
      }

• 아래는 화면 방향이 가로일 때와 해상도가 Retina 이상인 경우의 스타일을 적용하는 미디어 쿼리의 예시이다:

  @media (orientation: landscape) and (min-resolution: 2dppx) {
        .header {
          font-size: 24px;
        }
      }

picture 요소

picture

• HTML5에서 도입된 picture 요소는 반응형 이미지를 구현하기 위한 요소이다.
• picture 요소는 웹 페이지의 뷰포트 크기에 따라 다른 이미지를 제공하여 최적의 사용자 경험을 제공할 수 있다.
• picture 요소는 source 요소와 img 요소를 포함하여 사용된다.
• source>요소는 다양한 미디어 쿼리 조건에 따라 이미지를 선택적으로 제공할 수 있다.
• img 요소는 picture 요소의 자식 요소로 사용되며, 미디어 쿼리 조건에 맞는 이미지가 제공되지 않을 경우 대체 이미지로 사용된다.
• 예를 들어, 다음은 picture 요소를 사용하여 웹 페이지에서 다양한 이미지를 제공하는 예시이다

      <picture>
        &lt;source media="(max-width: 600px)" srcset="image-small.jpg"&gt;
        &lt;source media="(min-width: 601px)" srcset="image-large.jpg"&gt;
        &lt;img src="default-image.jpg" alt="Default Image"&gt;
      </picture>
    

source

• source 요소는 picture 요소의 자식 요소로 사용되며, 다양한 미디어 쿼리 조건에 따라 이미지를 선택적으로 제공한다.
• 미디어 쿼리 조건에 맞는 이미지가 있는 경우 해당 이미지를 사용하고, 없는 경우 다음 source 요소를 확인한다.
• 여러 개의 source 요소를 사용하여 다양한 미디어 쿼리 조건에 따른 이미지를 제공할 수 있다.
• 예를 들어, 다음은 뷰포트 너비가 600px 이하일 때와 601px 이상일 때 서로 다른 이미지를 제공하는 예시이다:

      <picture>
        <source media="(max-width: 600px)" srcset="image-small.jpg">
        <source media="(min-width: 601px)" srcset="image-large.jpg">
        <img src="default-image.jpg" alt="Default Image">
      </picture>
    

img

• img 요소는 picture 요소의 자식 요소로 사용되며, 미디어 쿼리 조건에 맞는 이미지가 제공되지 않을 경우 대체 이미지로 사용된다.
• img 요소는 src 속성에 기본 이미지 경로를 지정하고, alt 속성에 이미지에 대한 대체 텍스트를 제공한다.
• 미디어 쿼리에 따라 선택적으로 이미지를 제공하기 위해서는 source 요소와 함께 사용되어야 한다.

    <picture>
      <source media="(max-width: 600px)" srcset="image-small.jpg">
      <source media="(min-width: 601px)" srcset="image-large.jpg">
      <img src="default-image.jpg" alt="Default Image">
    </picture>
    

video 요소

• HTML5에서 도입된 video 요소는 웹 페이지에 비디오 콘텐츠를 재생하기 위해 사용된다.
• video 요소는 다양한 형식의 비디오 파일을 지원하며, 사용자가 브라우저에서 비디오를 재생, 일시 정지, 스킵 등의 동작을 수행할 수 있도록 한다.
• video 요소는 src 속성을 통해 비디오 파일의 경로를 지정하고, type 속성을 통해 비디오 파일의 MIME 타입을 명시한다.
• 또한, poster 속성을 사용하여 비디오의 썸네일 이미지를 지정할 수 있다. 썸네일은 비디오가 로딩되기 전에 표시된다.
• video 요소는 자체 컨트롤 버튼을 가지고 있지만, controls 속성을 추가하여 브라우저 기본 컨트롤을 사용할 수도 있다.
• 비디오에는 autoplay 속성을 사용하여 페이지 로딩 시 자동으로 재생되도록 설정할 수 있으며, loop 속성을 사용하여 반복 재생할 수 있다.
• video 요소 내부에는 source 요소를 사용하여 여러 개의 비디오 파일을 지정할 수 있다. 브라우저는 지원하는 첫 번째 형식의 비디오 파일을 선택하여 재생한다.
• video 요소의 내용이 브라우저에서 지원되지 않을 경우, video 태그 사이에 작성한 대체 콘텐츠가 표시된다.

• 예시 코드

<video src="video.mp4" type="video/mp4" poster="thumbnail.jpg" controls>
          <source src="video.webm" type="video/webm">
          <source src="video.ogg" type="video/ogg">
          Your browser does not support the video tag.
        </video>
      

• 위의 코드는 video 요소를 사용하여 비디오 콘텐츠를 재생하는 예시이다.
• src 속성은 비디오 파일의 경로를, type 속성은 MIME 타입을 나타낸다.
• poster 속성은 비디오의 썸네일 이미지를 지정하는 데 사용된다.
• controls 속성은 브라우저 기본 컨트롤을 표시하도록 설정한다. 만약 브라우저가 video 요소를 지원하지 않는 경우, 대체 콘텐츠인 "Your browser does not support the video tag."가 표시된다.