{"componentChunkName":"component---src-templates-tag-js","path":"/tag/qna/","result":{"data":{"contentfulTag":{"title":"q&a","id":"d794028e-c0fa-51e9-ae56-b71c176e84ce","slug":"qna","post":[{"id":"eca35fec-1911-5717-b60a-e1d67673c34b","title":"Q. 반응형 웹 페이지 만드는 방법","slug":"responsive-web-design","publishDate":"May 08, 2019","publishDateISO":"2019-05-08","heroImage":{"title":"responsive web design","fluid":{"aspectRatio":1.4285714285714286,"src":"//images.ctfassets.net/e1rkozd9gki4/2dvOBVwiAsOA0zliFab0i/fa4dfd8841dd272d42e205dc71b37e7c/responsive-2044932_960_720.png?w=1800&q=50","srcSet":"//images.ctfassets.net/e1rkozd9gki4/2dvOBVwiAsOA0zliFab0i/fa4dfd8841dd272d42e205dc71b37e7c/responsive-2044932_960_720.png?w=450&h=315&q=50 450w,\n//images.ctfassets.net/e1rkozd9gki4/2dvOBVwiAsOA0zliFab0i/fa4dfd8841dd272d42e205dc71b37e7c/responsive-2044932_960_720.png?w=900&h=630&q=50 900w,\n//images.ctfassets.net/e1rkozd9gki4/2dvOBVwiAsOA0zliFab0i/fa4dfd8841dd272d42e205dc71b37e7c/responsive-2044932_960_720.png?w=960&h=672&q=50 960w","srcWebp":"//images.ctfassets.net/e1rkozd9gki4/2dvOBVwiAsOA0zliFab0i/fa4dfd8841dd272d42e205dc71b37e7c/responsive-2044932_960_720.png?w=1800&q=50&fm=webp","srcSetWebp":"//images.ctfassets.net/e1rkozd9gki4/2dvOBVwiAsOA0zliFab0i/fa4dfd8841dd272d42e205dc71b37e7c/responsive-2044932_960_720.png?w=450&h=315&q=50&fm=webp 450w,\n//images.ctfassets.net/e1rkozd9gki4/2dvOBVwiAsOA0zliFab0i/fa4dfd8841dd272d42e205dc71b37e7c/responsive-2044932_960_720.png?w=900&h=630&q=50&fm=webp 900w,\n//images.ctfassets.net/e1rkozd9gki4/2dvOBVwiAsOA0zliFab0i/fa4dfd8841dd272d42e205dc71b37e7c/responsive-2044932_960_720.png?w=960&h=672&q=50&fm=webp 960w","sizes":"(max-width: 1800px) 100vw, 1800px"}},"body":{"childMarkdownRemark":{"timeToRead":1,"html":"<h2 id=\"이용해야하는-수치\" style=\"position:relative;\"><a href=\"#%EC%9D%B4%EC%9A%A9%ED%95%B4%EC%95%BC%ED%95%98%EB%8A%94-%EC%88%98%EC%B9%98\" aria-label=\"이용해야하는 수치 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>이용해야하는 수치</h2>\n<ul>\n<li>REM</li>\n<li>EM</li>\n</ul>\n<h2 id=\"참고-자료\" style=\"position:relative;\"><a href=\"#%EC%B0%B8%EA%B3%A0-%EC%9E%90%EB%A3%8C\" aria-label=\"참고 자료 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>참고 자료</h2>\n<ul>\n<li><a href=\"https://webdesign.tutsplus.com/ko/tutorials/comprehensive-guide-when-to-use-em-vs-rem--cms-23984\" title=\"Rem 그리고 Em, 언제 써야 할까\">Rem 그리고 Em, 언제 써야 할까</a></li>\n<li><a href=\"https://developers.google.com/web/fundamentals/design-and-ux/responsive/?hl=ko\" title=\"반응형 웹 디자인 기본 사항 | Google Developers\">반응형 웹 디자인 기본 사항 | Google Developers</a></li>\n</ul>","excerpt":"이용해야하는 수치 REM EM 참고 자료 Rem 그리고 Em, 언제 써야 할까 반응형 웹 디자인 기본 사항 | Google Developers"}}}]}},"pageContext":{"slug":"qna","limit":6,"skip":0,"numPages":1,"currentPage":1}}}