Fluid Grid 란? 우선 그리드 시스템 (grid system)이란? 화면을 요소를 배치하도록 하는 시스템으로 화면을 단순하게 만들면서 동시에 으로 할 수 있다는 장점이 있다. 그리고 고정 그리드 레이아웃 (fixed grid layout) 고정 그리드 레이아웃 이미지 말 그대로 를 로 고정하는 것을 의미한다. 예를 들어 그리드의 너비를 360px로 입력하였다면 화면의 크기와 상관없이 해당 그리드는 너비 360px을 유지한다. 위의 그림처럼 , 다양한 기기를 사용하는 현대 사회에서 을 떨어틀일 수 있다. 그래서 가변 그리드 레이아웃 (fluid grid layout)이란? 가변 그리드 레이아웃 이미지 을 이용하여 화면 너비에 대해 각 그리드의 너비 비율을 정하고, 화면의 크기 변화에 따라 그리드의 크기를 같이 변하게 할 수 있다. 때문에 고정 그리드 레이아웃에서 사용자의 사용감을 떨어트리는 요소를 가변 그리드 레이아웃을 사용한다면 해결할 수 있다. 그리드의 구성요소 열(C…

Media Query 란? 구체적인 조건을 필요한 스타일 적용할 수 있도록 확장하였다. 간단한 이야기로 말하면 각 화면의 비율마다 각각 다른 화면을 보여주자 라는 개념을 가고 있다. 다양한 기기들이 많아 웹 페이지를 접속할 때, 각기 다른 페이지를 보여줘야 되는데, 반응형을 사용하지 않는다면 각 페이지마다 새로운 파일을 만들어서 각기 다른 버전으로 관리해야 한다. 이 때 그런 번거로움을 없애기 위하여 한 파일에서 pc, 모바일, 태블릿 등을 고려한 웹 사이트를 만들 수 있게 반응형 웹 페이지를 만드는 것이다. Fluid Grid Fluid Grid 이미지 그리드의 폭을 고정 값이 아닌 em 또는 %의 값으로 설정하는 것을 뜻함 가로 폭의 길이의 변화에 따라 컬럼의 크기가 상대적으로 변하게 하는 방법 레이아웃에는 변화가 없을 수 있으므로 폭이 많이 좁은 모바일에서 큰 효과를 볼 수 없을 수 있음 Liquid Layouts Liquid Layouts 이미지 유동형 그리드와 같이 반응형…

Viewport란? 현재 보고 있는 컴퓨터 그래픽의 영역을 나타내는 말로, 웹 브라우저 용어에서는 일반적으로 UI, 메뉴 표시줄 등을 제외하고는 브라우저 창과 동일하다. 보고 있는 문서의 일부이며, 웹 페이지에서 사용자가 볼 수 있는 영역이라고 할 수 있다. 태블릿이나 스마트폰이 있기 전에는 웹 페이지가 컴퓨터 화면만을 위해 설계가 되었었는데, 현재 다양한 기기들을 사용자들이 사용하고 있기 때문에 기존에 컴퓨터 화면에만 맞추어서 설계되었던 가 설계를 에서 → 가 가능한 설계 방식으로 바뀌게 되었다. Viewport 설정 뷰포트 요소를 모든 반응형 웹 페이지에 포함해야 한다.  뷰포트 요소는 페이지의 크기 및 배율을 제어하는 방법에 대한 지침을 브라우저에 제공한다. 은 페이지의 너비를 설정하여 기기의 화면 너비를 따르도록 한다.(기기에 따라 다름) 은 브라우저에 의해 페이지가 처음 로드될 때 초기 확대/축소 레벨을 설정한다. 콘텐츠 크기 조정 사용자들은 보통 데스크톱과 모바일 기…

반응형 웹 이미지 반응형 웹이란? Google Developers 반응형 웹 레이아웃은 기기의 크기와 기능에 따라 변합니다. 예를 들어, 휴대폰에서는 콘텐츠가 하나의 column으로 표시될 수 있지만 태블릿에서는 두 개의 column으로 표시될 수 있습니다. 은 를 가진 들에서 웹 페이지의 하기 위한 기술로 HTML과 CSS만을 사용해서 반응형 웹 설계가 가능하며, 다양한 기기를 사용하는 모든 사용자에게 UX를 선사하기 위한 설계 방식이다. 다양한 기기에서 웹 UI를 의도한 대로 보여주고, 의도한 대로 동작하는 웹 페이지를 설계하기 위함이다. 반응형 웹을 설계하기 위한 핵심기술 1. 가변 그리드(Fluid Grid) 라고 부르기도 한다. 설계자가 그래픽 요소를 합리적이고 흡수하기 쉬운 방식으로 구성할 수 있는 뼈대이자 프레임워크의 역할을 한다. 전체 에 하고 할 수 있다. 이는 사용자에게 전문적이고 신뢰성과 안정감을 제공할 수 있다. 과 같이 상황에 맞게 변할 수 있는 단위인 …