반응형 반응형 웹3 뷰포트 (viewport) viewport는 화면에서 실제 내용이 표시되는 영역으로, 데스크톱은 사용자가 설정한 해상도가 뷰포트 영역이 되고, 스마트 기기는 기본으로 설정되어 있는 값이 뷰포트 영역이 됩니다. 그런데 스마트 기기는 기본으로 설정되어 있는 뷰포트 영역으로 인해 미디어 쿼리가 정상적으로 작동하지 않는 문제가 발생할 수 있습니다. 이러한 문제를 방지하기 위해 뷰포트 메타 태그를 이용해서 화면의 크기나 배율을 조절해야 합니다. 예시) 위 메타 태그는 반응형 웹을 제작할 때 사용하는 뷰포트의 기본 형태입니다. 뷰포트 기술을 제대로 사용하려면 문법을 정확하게 이해하고 있어야 하며,, 그중에서도 특히 뷰포트 속성은 반드시 알아야 합니다. 뷰포트 속성 속성명 속성값 속성 설명 width Device-width, 양수 뷰포트의 너.. 2021. 8. 4. 반응형 웹의 장단점 반응형 웹이 등장하면서 웹사이트를 사용하는 사람들에게 모든 기기에서 최적화된 웹사이트를 제공할 수 있게 되었고, PC 버전의 웹사이트와 모바일 버전의 웹사이트 두 가지 모두를 만들지 않아도 됨에 따라 비용과 시간, 인력을 반으로 줄일 수 있게 되었습니다. 그러면 왜 반응형 웹으로 만들어야 하는지 구체적으로 알아보겠습니다. 왜 반응형 웹을 쓰는가? 유지보수 간편 반응형 웹은 유지보수가 간편합니다. 모바일 버전과 데스크톱 버전 같은 두 개의 웹사이트를 만들게 되면 웹사이트에 새로운 내용을 추가하거나 수정할 때 모바일 버전과 데스크톱 버전을 개별적으로 수정해야 하므로 같은 내용의 작업을 반복해야 했기 때문에 손이 많이 가고 복잡합니다. 하지만 반응형 웹은 모바일 버전, 태블릿 버전, 데스크톱 버전 등 모든 디.. 2021. 7. 29. 반응형 웹이란? 반응형 웹이란 말 그대로 반응하는 웹을 뜻합니다. 조금 더 구체적으로 설명을 하자면 PC, TV, 내비게이션, 스마트 기기 등 기기마다 또는 환경마다 최적화된 웹사이트를 제공해주는 것을 말합니다. 예를 들어 화면이 작은 기기에서 반응형 웹으로 제작된 사이트에 접속하였을 때는 작은 화면에 최적화된 화면으로 구조를 변경하여 보여주고, 화면이 큰 기기에서 접속하였을 때는 큰 화면에 최적화된 화면으로 구조를 변경하여 보여줍니다. 즉, 기기의 화면이나 환경에 맞게 자유자재로 변하는 것이 반응형 웹입니다. 반응형 웹의 등장 배경 2007년, 처음으로 모바일 기기가 세상에 나왔습니다. 많은 사람들은 검색을 비롯한 예약, 주문 등등 온라인으로 이루어졌던 서비스를 언제 어디서든 할 수 있게 되었다는 점에 열광했습니다. .. 2021. 7. 28. 이전 1 다음 반응형 LIST
