1. 유연한 그리드 레이아웃(Flexible Grid Layout)
웹 페이지의 레이아웃이 상대적인 단위(%, em, rem)로 구현되어야합니다. 이렇게 하면 컨텐츠와 그리드 레이아웃이 화면 크기의 변화에 따라 유연하게 조절될 수 있습니다.
2. 유연한 이미지 및 미디어(Flexible Images and Media)
이미지와 미디어 콘텐츠의 크기를 상대적으로 조절하거나, CSS의 max-width 속성을 사용하여 최대 너비를 지정함으로써, 이미지와 미디어가 부모 요소의 크기에 맞게 자동으로 조절될 수 있게 합니다.
3. 미디어 쿼리(Media Queries)
CSS의 미디어 쿼리를 사용하여, 특정 화면 크기 또는 장치에 따른 조건부 스타일 규칙을 적용할 수 있습니다. 미디어 쿼리를 사용하면 다양한 레이아웃, 폰트 크기, 배경색 등을 화면 크기에 따라 적절하게 선택할 수 있습니다. 이 세 가지 주요 요소를 효과적으로 사용하여 반응형 웹 디자인을 구현하면, 다양한 화면 크기와 장치에 대응하는 웹 사이트를 쉽게 만들 수 있습니다.
1. 반응형 웹
반응형 웹 디자인은 웹 페이지의 레이아웃이 사용자의 화면 크기에 따라 유연하게 변경되도록 설계하는 기술이다. CSS3 미디어 쿼리를 사용하여 일정한 화면 규격이나 장치에 맞춰 스타일과 레이아웃을 자동으로 조절한다. 유연한 그리드 레이아웃, 유연한 이미지 및 미디어, 미디어 쿼리가 주요 요소이다. 반응형 웹은 단 하나의 웹 페이지를 만들어 모든 종류의 화면 크기와 장치에 자동으로 적응하게 한다.
2. 적응형 웹
적응형 웹 디자인은 다양한 화면 크기에 대응할 수 있도록 미리 정의된 레이아웃을 만들어두는 기술입니다. 각 레이아웃은 특정 화면 크기나 장치에 최적화되어 있으며, 웹 서버는 사용자의 기기와 화면 크기를 감지하여 해당하는 레이아웃을 제공합니다. 적응형 웹은 웹 페이지를 미리 정의된 여러 버전으로 만들어 적절한 디자인을 제공합니다.
결론적으로, 반응형 웹은 하나의 웹 페이지를 작성하여 다양한 화면 크기에 동적으로 적응하고, 적응형 웹은 기기 및 화면 크기별로 여러 개의 레이아웃을 미리 생성하여 제공한다. 분석과 요구 사항에 따라 반응형 또는 적응형 웹 디자인을 선택할 수 있다.
'CS | 기술면접대비' 카테고리의 다른 글
| ★★ 절대단위(px, pt) / 상대단위(em, ex, %) (0) | 2023.07.15 |
|---|---|
| ★★ CSS(Cascading Style Sheets) 적용 우선순위 (0) | 2023.07.11 |
| ★★ 쿠키와 세션 (정의, 사용이유, 차이점) (0) | 2023.07.04 |
| #11 HTTP의 비연결성 | Promise (0) | 2023.06.29 |
| #10 쿠키와 세션의 차이 | async/await (0) | 2023.06.28 |
