{"id":92,"date":"2007-09-20T07:54:30","date_gmt":"2007-09-20T07:54:30","guid":{"rendered":"http:\/\/minicube.kr\/wp\/?p=92"},"modified":"2007-09-20T07:54:30","modified_gmt":"2007-09-20T07:54:30","slug":"about-em-unit-in-css","status":"publish","type":"post","link":"https:\/\/blog.neue.nz\/?p=92","title":{"rendered":"CSS\uc758 em \ub2e8\uc704"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">CSS\uc5d0\uc11c\ub294 \uae00\uc790 \ud3f0\ud2b8 \ud06c\uae30\ub098 width, height \ub4f1\uc758 \ud06c\uae30\ub97c \uc9c0\uc815\ud560 \ub54c \ub2e4\uc591\ud55c \ub2e8\uc704\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. <strong>(pt, px, em, ex, %)<\/strong> \ub300\ubd80\ubd84\uc758 \ube0c\ub77c\uc6b0\uc800\ub294 \ub2e8\uc704\ub97c \uc0ac\uc6a9\ud558\uc9c0 \uc54a\uc73c\uba74 \uc790\ub3d9\uc73c\ub85c px\ub2e8\uc704(\ubaa8\ub2c8\ud130\uc758 \ud53d\uc140)\ub85c \uc778\uc2dd\ud558\uc5ec \ub80c\ub354\ub9c1\uc744 \ud558\uac8c \ub418\uc9c0\ub9cc, <span style=\"color:#cf2e2e\" class=\"tadv-color\">\ud604\uc7ac \ud45c\uc900\uc740 \ub2e8\uc704\ub97c \ud56d\uc0c1 \uba85\uc2dc\ud574\uc8fc\ub294 \uac83<\/span>\uc785\ub2c8\ub2e4. (0 \uc81c\uc678)<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\"> DIV.test { padding:5px 0 5px 10px; font:normal 9pt \ub3cb\uc6c0; } <\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\ub300\ubd80\ubd84 HTML \uac1c\ubc1c \uc2dc\uc5d0\ub294 px \ub2e8\uc704\ub97c \uc0ac\uc6a9\ud558\uace0 \ud3f0\ud2b8 \ud06c\uae30\uc5d0\ub294 pt, px \ub2e8\uc704\ub97c \ud63c\uc6a9\ud558\uc5ec \uc0ac\uc6a9\ud558\uace0\ub294 \ud558\ub294\ub370, <strong><span style=\"color:#cf2e2e\" class=\"tadv-color\">em<\/span><\/strong> \uc774\ub77c\ub294 \ub2e8\uc704\ub97c \uc0ac\uc6a9\ud558\uc790\ub294 \uc6c0\uc9c1\uc784\ub3c4 \uc788\ub294 \uac83 \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">pt, px \uac00 \uc808\ub300\uc801\uc778 \ud06c\uae30\ub97c \ub098\ud0c0\ub0b4\ub294\ub370 \ubc18\ud574\uc11c, em, ex, % \ub294 <span style=\"text-decoration: underline;\"><span style=\"text-decoration: underline\" class=\"underline\">\uc0c1\uc704 \uc5d8\ub808\uba58\ud2b8\uc5d0 \ub300\ud55c \uc0c1\ub300\uc801\uc778 \ud06c\uae30<\/span><\/span>\ub97c \ub098\ud0c0\ub0c5\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">em, ex \ub2e8\uc704\uc758 \uc7a5\uc810\uc774\ub77c\uba74 \uc6f9 \ube0c\ub77c\uc6b0\uc800 \uba54\ub274\uc5d0\uc11c \uae00\uaf34 \ud06c\uae30\ub97c \ubcc0\ud654\uc2dc\ucf1c \uc904 \uc218 \uc788\uace0, \uadf8\uc5d0 \ub530\ub77c \ub808\uc774\uc544\uc6c3\uc744 \uc720\ub3d9\uc801\uc73c\ub85c \uc801\uc6a9\ud560 \uc218 \uc788\uae30 \ub54c\ubb38\uc5d0 <strong>\uc811\uadfc\uc131\uc774 \ud5a5\uc0c1\ub429\ub2c8\ub2e4.<\/strong> \uc989 \uc791\uc740 \uae00\uc790\ub97c \ubcf4\uae30 \uc5b4\ub824\uc6b4 \ubd84\ub4e4\ub3c4 \uae00\uc790 \ud655\ub300\ub97c \ud558\uc5ec \uc27d\uac8c \ubcfc \uc218 \uc788\ub2e4\ub294 \uc810\uc774\uc8e0. (IE6\uc744 \uc0ac\uc6a9\ud558\uc2e0\ub2e4\uba74 \ucf58\ud2b8\ub864 \ud0a4\ub97c \ub204\ub974\uace0 \ub9c8\uc6b0\uc2a4 \ud720\uc744 \ub3cc\ub824\ubcf4\uc138\uc694)<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">IE \uae30\uc900\uc73c\ub85c \uae00\uaf34 \ud06c\uae30\ub97c &#8220;\ubcf4\ud1b5&#8221;\uc73c\ub85c \uc9c0\uc815\ud588\uc744 \uacbd\uc6b0(\uc6f9\ube0c\ub77c\uc6b0\uc800 \ub514\ud3f4\ud2b8) \ucd5c\uc0c1\uc5d8\ub9ac\uba58\ud2b8 1em\uc740 12pt, 16px \uc640 \uac19\uc2b5\ub2c8\ub2e4. \uae30\uc900\uc778 \uc148\uc774\uc8e0. \ubcf4\ud1b5 \ub9ce\uc774 \uc0ac\uc6a9\ud558\ub294 \uad74\ub9bc\uccb4 9pt \uc758 \uacbd\uc6b0\ub294 12px \uc774\ubbc0\ub85c em \uc73c\ub85c \ud658\uc0b0\ud558\uba74 0.75em \uc774 \ub429\ub2c8\ub2e4. \ucc38\uace0\ud560 \ub9cc\ud55c \ub2e8\uc704\ud45c\ub294 \ub2e4\uc74c\uc744 \ucc38\uace0!<\/p>\n\n\n\n<table class=\"wp-block-table\"><tbody><tr><th>Points<\/th><th>Pixels<\/th><th>Ems<\/th><th>Percent<\/th><\/tr><tr><td>6pt<\/td><td>8px<\/td><td>0.5em<\/td><td>50%<\/td><\/tr><tr><td>7pt<\/td><td>9px<\/td><td>0.55em<\/td><td>55%<\/td><\/tr><tr><td>7.5pt<\/td><td>10px<\/td><td>0.625em<\/td><td>62.5%<\/td><\/tr><tr><td>8pt<\/td><td>11px<\/td><td>0.7em<\/td><td>70%<\/td><\/tr><tr><td>9pt<\/td><td>12px<\/td><td>0.75em<\/td><td>75%<\/td><\/tr><tr><td>10pt<\/td><td>13px<\/td><td>0.8em<\/td><td>80%<\/td><\/tr><tr><td>10.5pt<\/td><td>14px<\/td><td>0.875em<\/td><td>87.5%<\/td><\/tr><tr><td>11pt<\/td><td>15px<\/td><td>0.95em<\/td><td>95%<\/td><\/tr><tr><td>12pt<\/td><td>16px<\/td><td>1em<\/td><td>100%<\/td><\/tr><tr><td>13pt<\/td><td>17px<\/td><td>1.05em<\/td><td>105%<\/td><\/tr><tr><td>13.5pt<\/td><td>18px<\/td><td>1.125em<\/td><td>112.5%<\/td><\/tr><tr><td>14pt<\/td><td>19px<\/td><td>1.2em<\/td><td>120%<\/td><\/tr><tr><td>14.5pt<\/td><td>20px<\/td><td>1.25em<\/td><td>125%<\/td><\/tr><tr><td>15pt<\/td><td>21px<\/td><td>1.3em<\/td><td>130%<\/td><\/tr><tr><td>16pt<\/td><td>22px<\/td><td>1.4em<\/td><td>140%<\/td><\/tr><tr><td>17pt<\/td><td>23px<\/td><td>1.45em<\/td><td>145%<\/td><\/tr><tr><td>18pt<\/td><td>24px<\/td><td>1.5em<\/td><td>150%<\/td><\/tr><tr><td>20pt<\/td><td>26px<\/td><td>1.6em<\/td><td>160%<\/td><\/tr><tr><td>22pt<\/td><td>29px<\/td><td>1.8em<\/td><td>180%<\/td><\/tr><tr><td>24pt<\/td><td>32px<\/td><td>2em<\/td><td>200%<\/td><\/tr><tr><td>26pt<\/td><td>35px<\/td><td>2.2em<\/td><td>220%<\/td><\/tr><tr><td>27pt<\/td><td>36px<\/td><td>2.25em<\/td><td>225%<\/td><\/tr><tr><td>28pt<\/td><td>37px<\/td><td>2.3em<\/td><td>230%<\/td><\/tr><tr><td>29pt<\/td><td>38px<\/td><td>2.35em<\/td><td>235%<\/td><\/tr><tr><td>30pt<\/td><td>40px<\/td><td>2.45em<\/td><td>245%<\/td><\/tr><tr><td>32pt<\/td><td>42px<\/td><td>2.55em<\/td><td>255%<\/td><\/tr><tr><td>34pt<\/td><td>45px<\/td><td>2.75em<\/td><td>275%<\/td><\/tr><tr><td>36pt<\/td><td>48px<\/td><td>3em<\/td><td>300%<\/td><\/tr><\/tbody><\/table>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">\ub2e8\uc810\uc774\ub77c\uba74&#8230; \uac1c\ubc1c\uc774 \uc880 \uc5b4\ub835\uc2b5\ub2c8\ub2e4. \ub514\uc790\uc778 \ub4f1\uc5d0\uc11c \uc0ac\uc6a9\ud558\ub294 \ud53d\uc140 \ub2e8\uc704\ub97c \ud658\uc0b0\ud558\uc5ec \uc0c1\ub300\uc801\uc778 \ud06c\uae30\ub97c \uacc4\uc18d \uacc4\uc0b0\ud574\ub098\uac00\uc57c \ud558\uae30 \ub54c\ubb38\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ub610\ud55c IE7\uc774\ub098 \ud30c\uc774\uc5b4\ud3ed\uc2a4\uc758 \ucd5c\uc2e0 \uc6f9\ube0c\ub77c\uc6b0\uc800\ub294 \uae00\uc790 \ud06c\uae30\ub97c \ud655\ub300\ud558\ub294 \uac1c\ub150\uacfc\ub294 \ub2e4\ub978 &#8220;\uc90c\ube0c\ub77c\uc6b0\uc9d5&#8221; \uae30\ub2a5\uc744 \uac00\uc9c0\uace0 \uc788\uc2b5\ub2c8\ub2e4. \ud654\uba74 \uc790\uccb4\ub97c \ud655\ub300\ud558\uae30 \ub54c\ubb38\uc5d0 \uc808\ub300\ud06c\uae30, \uc0c1\ub300\ud06c\uae30\uc758 \uc758\ubbf8\uac00 \uc5c6\uc5b4\uc838\uc11c em\uc744 \uc368\uc11c \uc811\uadfc\uc131\uc744 \ub192\uc774\uc790\ub294 \ubaa9\uc18c\ub9ac\uc758 \uc124\ub4dd\ub825\uc774 \uc870\uae08\uc529 \uc5c6\uc5b4\uc9c0\uace0 \uc788\ub294 \ub4ef. \ud558\uc9c0\ub9cc \ub2f9\ubd84\uac04\uc740 IE6\uc774 \ub4dd\uc138\ud560 \uac83 \uac19\uc73c\ub2c8 \ub2f9\uc7a5\uc758 \ubb38\uc81c\ub294 \uc544\ub2c8\uc8e0.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uadf8\ub098\ub9c8 \uadf8 \ub2e8\uc810 \uc911 \ud55c\uac00\uc9c0 \uc815\ub3c4\ub294 \ubcf4\uc644\ud574 \uc904 \uc218 \uc788\ub294 \uc6f9 \uc720\ud2f8\ub9ac\ud2f0\ub97c \ub9c1\ud06c\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc774\ub978\ubc14 <a rel=\"noreferrer noopener\" aria-label=\"Em Calcurator (opens in a new tab)\" href=\"https:\/\/vasilis.nl\/nerd\/code\/emcalc\/\" target=\"_blank\">Em Calcurator<\/a>. \uc0ac\uc6a9 \ubc29\ubc95\uc740 \uac04\ub2e8\ud574\uc694. \uba87\ub2e8\uacc4 \ud558\uc704 \ub178\ub4dc\ub85c \ub4e4\uc5b4\uac00\ub4e0 \uae30\uc874\uc758 px \ub2e8\uc704\ub97c \uc644\ubcbd\ud558\uac8c em \ub2e8\uc704\ub85c \uacc4\uc0b0\ud574\uc90d\ub2c8\ub2e4. \ud558\ub358 \uc791\uc5c5(\uc138\uc158) \uc800\uc7a5\ub3c4 \ub429\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc608\uc804\uc5d0 \ud53d\uc140 \uae30\uc900\uc73c\ub85c \uc791\uc5c5 \ud558\ub358 \uac83\uc744 \uc798 \ud65c\uc6a9\ud558\uba74 \uc644\ubcbd\ud558\uac8c em\ub2e8\uc704\ub85c \uc81c\uc791\ud574\uc11c \ud55c\uce35 \ub192\uc740 \uc811\uadfc\uc131\uc744 \ud655\ubcf4\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. (\ubb3c\ub860 em\ub2e8\uc704\ub85c \uc644\ubcbd\ud558\uac8c \ud65c\uc6a9\ud558\uae30 \uc704\ud574\uc11c\ub294 \ub514\uc790\uc778\uc758 \uc720\uc5f0\uc131\ub3c4 \ud544\uc694\ud558\uae30 \ub54c\ubb38\uc5d0 \ub514\uc790\uc774\ub108\ub3c4 \uace0\uc2ec\ud574\uc57c\ud560 \ud544\uc694\uac00 \uc788\uc2b5\ub2c8\ub2e4.)<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/blog.neue.nz\/wp-content\/uploads\/2019\/04\/emcalc_preserde.gif\" alt=\"\" class=\"wp-image-802\"\/><\/figure><\/div>\n","protected":false},"excerpt":{"rendered":"<p>CSS\uc5d0\uc11c\ub294 \uae00\uc790 \ud3f0\ud2b8 \ud06c\uae30\ub098 width, height \ub4f1\uc758 \ud06c\uae30\ub97c \uc9c0\uc815\ud560 \ub54c \ub2e4\uc591\ud55c \ub2e8\uc704\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. (pt, px, em, ex, %) \ub300\ubd80\ubd84\uc758 \ube0c\ub77c\uc6b0\uc800\ub294 \ub2e8\uc704\ub97c \uc0ac\uc6a9\ud558\uc9c0 \uc54a\uc73c\uba74 \uc790\ub3d9\uc73c\ub85c px\ub2e8\uc704(\ubaa8\ub2c8\ud130\uc758 \ud53d\uc140)\ub85c \uc778\uc2dd\ud558\uc5ec \ub80c\ub354\ub9c1\uc744 \ud558\uac8c \ub418\uc9c0\ub9cc, \ud604\uc7ac \ud45c\uc900\uc740 \ub2e8\uc704\ub97c \ud56d\uc0c1 \uba85\uc2dc\ud574\uc8fc\ub294 \uac83\uc785\ub2c8\ub2e4. (0 \uc81c\uc678) \ub300\ubd80\ubd84 HTML \uac1c\ubc1c \uc2dc\uc5d0\ub294 px \ub2e8\uc704\ub97c \uc0ac\uc6a9\ud558\uace0 \ud3f0\ud2b8 \ud06c\uae30\uc5d0\ub294 pt, px \ub2e8\uc704\ub97c \ud63c\uc6a9\ud558\uc5ec \uc0ac\uc6a9\ud558\uace0\ub294 \ud558\ub294\ub370, [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":802,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[44,55,56],"class_list":["post-92","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html-css","tag-css-","tag-em","tag-em-calcurator"],"_links":{"self":[{"href":"https:\/\/blog.neue.nz\/index.php?rest_route=\/wp\/v2\/posts\/92","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.neue.nz\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.neue.nz\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.neue.nz\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.neue.nz\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=92"}],"version-history":[{"count":0,"href":"https:\/\/blog.neue.nz\/index.php?rest_route=\/wp\/v2\/posts\/92\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.neue.nz\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=92"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.neue.nz\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=92"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.neue.nz\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=92"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}