2024/06/15 2

반응형 웹 적용기 : 2. 반응형을 적용할 디바이스 해상도 확인하기

이전 포스팅에서는 반응형 웹과 적응형 웹의 장단점에 대해 알아보았다.이전 포스팅을 보고 싶다면 아래를 클릭하여 이동하시길 바란다.2024.06.15 - [프론트엔드/CSS & HTML] - 반응형 웹 적용기 : 1. 반응형 웹의 이해 반응형 웹 적용기 : 1. 반응형 웹의 이해이번 토이 프로젝트의 화면에서 반응형 웹을 적용해보면 좋을 것 같아서 급하게 반응형 웹 적용방법을 찾아보고 있다.반응형 웹 VS 적응형 웹일단 반응형 웹의 정확한 정의가 궁금하여 찾아보았lemonnc.tistory.com 이번 편에서는 본격적으로 반응형 웹을 HTML과 CSS를 통해 적용하기 위한 필요사항을 알아보자.미디어 쿼리(media query)란?반응형 웹은 뷰포트(viewport:화면의 해상도)너비에 따라 유연하게 컨텐츠를..

반응형 웹 적용기 : 1. 반응형 웹의 이해

이번 토이 프로젝트의 화면에서 반응형 웹을 적용해보면 좋을 것 같아서 급하게 반응형 웹 적용방법을 찾아보고 있다.반응형 웹 VS 적응형 웹일단 반응형 웹의 정확한 정의가 궁금하여 찾아보았다.반응형 웹 디자인감지된 화면 크기에 따라 자동으로 페이지가 재배열되는 유동적인 접근 방식.반응형 웹 디자인을 사용하면 웹 페이지의 디자인과 레이아웃이 모든 화면 크기에 자동으로 맞춰 화면 표출.CSS 미디어 쿼리(맞춤형 스타일 시트)를 이용해 사용자가 사용하는 기기의 특성을 검사하여 웹사이트에서 자체 렌더링.적응형 웹 디자인브라우저가 주어진 플랫폼에 맞춰 특별히 생성된 레이아웃을 불러오는 웹 디자인 유형정적인 레이아웃을 불러오기 때문에 디자이너가 다양한 화면 너비에 맞춰 별도로 디자인 작업을 수행하야 한다는 불편함 존..