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