Frontend - 반응형 웹 개발

목차

• 반응형 웹이란?
• Media Queries
• Fluid Grids
• Mobile - first Approach ( 모바일 우선 )
• FlexBox
• CSS Grid (Grid Layout)

 

반응형 웹 이란

 

반응형 웹 (Responsive Web)은 사용자가 사이트에 접속한 하드웨어 크기에 따라 페이지가 재배열되는 웹을 말합니다.

 

사용자는 태블릿, 데스크톱, 스마트폰, 노트북 등 다양한 하드웨어로 사이트에 접속할 수 있기 때문에 웹 페이지를 접속된 기기의 크기에 따라 최적화되어 배치하는 반응형 웹 개발은 웹 사이트 개발에서 필수적입니다.

 

반응형 웹 개발 방법에는 아래와 같은 기술, 방식이 있습니다.

 

 

1. Media Queries (미디어 쿼리)

 

CSS3의 기능으로, 사이트에 접속한 기기(미디어)의 특성에 따라 웹 페이지의 스타일을 다르게 적용하는 방법입니다.

 

미디어 쿼리를 통해 기기의 장치 유형, 화면 크기, 해상도 등을 감지하여 해당 조건에 따른 스타일을 적용할 수 있습니다.

 

예로 아래와 같은 코드에선 미디어 타입이 screen이고 최대 화면 넓이가 760px일때 스타일을 적용하는 예시입니다.

 

@media screen and (max-width: 760px) {
    // 화면 넓이가 760px 이하일 때 적용될 스타일
}

 

 

2. Fluid Grids

 

웹 페이지의 레이아웃을 고정된 크기 대신 비율로 개발하는 방식을 말합니다.

 

이 방식을 통해 화면의 크기가 변해도 웹 페이지의 요소들 또한 크기가 자연스럽게 변경됩니다.

 

이를 통해 다양한 하드웨어로 사이트에 접속하여도 요소들이 잘 배치된 페이지를 볼 수 있게 됩니다.

 

고정된 크기의 레이아웃은 특정 크기의 화면에서는 문제없으나 화면 크기가 달라지면 레이아웃이 깨지거나, 요소들이 이상하게 배치되는 등 사용자 경험이 나쁠 수 있습니다.

 

이에 반해 유동 그리드는 비율(퍼센트)을 사용하여 기기 화면 크기에 따라 레이아웃과 내부 요소들의 크기가 달라져 다양한 화면 크기에 유연하게 대처 가능합니다.

 

 

3. Mobile - first Approach ( 모바일 우선 )

 

모바일 화면 크기에 맞춰 웹 사이트를 디자인하고, 후에 데스크톱 등의 큰 화면에 대해 추가적인 스타일을 적용하는 방식입니다.

 

작은 화면에 맞춰진 디자인을 큰 화면으로 확장하는 것은 쉬우나 큰 화면에 맞춘 디자인을 작은 화면으로 줄여나가는 것은 어렵기 때문에 디자인을 모바일 화면 크기에 맞춘 후에 태블릿, 데스크톱 등의 화면에 확장해 나가는 방식을 말합니다.

 

 

4. Flexbox

 

Flexbox는 Flexible Box layout의 약자로 단일 행 또는 단일 열의 요소들을 유연하게 배치하고 적절하게 공간을 분배하는 CSS 기능입니다.

 

주요 개념

 

Flex Container

 

style에 'display: flex' 속성을 추가하여 요소들을 감싸는 컨테이너 요소를 생성할 수 있습니다.

 

Flex Items

 

Flex Container 내부의 자식 요소들입니다.

 

Main Axis & Cross Axis

 

메인 방향(Main Axis)은 수평, 수직 중 하나이며 교차 방향(Cross Axis)은 그 반대입니다.

 

 

5. CSS Grid (Grid Layout)

 

2차원 그리드 레이아웃을 생성하고 요소들을 배치하는 기술로 행과 열을 가지는 2차원 구조를 가집니다.

 

주요 개념

 

Grid Container

 

style에 'display: grid' 속성을 추가하여 Grid Container를 생성합니다.

 

Grid Items

 

Grid Container 내부의 자식 요소들입니다.