{"id":761,"date":"2021-09-10T14:08:04","date_gmt":"2021-09-10T05:08:04","guid":{"rendered":"https:\/\/minwook.myds.me\/wooklog\/?p=761"},"modified":"2021-09-10T14:08:04","modified_gmt":"2021-09-10T05:08:04","slug":"js-%eb%aa%a8%eb%b0%94%ec%9d%bc-%eb%b8%8c%eb%9d%bc%ec%9a%b0%ec%a0%80%ec%97%90%ec%84%9c-%ec%a3%bc%ec%86%8c%ec%b0%bd%ec%9d%84-%ea%b3%a0%eb%a0%a4%ed%95%9c-%eb%86%92%ec%9d%b4%ea%b0%92-%ea%b3%84%ec%82%b0","status":"publish","type":"post","link":"https:\/\/minwook.myds.me\/wooklog\/?p=761","title":{"rendered":"[JS] \ubaa8\ubc14\uc77c \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c \uc8fc\uc18c\ucc3d\uc744 \uace0\ub824\ud55c \ub192\uc774\uac12 \uacc4\uc0b0\ubc95"},"content":{"rendered":"\n<p>css \ubcc0\uc218\uc5d0 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub85c innerHeight \uac12\uc744 \ud560\ub2f9\ud574\uc900\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>var vh;\r\nsetVh();\r\nwindow.addEventListener( \"resize\", setVh );\r\nfunction setVh() {\r\n  vh = window.innerHeight * 0.01;\r\n  document.documentElement.style.setProperty( \"--vh\", vh+\"px\" );\r\n}<\/code><\/pre>\n\n\n\n<p>vh\ub77c\ub294 \ubcc0\uc218\ub97c \ud558\ub098 \uc120\uc5b8\ud574\uc900\ub2e4.<\/p>\n\n\n\n<p>setVh\ub77c\ub294 \ud568\uc218\ub97c \ud558\ub098 \ub9cc\ub4e4\uc5b4\uc8fc\uace0 \ubc14\ub85c \ud638\ucd9c\uc744 \ud574\uc900\ub2e4.<\/p>\n\n\n\n<p>\ud568\uc218\uc5d0\uc11c\ub294 \uc544\ub798 \ub450\uac00\uc9c0 \uba85\ub839\uc744 \uc218\ud589\ud574\uc900\ub2e4.<\/p>\n\n\n\n<ol><li>vh \ubcc0\uc218\uc5d0 innerHeight \uac12\uc758 100\ubd84\uc758 1\uc5d0 \ud574\ub2f9\ud558\ub294 \uac12\uc744 \ud560\ub2f9\ud574\uc900\ub2e4.<\/li><li>CSS :root \uc704\uce58\uc5d0 &#8211;vh\ub77c\ub294 \ubcc0\uc218\ub97c \ub9cc\ub4e4\uc5b4\uc8fc\uace0\uc704\uc5d0\uc11c \uad6c\ud55c vh\ub97c \ub123\uc5b4\uc900\ub2e4.<br>(:root\uc704\uce58\ub294 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc5d0\uc11c document\uc5d0 \ud574\ub2f9\ub418\uba70 \uac12\uc744 \ub123\uc744 \ub54c\uc5d4 \ub4a4\uc5d0 px\uc744 \ubd99\uc5ec\uc900\ub2e4.)<\/li><\/ol>\n\n\n\n<p>\uadf8\ub9ac\uace0 \ucc3d \ud06c\uae30\uac00 \ubcc0\uacbd\ub420 \ub54c \ub9c8\ub2e4 \ud568\uc218\ub97c \ud638\ucd9c\ud574\uc11c vh\uac12\uc744 \uac31\uc2e0\ud574\uc8fc\uba74 \ub05d.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>css \ubcc0\uc218\uc5d0 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub85c innerHeight \uac12\uc744 \ud560\ub2f9\ud574\uc900\ub2e4. vh\ub77c\ub294 \ubcc0\uc218\ub97c \ud558\ub098 \uc120\uc5b8\ud574\uc900\ub2e4. setVh\ub77c\ub294 \ud568\uc218\ub97c \ud558\ub098 \ub9cc\ub4e4\uc5b4\uc8fc\uace0 \ubc14\ub85c \ud638\ucd9c\uc744 \ud574\uc900\ub2e4. \ud568\uc218\uc5d0\uc11c\ub294 \uc544\ub798 \ub450\uac00\uc9c0 \uba85\ub839\uc744 \uc218\ud589\ud574\uc900\ub2e4. vh \ubcc0\uc218\uc5d0 innerHeight \uac12\uc758 100\ubd84\uc758 1\uc5d0 \ud574\ub2f9\ud558\ub294 \uac12\uc744 \ud560\ub2f9\ud574\uc900\ub2e4. CSS :root \uc704\uce58\uc5d0 &#8211;vh\ub77c\ub294 \ubcc0\uc218\ub97c \ub9cc\ub4e4\uc5b4\uc8fc\uace0\uc704\uc5d0\uc11c \uad6c\ud55c vh\ub97c \ub123\uc5b4\uc900\ub2e4.(:root\uc704\uce58\ub294 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc5d0\uc11c document\uc5d0 \ud574\ub2f9\ub418\uba70 \uac12\uc744 \ub123\uc744 \ub54c\uc5d4 \ub4a4\uc5d0 px\uc744 \ubd99\uc5ec\uc900\ub2e4.) \uadf8\ub9ac\uace0 \ucc3d \ud06c\uae30\uac00 \ubcc0\uacbd\ub420 \ub54c \ub9c8\ub2e4 &hellip; <a href=\"https:\/\/minwook.myds.me\/wooklog\/?p=761\" class=\"more-link\">\ub354 \ubcf4\uae30<span class=\"screen-reader-text\"> &#8220;[JS] \ubaa8\ubc14\uc77c \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c \uc8fc\uc18c\ucc3d\uc744 \uace0\ub824\ud55c \ub192\uc774\uac12 \uacc4\uc0b0\ubc95&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":[],"categories":[128,130],"tags":[],"_links":{"self":[{"href":"https:\/\/minwook.myds.me\/wooklog\/index.php?rest_route=\/wp\/v2\/posts\/761"}],"collection":[{"href":"https:\/\/minwook.myds.me\/wooklog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/minwook.myds.me\/wooklog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/minwook.myds.me\/wooklog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/minwook.myds.me\/wooklog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=761"}],"version-history":[{"count":1,"href":"https:\/\/minwook.myds.me\/wooklog\/index.php?rest_route=\/wp\/v2\/posts\/761\/revisions"}],"predecessor-version":[{"id":762,"href":"https:\/\/minwook.myds.me\/wooklog\/index.php?rest_route=\/wp\/v2\/posts\/761\/revisions\/762"}],"wp:attachment":[{"href":"https:\/\/minwook.myds.me\/wooklog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=761"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/minwook.myds.me\/wooklog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=761"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/minwook.myds.me\/wooklog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=761"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}