반응형웹 (2) 썸네일형 리스트형 [반응형 웹] 미디어 쿼리 적용하기 지난번 포스팅에서는 가변 그리드/마진/패딩을 적용해서 화면의 크기에 따라서 가변적으로 컴포넌트의 크기가 변하도록 하는 작업을 진행하였다. 컴포넌트 간 포함 관계를 이용해서 % 단위로 길이를 계산하고 이를 통해 크기를 가변적으로 만들 수 있었다. [반응형 웹] 가변 그리드, 마진, 패딩 적용하기 반응형 웹(Responsive web)은 여러 기기로 웹을 이용하면 요즘에 반드시 할 줄 알아야 하는 기술이라고 해도 과언이 아니다. 반응형 웹의 구현을 통해 화면의 크기가 서로 다른 기기 별로 웹 페이지 firsteast.tistory.com 이번 포스팅에서는 미디어 쿼리(Media Query)를 사용한 적용기를 기록해보려고 한다. 미디어 쿼리(Media Query) 들어가기 전에 미디어 쿼리가 무엇인지에 대해서.. [반응형 웹] 가변 그리드, 마진, 패딩 적용하기 반응형 웹(Responsive web)은 여러 기기로 웹을 이용하면 요즘에 반드시 할 줄 알아야 하는 기술이라고 해도 과언이 아니다. 반응형 웹의 구현을 통해 화면의 크기가 서로 다른 기기 별로 웹 페이지의 크기를 따로 설정하지 않아도 되게 된다. 이를 통해 개발에 필요한 비용을 크게 줄일 수 있을 뿐만 아니라 유지/보수 측면에서도 이점을 갖는다. 항상 진행하는 프로젝트마다 반응형 웹이 되도록 작성하려고 하였으나, 어설프게 진행하다 포기하기 일수였기 때문에 이번에 책을 한 권 구매하여 제대로 된 공부를 하고 있다.(역시 사람은 돈이 들어가면 조금 더 열심히 하게 된다.) 이번 포스팅은 책의 2장에 나오는 가변 그리드, 마진, 패딩을 이전에 진행했던 토이 프로젝트에 반영하는 것을 정리한 포스팅이다. 프로젝.. 이전 1 다음
