본격적으로 가변 그리드 배우기 이제부터는 본격적으로 가변 그리드에 대해 알아보고 가변 그리드를 이용한 가변 마진 그리고 가변 패딩도 함께 알아보자 가변 그리드 공식 이해하기 앞에서 간단히 % 값을 이용해서 가변 크기의 박스를 만들어 보았다. 하지만 사실상 가변 그리드라는 기술은 정해져 있는 공식에 의해 정확한 가변 크기의 박스를 만드는 기술이다. 공식은 다음과 같다. (가변 크기로 만들 박스의 가로 너비 / 가변 크기로 만들 박스를 감싸고 있는 박스의 가로 너비) * 100 = 가변 크기의 값 예를 들어 노란 박스를 감싸고 있는 테두리 박스의 가로 너비가 960px이고, 가변 크기로 만들 박스의 가로 너비가 300px이라면 노란 박스를 가변 크기로 만들기 위한 공식은 다음과 같다. (300px / 960..

반응형 웹을 제작할 때는 여러 가지 기술이 필요하다. 화면 크기나 환경의 변화를 감지하는 기술, 홤녀 크기를 정확하게 제어하는 기술, 그리고 감지한 화면 크기로 변환하는 기술 등 다양한 기술이 필요하다. 픽셀은 한계가 있다. ㅡ 가면 그리드 우선 가변 그리드(Fluid Grid)라는 개념을 이해하고 있어야 한다. 가변 그리드는 웹사이트를 제작할 때 화면의 크기에 관계없이 자유롭게 늘어나거나 줄어들 수 있도록 픽셀(px)대신 퍼센트(%)로 제작하는 기술이다. '가변' 또는 '가변적이다'라는 말은 무슨 의미일까? 학창시절 과학 시간에 어떠한 물체 또는 공을 늘이거나 줄이는 실험을 하면서 '가변적이다' 또는 '유동적이다'라는 말을 한 번쯤은 들어보았을 것이다. 이렇듯 가변이라는 말은 어떠한 객체/물체 또는 사..

반응형 웹이란? 반응형 웹이란 PC, TV, 내비게이션, 스마트 기기 등 기기마다 또는 환경마다 최적화된 웹사이트를 제공해주는 것을 말한다. 예를 들어 화면이 작은 기기에서 반응형 웹으로 제작된 웹사이트를 접속했을 때는 웹 사이트의 구조를 작은 화면에 최적화된 구조로 변경하여 보여주고, 큰 화면을 가진 기기에서는 웹 사이트의 구조를 큰 화면에 최적화된 구조로 변경하여 보여준다. 이처럼 기기의 화면이나 환경에 맞게 자유자재로 변하는 것이 반응형 웹이다. 반응형 웹이 세상에 나온 이유 2007년, 처음으로 모바일 기기가 세상에 선을 보이자 사람들은 열광했다. 이제야 기본적인 검색뿐만 아니라 예약, 주문까지 언제, 어디서든 할 수 있게 되었다고 소리치면서 말이다. 하지만 모바일 기기의 인터넷 사용에는 문제가 ..