{"id":5257,"date":"2018-06-11T11:29:13","date_gmt":"2018-06-11T02:29:13","guid":{"rendered":"http:\/\/www.gisdeveloper.co.kr\/?p=5257"},"modified":"2020-05-28T13:51:14","modified_gmt":"2020-05-28T04:51:14","slug":"div-%ec%95%88%ec%9d%98-img%ec%97%90-inner-shadow-%ec%a0%81%ec%9a%a9%ed%95%98%ea%b8%b0","status":"publish","type":"post","link":"http:\/\/www.gisdeveloper.co.kr\/?p=5257","title":{"rendered":"div \uc548\uc758 img\uc5d0 Inner Shadow \uc801\uc6a9\ud558\uae30"},"content":{"rendered":"<p>\uc544\ub798\uc640 \uac19\uc740 DOM \uacc4\uce35\uc774 \uc788\ub2e4\uace0 \ud558\uc790.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">\r\n<div>\r\n    <img src='...'><\/img>\r\n<\/div>\r\n<\/pre>\n<p>\uc704\uc758 div\uc5d0 \uc544\ub798\uc640 \uac19\uc740 \uc2a4\ud0c0\uc77c\uc744 \uc801\uc6a9\ud574 \uc548\ucabd \uadf8\ub9bc\uc790(Inner Shadow) \ud6a8\uacfc\ub97c \ub123\uace0\uc790 \ud55c\ub2e4\uba74..<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">\r\ndiv {\r\n    box-shadow: rgba(0, 0, 0, 0.5) 3px 3px 10px inset;\r\n}\r\n<\/pre>\n<p>div \uc694\uc18c\uc758 \uc790\uc2dd\uc778 img\uc5d0 \ubd80\ubaa8\uc778 \uadf8\ub9bc\uc790 \ud6a8\uacfc\uac00 \ud45c\uc2dc\ub418\uc5b4\uc57c \ud560 \uac83\uc774\ub77c\uace0 \uae30\ub300\ud588\uc9c0\ub9cc, \ubd80\ubaa8\uc778 div\uc758 \uadf8\ub9bc\uc790\uac00 \uc790\uc2dd\uc778 img\uc5d0 \uac00\ub824\uc838 \uc544\ub798\uc640 \uac19\uc740 \uacb0\uacfc\ub9cc\uc744 \ubcfc \uc218 \uc788\ub2e4.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.gisdeveloper.co.kr\/wp-content\/uploads\/2018\/06\/inner-shadow1.png\" alt=\"\" width=\"1089\" height=\"783\" class=\"aligncenter size-full wp-image-5260\" \/><\/p>\n<p>\uadf8\ub807\ub2e4\uba74 \uc790\uc2dd\uc778 img\uc5d0 \uc758\ud574 \uac00\ub824\uc9c4 \ubd80\ubaa8\uc758 \uadf8\ub9bc\uc790\ub97c \ub4e4\uc5b4\ub0b4\uae30 \uc704\ud574\uc11c \uc5b4\ub5bb\uac8c \ud574\uc57c\ud560\uae4c? \ubd80\ubaa8\uc758 \uadf8\ub9bc\uc790 \uc5ed\uc2dc DOM \uacc4\uce35\uc801\uc73c\ub85c \ubcf4\uba74 \ub610 \ud558\ub098\uc758 \uacf5\uac1c\ub418\uc9c0 \uc54a\uc740 DOM \uc694\uc18c\uc774\ub2e4. \uc774 \uadf8\ub9bc\uc790 DOM \uc694\uc18c\uac00 img\uc5d0 \uac00\ub824\uc9c0\ubbc0\ub85c \uc774 img\uc758 z-index\uc758 \uac12\uacfc z-index \uc18d\uc131\uac12\uc774 \uc601\ud5a5\uc744 \ubc1b\ub3c4\ub85d \ud558\uae30 \uc704\ud574 position \uc18d\uc131\uc744 relative\ub098 absolute\ub85c \uc9c0\uc815\ud558\uba74 \ub418\ub294\ub370, \uc544\ub798\uc640 \uac19\ub2e4. <\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">\r\nimg {\r\n    position: relative;\r\n    z-index: -1;\r\n}\r\n<\/pre>\n<p>\uc774\uc81c \uadf8 \uacb0\uacfc\ub97c \ubcf4\uba74, div \uc694\uc18c\uc5d0 \uc548\ucabd \uadf8\ub9bc\uc790 \ud6a8\uacfc\uac00 \ubc18\uc601\ub418\uc5b4, \uc880\ub354 \uc785\uccb4\uc801\uc73c\ub85c \uc774\ubbf8\uc9c0\uac00 \ud45c\ud604\ub418\ub294 \uac83\uc744 \ud655\uc778\ud560 \uc218 \uc788\ub2e4.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.gisdeveloper.co.kr\/wp-content\/uploads\/2018\/06\/inner-shadow3.png\" alt=\"\" width=\"1095\" height=\"777\" class=\"aligncenter size-full wp-image-5266\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\uc544\ub798\uc640 \uac19\uc740 DOM \uacc4\uce35\uc774 \uc788\ub2e4\uace0 \ud558\uc790. \uc704\uc758 div\uc5d0 \uc544\ub798\uc640 \uac19\uc740 \uc2a4\ud0c0\uc77c\uc744 \uc801\uc6a9\ud574 \uc548\ucabd \uadf8\ub9bc\uc790(Inner Shadow) \ud6a8\uacfc\ub97c \ub123\uace0\uc790 \ud55c\ub2e4\uba74.. div { box-shadow: rgba(0, 0, 0, 0.5) 3px 3px 10px inset; } div \uc694\uc18c\uc758 \uc790\uc2dd\uc778 img\uc5d0 \ubd80\ubaa8\uc778 \uadf8\ub9bc\uc790 \ud6a8\uacfc\uac00 \ud45c\uc2dc\ub418\uc5b4\uc57c \ud560 \uac83\uc774\ub77c\uace0 \uae30\ub300\ud588\uc9c0\ub9cc, \ubd80\ubaa8\uc778 div\uc758 \uadf8\ub9bc\uc790\uac00 \uc790\uc2dd\uc778 img\uc5d0 \uac00\ub824\uc838 \uc544\ub798\uc640 \uac19\uc740 \uacb0\uacfc\ub9cc\uc744 \ubcfc \uc218 \uc788\ub2e4. \uadf8\ub807\ub2e4\uba74 \uc790\uc2dd\uc778 &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/www.gisdeveloper.co.kr\/?p=5257\" class=\"more-link\">\ub354 \ubcf4\uae30<span class=\"screen-reader-text\"> &#8220;div \uc548\uc758 img\uc5d0 Inner Shadow \uc801\uc6a9\ud558\uae30&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[105],"tags":[],"class_list":["post-5257","post","type-post","status-publish","format-standard","hentry","category-html5"],"_links":{"self":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/5257","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5257"}],"version-history":[{"count":9,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/5257\/revisions"}],"predecessor-version":[{"id":9601,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/5257\/revisions\/9601"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5257"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=5257"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=5257"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}