{"id":661,"date":"2016-07-22T11:02:52","date_gmt":"2016-07-22T20:02:52","guid":{"rendered":"\/blog\/?p=661"},"modified":"2023-09-21T09:37:58","modified_gmt":"2023-09-21T00:37:58","slug":"css-%ec%9e%90%ec%a3%bc%ec%93%b0%eb%8a%94-%ec%86%8d%ec%84%b1-%ec%9a%94%ec%95%bd-%ec%a0%95%eb%a6%ac","status":"publish","type":"post","link":"https:\/\/hasu0707.duckdns.org\/blog\/?p=661","title":{"rendered":"[CSS] \uc790\uc8fc\uc4f0\ub294 \uc18d\uc131 \uc694\uc57d \uc815\ub9ac"},"content":{"rendered":"\n

\ucd9c\ucc98 : <\/span>http:\/\/durst.tistory.com\/94<\/span><\/a><\/p>\r\n


<\/p>\r\n

\u25a0 Box Model<\/span><\/strong>
<\/p>\r\n


<\/p>\r\n

width<\/span> <\/span><\/strong>(\ub108\ube44)<\/span><\/p>\r\n

width: 250px;<\/span><\/p>\r\n


<\/p>\r\n

height<\/span><\/strong><\/span> (\ub192\uc774)<\/span><\/p>\r\n

height: 100px;<\/span><\/p>\r\n


<\/p>\r\n

border<\/span><\/strong><\/span> (\uacbd\uacc4\uc120)<\/span><\/p>\r\n

border: 5px solid #6374AB;<\/span><\/p>\r\n

border: 5px solid gray;<\/span><\/p>\r\n


<\/p>\r\n


<\/p>\r\n

margin<\/span><\/strong><\/span><\/p>\r\n

\ubc29\ubc951)    margin : 10px  20px  30px  40px ;    (\uc0c1\/ \uc6b0\/ \ud558\/ \uc88c)<\/span><\/p>\r\n

\ubc29\ubc952)    margin : 10px  20px ;    (\uc0c1=\ud558\/ \uc6b0=\uc88c)<\/span><\/p>\r\n

\ubc29\ubc953)    margin : 10px ;        (\uc0c1=\uc6b0=\ud558=\uc88c)<\/span><\/p>\r\n

\ubc29\ubc954)    margin-top: 10px;    margin-right: 20px;    margin-bottom: 30px;    margin-left: 40px;<\/span><\/p>\r\n


<\/p>\r\n

padding<\/span><\/strong><\/p>\r\n

\ubc29\ubc951)    padding : 10px  20px  30px  40px ;    (\uc0c1\/ \uc6b0\/ \ud558\/ \uc88c)<\/span><\/p>\r\n

\ubc29\ubc952)    padding : 10px  20px ;    (\uc0c1=\ud558\/ \uc6b0=\uc88c)<\/span><\/p>\r\n

\ubc29\ubc953)    padding : 10px ;        (\uc0c1=\uc6b0=\ud558=\uc88c)<\/span><\/p>\r\n

\ubc29\ubc954)    padding-top: 10px;    padding-right: 20px;    padding-bottom: 30px;    padding-left: 40px;<\/span><\/p>\r\n


<\/p>\r\n

\"IC108558.gif\"\r\n<\/span><\/p>\r\n


<\/p>\r\n\r\n<\/span>

display <\/span><\/strong>
<\/p>\r\n

inline<\/span> (\uc904\ubc14\uafc8 \uc5c6\uc774 \ub098\ub780\ud788)<\/span><\/p>\r\n

block<\/span> (\uc55e\ub4a4\ub85c \uc904\ubc14\uafc8 \uc788\uc74c)<\/span><\/p>\r\n

inline-block<\/span> (\ube14\ub7ed\uc744 \uad6c\uc131\ud574\uc11c \uc904\ubc14\uafc8 \uc5c6\uc774 \ub098\ub780\ud788)<\/span><\/p>\r\n

none<\/span> (\uacf5\uac04\uc5c6\uc74c,\uc548\ubcf4\uc784)<\/span><\/p>\r\n


<\/p>\r\n

position<\/span><\/p>\r\n

static relative absolute fixed<\/span><\/p>\r\n


<\/p>\r\n

float<\/span><\/p>\r\n

none left right <\/span><\/p>\r\n


<\/p>\r\n

clear<\/span><\/p>\r\n

none left right both<\/span><\/p>\r\n


<\/p>\r\n


<\/p>\r\n

\u25a0 <\/span><\/strong>\ubc30\uacbd\uc758 \uc18d\uc131 \/* background *\/ <\/span><\/strong><\/p>\r\n


<\/p>\r\n


<\/p>\r\n

background <\/span>(\ubc30\uacbd) : \/\uc21c\uc11c\/ color image repeat attachment position <\/span><\/p>\r\n

\uc608) background: #edf6ff url(body.png) repeat-x 0 0;<\/span><\/p>\r\n


<\/p>\r\n

background-color<\/span> (\ubc30\uacbd\uc0c9 \uc9c0\uc815)<\/span><\/p>\r\n


<\/p>\r\n


<\/p>\r\n

background-image<\/span> (\ubc30\uacbd \uc774\ubbf8\uc9c0 \uc9c0\uc815)<\/span><\/p>\r\n

URL(<\/span> \ubc30\uacbd \uc774\ubbf8\uc9c0 \ud30c\uc77c \uc704\uce58)<\/span><\/p>\r\n


<\/p>\r\n

background-repeat<\/span> (\ubc30\uacbd \uc774\ubbf8\uc9c0 \ubc18\ubcf5 \uc5ec\ubd80)<\/span><\/p>\r\n

repeat, repeat-x, repeat-y, no-repeat<\/span><\/p>\r\n


<\/p>\r\n

background-attachment<\/span> (\ubc30\uacbd \uc774\ubbf8\uc9c0 \uc2a4\ud06c\ub864 \uc5ec\ubd80)<\/span><\/p>\r\n

scroll, fixed<\/span><\/p>\r\n


<\/p>\r\n

background-position<\/span> (\ubc30\uacbd \uc774\ubbf8\uc9c0 \uc704\uce58 \uc9c0\uc815)<\/span><\/p>\r\n

top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right<\/span><\/p>\r\n


<\/p>\r\n


<\/p>\r\n

\u25a0 <\/span><\/strong>\ud14d\uc2a4\ud2b8 \uc18d\uc131 <\/span><\/strong><\/p>\r\n


<\/p>\r\n

color<\/span><\/strong> (\ud14d\uc2a4\ud2b8 \uc0c9\uc0c1) :<\/span><\/p>\r\n


<\/p>\r\n

direction<\/span> (\ud14d\uc2a4\ud2b8 \ubc29\ud5a5) :<\/span><\/p>\r\n


<\/p>\r\n

line-height<\/span><\/strong><\/span> (\ud14d\uc2a4\ud2b8 \uc904\uac04\uaca9)<\/span><\/p>\r\n

\uc22b\uc790\uac12(\ubc30\uc218), \uae38\uc774(px, em), \ubc31\ubd84\uc728(%) \ucc38\uace0\ub85c \uc22b\uc790 1.8 = \ubc31\ubd84\uc728 180%<\/span><\/p>\r\n


<\/p>\r\n

letter-spacing<\/span> (\ud14d\uc2a4\ud2b8 \uae00\uc790\uac04\uaca9)<\/span><\/p>\r\n

\uae30\ubcf8\uac12\uc740 0, \ubcf4\ud1b5 \ub2e8\uc704 px, em\uc73c\ub85c \ud45c\uc2dc, \ub9c8\uc774\ub108\uc2a4\uac12\uc774\uba74 \uac04\uaca9\uc744 \uc881\ud788\ub294 \uacb0\uacfc<\/span><\/p>\r\n


<\/p>\r\n

text-align<\/span> (\ud14d\uc2a4\ud2b8 \uc815\ub82c) :<\/span><\/p>\r\n


<\/p>\r\n

text-decoration<\/span><\/strong><\/span> (\ud14d\uc2a4\ud2b8 \uc7a5\uc2dd)<\/span><\/p>\r\n

none, underline<\/span>, overline, line-through, blink<\/span><\/p>\r\n


<\/p>\r\n

text-indent<\/span> (\ud14d\uc2a4\ud2b8 \ub4e4\uc5ec\uc4f0\uae30)<\/span><\/p>\r\n

\uae30\ubcf8\uac12\uc740 0, \ubcf4\ud1b5 \ub2e8\uc704 px, em\uc73c\ub85c \ud45c\uc2dc,<\/span><\/p>\r\n


<\/p>\r\n

text-transform<\/span>(\ud14d\uc2a4\ud2b8 \ub300\uc18c\ubb38\uc790 \uc9c0\uc815)<\/span><\/p>\r\n

none(\uadf8\ub300\ub85c), capitalize(\uccab\ubb38\uc790\ub9cc \ub300\ubb38\uc790), uppercase(\ubaa8\ub450 \ub300\ubb38\uc790), lowercase(\ubaa8\ub450 \uc18c\ubb38\uc790)\/p><\/span><\/p>\r\n


<\/p>\r\n

word-spacing<\/span> (\ud14d\uc2a4\ud2b8 \ub2e8\uc5b4 \uac04\uaca9) <\/span><\/p>\r\n


<\/p>\r\n


<\/p>\r\n


<\/p>\r\n

\u25a0 <\/span><\/strong>\ud14d\uc2a4\ud2b8 \ud3f0\ud2b8 \uc18d\uc131<\/span><\/strong><\/p>\r\n


<\/p>\r\n

font<\/span><\/strong><\/span> (\ud3f0\ud2b8) : \/\uc21c\uc11c\/ font-style  font-weight  font-size  font-family<\/span><\/p>\r\n

\uc608) font: italic bold 17px Arial, \"Times New Roman\", Sans-serif;<\/span><\/p>\r\n


<\/p>\r\n

font-style<\/span> (\ud3f0\ud2b8 \uc2a4\ud0c0\uc77c)<\/span><\/p>\r\n

normal<\/span> (\uc815\uc0c1), <\/span>italic<\/span> (\uc774\ud0e4\ub9ad\uccb4)<\/span><\/p>\r\n


<\/p>\r\n

font-weight<\/span> (\ud3f0\ud2b8 \uad75\uae30)<\/span><\/p>\r\n

normal<\/span>, <\/span>bold<\/span>, bolder, lighter (\ub450\uaecd\uac8c\/\ub354 \ub450\uaecd\uac8c\/\uac00\ub298\uac8c)<\/span><\/p>\r\n


<\/p>\r\n

font-size<\/span> (\ud3f0\ud2b8 \ud06c\uae30)<\/span><\/p>\r\n

\ub2e8\uc704\ub294 px (\ud53d\uc140), em \uc73c\ub85c \ud45c\uc2dc<\/span><\/p>\r\n


<\/p>\r\n

font-family<\/span> (\ud3f0\ud2b8 \uae00\uaf34)<\/span><\/p>\r\n

\uad74\ub9bc, \ub3cb\uc6c0, \uad81\uc11c, .... \ub4f1\ub4f1<\/span><\/p>\r\n


<\/p>\r\n


<\/p>\r\n

background <\/span>(\ubc30\uacbd) : \/\uc21c\uc11c\/ color image repeat attachment position <\/span><\/p>\r\n

\uc608) background: #edf6ff url(body.png) repeat-x 0 0;<\/span><\/p>\r\n


<\/p>\r\n

background-color<\/span> (\ubc30\uacbd\uc0c9 \uc9c0\uc815)<\/span><\/p>\r\n


<\/p>\r\n


<\/p>\r\n

background-image<\/span> (\ubc30\uacbd \uc774\ubbf8\uc9c0 \uc9c0\uc815)<\/span><\/p>\r\n

URL(<\/span> \ubc30\uacbd \uc774\ubbf8\uc9c0 \ud30c\uc77c \uc704\uce58)<\/span><\/p>\r\n


<\/p>\r\n

background-repeat<\/span> (\ubc30\uacbd \uc774\ubbf8\uc9c0 \ubc18\ubcf5 \uc5ec\ubd80)<\/span><\/p>\r\n

repeat, repeat-x, repeat-y, no-repeat<\/span><\/p>\r\n


<\/p>\r\n

background-attachment<\/span> (\ubc30\uacbd \uc774\ubbf8\uc9c0 \uc2a4\ud06c\ub864 \uc5ec\ubd80)<\/span><\/p>\r\n

scroll, fixed<\/span><\/p>\r\n


<\/p>\r\n

background-position<\/span> (\ubc30\uacbd \uc774\ubbf8\uc9c0 \uc704\uce58 \uc9c0\uc815)<\/span><\/p>\r\n

top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right<\/span><\/p>\r\n


<\/div>


<\/p>\r\n

\u25a0 <\/span><\/strong>\uae30\ud0c0 \uc18d\uc131<\/span><\/strong><\/p>\r\n


<\/p>\r\n

cursor<\/span> (\ucee4\uc11c\ubaa8\uc591) <\/span><\/p>\r\n

pointer (\uc190\uac00\ub77d\ubaa8\uc591)<\/span><\/p>\r\n


<\/p>\r\n


<\/p>\r\n

\u25a0 <\/span><\/strong>\ub9ac\uc2a4\ud2b8 \uc18d\uc131 <\/span><\/strong>\/* ol, ul  *\/<\/span><\/p>\r\n


<\/p>\r\n


<\/p>\r\n

list-style<\/span> <\/span><\/p>\r\n

disc<\/span> (\uac80\uc740\ub3d9\uadf8\ub77c\ubbf8), circle (\ube48\ub3d9\uadf8\ub77c\ubbf8), square (\ub124\ubaa8), <\/span>none<\/span> (\uc5c6\uc74c) \/* \uc21c\uc11c\uc5c6\ub294 \ub9ac\uc2a4\ud2b8\uc758 \uacbd\uc6b0 *\/<\/span><\/p>\r\n

decimal , lower-roman, upper-roman, lower-alpha, upper-alpha     \/* \uc21c\uc11c\uc788\ub294 \ub9ac\uc2a4\ud2b8\uc758 \uacbd\uc6b0 *\/<\/span><\/p>\r\n


<\/p>\r\n

list-style-image<\/span><\/p>\r\n

URL (\ub9c8\ucee4 \uc774\ubbf8\uc9c0 \ud30c\uc77c \uc704\uce58)<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

\ucd9c\ucc98 : http:\/\/durst.tistory.com\/94 \u25a0 Box Model width (\ub108\ube44) width: 250px; height (\ub192\uc774) height: 100px; border (\uacbd\uacc4\uc120) border: 5px solid #6374AB; border: 5px solid gray; margin \ubc29\ubc951)    margin : 10px  20px  30px  40px ;    (\uc0c1\/ \uc6b0\/ \ud558\/ \uc88c) \ubc29\ubc952)    margin : 10px  20px ;    (\uc0c1=\ud558\/ \uc6b0=\uc88c) \ubc29\ubc953)    margin : 10px ;        (\uc0c1=\uc6b0=\ud558=\uc88c) \ubc29\ubc954)    […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[23],"tags":[],"class_list":["post-661","post","type-post","status-publish","format-standard","hentry","category-development_web"],"_links":{"self":[{"href":"https:\/\/hasu0707.duckdns.org\/blog\/index.php?rest_route=\/wp\/v2\/posts\/661","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hasu0707.duckdns.org\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hasu0707.duckdns.org\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hasu0707.duckdns.org\/blog\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/hasu0707.duckdns.org\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=661"}],"version-history":[{"count":0,"href":"https:\/\/hasu0707.duckdns.org\/blog\/index.php?rest_route=\/wp\/v2\/posts\/661\/revisions"}],"wp:attachment":[{"href":"https:\/\/hasu0707.duckdns.org\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=661"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hasu0707.duckdns.org\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=661"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hasu0707.duckdns.org\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=661"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}