{"id":448,"date":"2012-01-26T07:28:49","date_gmt":"2012-01-26T07:28:49","guid":{"rendered":"http:\/\/brain.dailyon.net\/?p=448"},"modified":"2012-01-26T07:28:49","modified_gmt":"2012-01-26T07:28:49","slug":"css-overflow-%ec%86%8d%ec%84%b1-clip-%ec%86%8d%ec%84%b1-visibility-%ec%86%8d%ec%84%b1","status":"publish","type":"post","link":"https:\/\/blog.goorigo.com\/?p=448","title":{"rendered":"CSS : overflow \uc18d\uc131, clip \uc18d\uc131, visibility \uc18d\uc131"},"content":{"rendered":"<h3>\n&#8211; \uc798\ub77c\ub0b4\ub294\ubc29\ubc95 (overflow \uc18d\uc131)<\/h3>\n<h2><\/h2>\n<ul>\n<li>\uc18d\uc131 : overflow<\/li>\n<li>\uac12 : visible, hidden, scroll, auto, inherit<\/li>\n<li>\uae30\ubcf8\uac12 : visible<\/li>\n<li>\uc801\uc6a9\ub300\uc0c1 : \ube14\ub85d \ub808\ubca8 \uc694\uc18c, \uce58\ud658 \uc694\uc18c<\/li>\n<\/ul>\n<h2>\noverfloe \uc18d\uc131\uc740 \ube14\ub85d \ub808\ubca8 \uc694\uc18c \ub610\ub294 \uce58\ud658 \uc694\uc18c \ub0b4\uc6a9\uc774 \ubc15\uc2a4\uc5d0\uc11c \ud280\uc5b4\ub098\uc654\uc744\ub54c \ud280\uc5b4\ub098\uc628 \ubd80\ubd84\uc744 \uc5b4\ub5bb\uac8c \ud45c\uc2dc\ud560\uc9c0\ub97c \uc815\ud55c\ub2e4.<\/p>\n<p>\uc18d\uc131 \uac12\uc5d0 \ub300\ud55c \uc758\ubbf8\ub294 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n<p><strong>visible?<\/strong>: \ubc15\uc2a4 \ubc16\uc73c\ub85c \ub098\uac00\ub294 \ub0b4\uc6a9\uc744 \uc790\ub974\uc9c0 \uc54a\ub294\ub2e4. \ub0b4\uc6a9\uc740 \ubc15\uc2a4\uc758 \ubc14\uae65\ucabd\uc5d0\ub3c4 \ud45c\uc2dc\ub41c\ub2e4. \uc774\uac12\uc774 \uc9c0\uc815\ub418\uc5c8\uc5b4\ub3c4 \ube0c\ub77c\uc6b0\uc800\uc758 \ud45c\uc2dc\uc601\uc5ed\uc5d0 \uc81c\uc57d\uc774 \uc788\uc5b4 \ub0b4\uc6a9\uc774 \uc798\ub9b4 \uac00\ub2a5\uc131\uc774 \uc788\ub2e4.<\/p>\n<p><strong>hidden?<\/strong>: \ubc15\uc2a4 \ubc16\uc73c\ub85c \ub098\uac00\ub294 \ub0b4\uc6a9\uc744 \uc798\ub77c\ub0b8\ub2e4. \ubc15\uc2a4\uc758 \uc548\ucabd\uc5d0\uc11c\ub9cc \ub0b4\uc6a9\uc744 \ud45c\uc2dc\ud558\uace0 \ube0c\ub77c\uc6b0\uc800\ub294 \ud574\ub2f9 \uc601\uc5ed\uc5d0\uc11c \uc2a4\ud06c\ub864\uc744 \uc81c\uacf5\ud558\uac8c \ub418\uc5b4 \uc788\uc9c0 \uc54a\uae30 \ub54c\ubb38\uc5d0 \uc0ac\uc6a9\uc790\ub294 \ubc15\uc2a4 \ubc14\uae65\ucabd\uc73c\ub85c \ud280\uc5b4\ub098\uc628 \ubd80\ubd84\uc744 \ubcfc \uc218 \uc5c6\ub2e4.(\ube0c\ub77c\uc6b0\uc800\uc5d0 \ub530\ub77c \ubc15\uc2a4\uc758 \uc601\uc5ed\uc5d0 \ucee4\uc11c\ub97c \ub4dc\ub798\uadf8\ud558\uba74 \ud280\uc5b4\ub098\uc628 \ubd80\ubd84\uc744 \ubcfc \uc218 \uc788\ub2e4.)<\/p>\n<p><strong>scroll?<\/strong>: \ubc15\uc2a4 \ubc16\uc73c\ub85c \ub098\uac00\ub294 \ub0b4\uc6a9\uc744 \uc798\ub77c\ub0b8\ub2e4. \ube0c\ub77c\uc6b0\uc800\ub294 \ud574\ub2f9 \uc601\uc5ed\uc5d0 \uc790\ub3d9\uc73c\ub85c \uc2a4\ud06c\ub864\uc744 \uc81c\uacf5\ud558\uc5ec \uc0ac\uc6a9\uc790\uac00 \ubc15\uc2a4\uc758 \ubc14\uae65\ucabd\uc5d0 \ud280\uc5b4\ub098\uc624\ub294 \ubd80\ubd84\uc744 \ubcfc \uc218 \uc788\ub2e4. \ucd9c\ub825 \ub9e4\uccb4\uac00 \uc778\uc1c4 \ub9e4\uccb4\ub77c\uba74 \ud280\uc5b4\ub098\uc628 \ubd80\ubd84\ub3c4 \ucd9c\ub825\ud558\uac8c \ub418\uc5b4 \uc788\ub2e4.<\/p>\n<p><strong>auto?<\/strong>: \ube0c\ub77c\uc6b0\uc800\uc5d0 \uc758\uc874\ud558\uc5ec \uc720\ub3d9\uc801\uc73c\ub85c \ubcf4\uc778\ub2e4. \ube0c\ub77c\uc6b0\uc800\ub294 \ud574\ub2f9\uc5ed\uc601\uc5d0 \uc790\ub3d9\uc73c\ub85c \uc2a4\ud06c\ub864\uc744 \uc81c\uacf5\ud558\uac8c \ub418\uc5b4 \uc788\ub2e4.<br \/>\n<textarea name=\"code\"><\/textarea><\/h2>\n<p>\uc608\ubb38 : overflow \uc18d\uc131\uc740 \ub0b4\uc6a9\uc774 \ud280\uc5b4\ub098\uc62c\uacbd\uc6b0 \uc5b4\ub5bb\uac8c \ucc98\ub9ac\ud560 \uac83\uc778\uc9c0\ub97c \uc9c0\uc815\ud574\uc8fc\ub294 \uc18d\uc131\uc785\ub2c8\ub2e4. \ub0b4\uc6a9\uc744 \uc798\ub77c\ub0bc\uac83\uc785\ub2c8\uae4c? \ubcf4\uc5ec\uc904 \uac83\uc785\ub2c8\uae4c?<\/p>\n<h2><\/h2>\n<div>\n<p>overflow:scroll<\/p>\n<div>overflow \uc18d\uc131\uc740 \ub0b4\uc6a9\uc774 \ud280\uc5b4\ub098\uc62c\uacbd\uc6b0 \uc5b4\ub5bb\uac8c \ucc98\ub9ac\ud560 \uac83\uc778\uc9c0\ub97c \uc9c0\uc815\ud574\uc8fc\ub294 \uc18d\uc131\uc785\ub2c8\ub2e4. \ub0b4\uc6a9\uc744 \uc798\ub77c\ub0bc\uac83\uc785\ub2c8\uae4c? \ubcf4\uc5ec\uc904 \uac83\uc785\ub2c8\uae4c?<\/div>\n<\/div>\n<div>\n<p>overflow:hidden<\/p>\n<div>overflow \uc18d\uc131\uc740 \ub0b4\uc6a9\uc774 \ud280\uc5b4\ub098\uc62c\uacbd\uc6b0 \uc5b4\ub5bb\uac8c \ucc98\ub9ac\ud560 \uac83\uc778\uc9c0\ub97c \uc9c0\uc815\ud574\uc8fc\ub294 \uc18d\uc131\uc785\ub2c8\ub2e4. \ub0b4\uc6a9\uc744 \uc798\ub77c\ub0bc\uac83\uc785\ub2c8\uae4c? \ubcf4\uc5ec\uc904 \uac83\uc785\ub2c8\uae4c?<\/div>\n<\/div>\n<h2><\/h2>\n<h3>&#8211; \ud074\ub9ac\ud551 \uc601\uc5ed(clip \uc18d\uc131)<\/h3>\n<h2><\/h2>\n<ul>\n<li>\uc18d\uc131 : clip<\/li>\n<li>\uac12 : \uc0ac\uac01\ud615, auto, inherit<\/li>\n<li>\uae30\ubcf8\uac12 : auto<\/li>\n<li>\uc801\uc6a9\ub300\uc0c1 : \ube14\ub85d \ub808\ubca8 \uc694\uc18c, \uce58\ud658 \uc694\uc18c<\/li>\n<\/ul>\n<h2>\n\ud45c\uc2dc\ub41c \uc694\uc18c\uc758 \ub0b4\uc6a9 \uc911 \uc0ac\uc6a9\uc790\uc758 \ub208\uc5d0 \ubcf4\uc774\ub294 \ubc94\uc704\ub97c \ud074\ub9ac\ud551 \uc601\uc5ed \uc774\ub77c \ud55c\ub2e4. clip \uc18d\uc131\uc744 \uc774\uc6a9\ud574\uc11c \uc0ac\uc6a9\uc790\uc758 \uac00\uc2dc\ubc94\uc704\ub97c \uc9c0\uc815\ud560 \uc218\uac00 \uc788\ub2e4. \ud55c\ub9c8\ub514\ub85c \uc598\uae30\ud558\uc790\uba74 \uc790\uccb4 \ub9c8\uc2a4\ud06c \ud6a8\uacfc\uc774\ub2e4.<\/p>\n<p>\uc18d\uc131 \uac12\uc5d0 \ub300\ud55c \uc758\ubbf8\ub294 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n<p><strong>\uc0ac\uac01\ud615?<\/strong>: \ud074\ub9ac\ud551 \uc601\uc5ed\uc744 \ubc15\uc2a4\uc758 \ub124 \ubcc0\uc5d0\uc11c\uc758 \uac70\ub9ac\ub85c \uc9c0\uc815\ud55c\ub2e4. &#8216;rect(top, right, bottom, left)&#8217; \uc5b4\ub290 \uac12\ub3c4 \uc0dd\ub7b5\uc740 \ubd88\uac00\ub2a5\ud558\uace0 \ub124 \uac12\uc5d0\ub294 \uae38\uc774, auto, \ub9c8\uc774\ub108\uc2a4 \uac12\uc744 \uc9c0\uc815\ud574\ub3c4 \uc88b\ub2e4. auto\ub294 \ubc15\uc2a4\uc758 \ubcc0\uacfc \ub3d9\uc77c\ud558\ub2e4\ub294 \uc758\ubbf8\uc774\uba70 0 \uc774\ub77c\uace0 \uc9c0\uc815\ud55c \uac83\uacfc \uac19\ub2e4.<\/p>\n<p><strong>auto?<\/strong>: \ud074\ub9ac\ud551 \uc601\uc5ed\uc740 \ubc15\uc2a4\uc640 \uac19\uc740 \ud06c\uae30, \uc704\uce58\uac00 \ub41c\ub2e4.<\/p>\n<p>\uc544\uc9c1\uc740 \uc0ac\uac01\ud615\ub9cc \uc9c0\uc6d0\ub418\uace0, \ubaa8\ub4e0 \uac12\uc774 \uc0c1\ub2e8\uacfc \uc88c\uce21\uc744 \uae30\uc900\uc73c\ub85c \ud55c\ub2e4. position\uc18d\uc131\uc774 absolute\uc774\uac70\ub098 fixed\uc77c\ub54c \uc801\uc6a9\ub418\uc9c0\ub9cc, ie6\uc5d0\uc11c\ub294 fixed\uac00 \uc9c0\uc6d0\ub418\uc9c0 \uc54a\uc73c\ubbc0\ub85c position\uc740 absolute\ub85c \uc9c0\uc815\ud574\uc57c\ud558\uace0, \ub610, \uac12\ub4e4 \uc0ac\uc774\uc5d0 \ucf64\ub9c8\ub97c \ub123\ub294 \uac8c \uc2a4\ud399\uc774\uc9c0\ub9cc, ie6\uc5d0\uc11c\ub294 \ucf64\ub9c8\ub97c \uc0ac\uc6a9\ud558\uba74 \uc801\uc6a9\uc774 \ub418\uc9c0 \uc54a\ub294\ub2e4.<br \/>\n<textarea name=\"code\"><\/textarea><\/h2>\n<h3>&#8211; \uac00\uc2dc, \ube44\uac00\uc2dc(visibility \uc18d\uc131)<\/h3>\n<h2><\/h2>\n<ul>\n<li>\uc18d\uc131 : visibility<\/li>\n<li>\uac12 : visible, hidden, collapse, inherit<\/li>\n<li>\uae30\ubcf8\uac12 : visible<\/li>\n<li>\uc801\uc6a9\ub300\uc0c1 : \ubaa8\ub4e0 \uc694\uc18c<\/li>\n<\/ul>\n<h2>\nvisibility \uc18d\uc131\uc740 \uc694\uc18c\uac00 \uc0dd\uc131\ud558\ub294 \ubc15\uc2a4\uac00 \ubcf4\uc77c\uc9c0 \ubcf4\uc774\uc9c0 \uc54a\uc744\uc9c0\ub97c \uc9c0\uc815\ud560\uc218\uc788\ub2e4.<\/p>\n<p>\uc18d\uc131 \uac12\uc5d0 \ub300\ud55c \uc758\ubbf8\ub294 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n<p><strong>visible?<\/strong>: \ubc15\uc2a4\ub97c \ubcf4\uc774\uac8c \ud55c\ub2e4.<\/p>\n<p><strong>hidden?<\/strong>: \ubc15\uc2a4\ub97c \ubcf4\uc774\uc9c0 \uc54a\uac8c \ud558\uace0 \uc644\uc804\ud788 \ud22c\uba85\ud574\uc9c4\ub2e4. \ub808\uc774\uc544\uc6c3\uc5d0 \uc601\ud5a5\uc744 \ub07c\uce5c\ub2e4.<\/p>\n<p><strong>collapse?<\/strong>: \ud14c\uc774\ube14\uc758 \ud589, \uc5f4, \ud589\uadf8\ub8f9, \uc5f4\uadf8\ub8f9 \uc694\uc18c\uc5d0 \uc9c0\uc815\ud55c \uacbd\uc6b0 \ud574\ub2f9 \ud589\uc774\ub098 \uc5f4\uc744 \ubcf4\uc774\uc9c0 \uc54a\uac8c \ud55c\ub2e4.<\/p>\n<p>\uc5ec\uae30\uc5d0\uc11c visible \uc18d\uc131\uc5d0 hidden \uc774\ub77c\uace0 \uc9c0\uc815\ud558\uba74 display \uc18d\uc131\uc5d0 none \uc774\ub77c\uace0 \uc9c0\uc815 \ud55c \uac83\uacfc \ub2e4\ub974\uac8c \ubc15\uc2a4\ub294 \uc0dd\uc131\ub418\uc5b4 \uc788\uc9c0\ub9cc \ubcf4\uc774\uc9c0 \uc54a\ub294 \uc0c1\ud669\uc774 \ub41c\ub2e4. \uc989 display:none \ub294 \ubc15\uc2a4\uac00 \uc0dd\uc131\ub418\uc9c0 \uc54a\uae30 \ub54c\ubb38\uc5d0 \ub808\uc774\uc544\uc6c3\uc5d0 \uc601\ud5a5\uc744 \ub07c\uce58\uc9c0 \uc54a\ub294 \ubc18\uba74 visible:hidden \ub294 \ubc15\uc2a4\uac00 \uc77c\ub2e8 \uc0dd\uc131\ub41c \ub2e4\uc74c \ud22c\uba85\ud574\uc9c0\ub294 \uc21c\uc11c\ub97c \uac70\uce5c\ub2e4.<br \/>\n<textarea name=\"code\"><\/textarea><\/p>\n<p>[\ucd9c\ucc98] \ub9c8\uc2dc\ucf54 \ud0c0\uce74\ud788\ub85c \uc9c0\uc74c | \uae40\ub300\uc11d \uc62e\uae40, \ub514\uc9c0\ud138\ubbf8\ub514\uc5b4\ub9ac\uc11c\uce58 \ucd9c\ud310, &#8211; \uc6f9\ud45c\uc900 \uad50\uacfc\uc11c &#8211;<\/h2>\n","protected":false},"excerpt":{"rendered":"<p>&#8211; \uc798\ub77c\ub0b4\ub294\ubc29\ubc95 (overflow \uc18d\uc131) \uc18d\uc131 : overflow \uac12 : visible, hidden, scroll, auto, inherit \uae30\ubcf8\uac12 : visible \uc801\uc6a9\ub300\uc0c1 : \ube14\ub85d \ub808\ubca8 \uc694\uc18c, \uce58\ud658 \uc694\uc18c overfloe \uc18d\uc131\uc740 \ube14\ub85d \ub808\ubca8 \uc694\uc18c \ub610\ub294&hellip; <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=\/wp\/v2\/posts\/448"}],"collection":[{"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=448"}],"version-history":[{"count":0,"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=\/wp\/v2\/posts\/448\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=448"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=448"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=448"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}