{"id":731,"date":"2022-05-16T16:16:19","date_gmt":"2022-05-16T07:16:19","guid":{"rendered":"https:\/\/blog.dozzing.kr\/?p=731"},"modified":"2025-10-24T11:37:52","modified_gmt":"2025-10-24T02:37:52","slug":"html-css-position%ea%b3%bc-%ec%a2%8c%ed%91%9c-%eb%a0%88%ec%9d%b4%ec%95%84%ec%9b%83-%eb%a7%8c%eb%93%a4%ea%b8%b0","status":"publish","type":"post","link":"https:\/\/blog.dozzing.kr\/?p=731","title":{"rendered":"[HTML\/CSS] position\uacfc \uc88c\ud45c \ub808\uc774\uc544\uc6c3 \ub9cc\ub4e4\uae30"},"content":{"rendered":"<h2>\ud83d\udcab position \uc18d\uc131<\/h2>\n<pre><code class=\"language-css line-numbers\">.box {\n  position : static; \/* \uae30\uc900 X (\uc88c\ud45c\uc801\uc6a9 X) *\/\n  position : relative; \/* \ub0b4 \uc6d0\ub798 \uc704\uce58 \uae30\uc900 *\/\n  position : absolute; \/* \ubd80\ubaa8 \uc911 position : relative\ub97c \uac00\uc9c0\uace0 \uc788\ub294 \ubd80\ubaa8 \uae30\uc900 *\/\n  position : fixed; \/* \ube0c\ub77c\uc6b0\uc800 \ucc3d \uae30\uc900 (viewport) *\/\n}\n<\/code><\/pre>\n<p>\uc88c\ud45c \uc18d\uc131\uc744 \uc801\uc6a9\ud560\u00a0<strong>\uae30\uc900\uc810<\/strong>\uc774 \uc5ec\uae30\uc5d0\uc694~! \ub77c\uace0 \uc9c0\uc815\ud574\uc8fc\ub294 \uc5ed\ud560<\/p>\n<p>\u00a0<\/p>\n<h2>\ud83d\udcab \uc88c\ud45c \uc18d\uc131<\/h2>\n<pre><code class=\"language-css line-numbers\">.box {\n  top : 20px;\n  left : 30%;\n}\n<\/code><\/pre>\n<p>top, left, bottom, right \ub77c\ub294 \uc18d\uc131\uc744 \uc0ac\uc6a9\ud558\uba74 \uc694\uc18c\uc758 \uc0c1\ud558\uc88c\uc6b0 \uc704\uce58\ub97c \ubcc0\uacbd \uac00\ub2a5<\/p>\n<p>\u00a0<\/p>\n<h2>\ud83d\udcab <strong>position : absolute \ub97c \uc801\uc6a9\ud55c \uc694\uc18c \uac00\uc6b4\ub370 \uc815\ub82c<\/strong><\/h2>\n<pre><code class=\"language-css line-numbers\">.button {\n  position : absolute; \n  left : 0;\n  right : 0; \n  margin-left : auto;\n  margin-right : auto;\n  width : \uc801\uc808\ud788\n}\n<\/code><\/pre>\n<p>\u00a0<\/p>\n<h2>\ud83d\udcab \uc624\ub298\uc758 \uc219\uc81c : \ubc30\uacbd \uc704\uc5d0 \ud68c\uc0c9 \ubc15\uc2a4\uac00 \uacb9\uce58\uac8c \ub9cc\ub4e4\uae30<\/h2>\n<p><a class=\"wp-editor-md-post-content-link\" href=\"https:\/\/blog.dozzing.kr\/wp-content\/uploads\/2024\/05\/wp_editor_md_2ad681e7c4bc3213413737c434c3ea67.jpg\"><img decoding=\"async\" src=\"https:\/\/blog.dozzing.kr\/wp-content\/uploads\/2024\/05\/wp_editor_md_2ad681e7c4bc3213413737c434c3ea67.jpg\" alt=\"\" \/><\/a><\/p>\n<pre data-language=HTML><code class=\"language-markup line-numbers\">&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n    &lt;meta charset=\"UTF-8\"&gt;\n    &lt;title&gt;Document&lt;\/title&gt;\n    &lt;link href=\"css\/main.css\" rel=\"stylesheet\"&gt;\n    &lt;link href=\"css\/font.css\" rel=\"stylesheet\"&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;div class=\"main-background\"&gt;\n        &lt;h4 class=\"main-title\"&gt;Buy Our Shoes&lt;\/h4&gt;\n        &lt;p&gt;\uc608\uc05c \uc2e0\ubc1c \uc0ac\ub7ec \uc624\uc138\uc694\ud83d\udc95&lt;\/p&gt;\n        &lt;button&gt;\ubcf4\ub7ec\uac00\uae30&lt;\/button&gt;\n        &lt;div class=\"background\"&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n<pre><code class=\"language-css line-numbers\">.main-background{\n    width: 100%;\n    height: 500px;\n    background-image: url(..\/img\/shoes.jpg);\n    background-size: cover;\n    background-repeat: no-repeat;\n    background-position: center;\n    padding: 1px;\n    position: relative;\n}\n\n.main-title{\n    color: white;\n    font-size: 40px;\n    text-align: center;\n    font-family: 'MeongiW';\n}\n\n.main-background p{\n    color: white;\n    font-size: 20px;\n    text-shadow: -2px 0px black, 0px 2px black, 2px 0px black, 0px -2px black;\n    text-align: center;\n    font-family: 'Oneprettynight';\n}\n\n.main-background button{\n    width: 100px;\n    font-size: 500;\n    font-weight: 600;\n    text-align: center;\n    line-height: 50px;\n    color: #FFF;\n    border-radius: 5px;\n    transition: all 0.2s;\n    background: #b3aaee;\n    box-shadow: 0px 5px 0px 0px #68628a;\n    border: none;\n    font-family: 'Oneprettynight';\n    margin-left : 47%;\n}\n\n.main-background button:hover {\n    margin-top: 5px;\n    margin-bottom: 5px;\n    box-shadow: 0px 0px 0px 0px #68628a;\n}\n\n.background{\n    width: 50%;\n    height: 300px;\n    background-color: gray;\n    position: absolute;\n    left : 0;\n    right : 0; \n    margin-left : auto;\n    margin-right : auto;\n    bottom: -100px;\n}\n<\/code><\/pre>\n<h3>\u2b50 \uc5b4\ub824\uc6e0\ub358 \uac83\ub4e4<\/h3>\n<p>\ubc84\ud2bc\uc744 hover \ub97c \uc918\uc11c \ub9c8\uc6b0\uc2a4\ub97c \ubc84\ud2bc\uc5d0 \uc62c\ub9b4 \ub54c\ub9c8\ub2e4 \ud68c\uc0c9 div\uac00 \uac19\uc774 \ub0b4\ub824\uac14\uc5c8\ub2e4<br \/>\n\uba54\uc778 div\uc5d0 <code>position : relative<\/code> \ub97c \ud574\uc8fc\uace0, \ud68c\uc0c9 div\uc5d0 <code>position : absolute<\/code> \ub97c \ud574\uc11c \ud68c\uc0c9 div\ub97c \ub744\uc6cc\uc11c \uac19\uc774 \ub0b4\ub824\uac00\uc9c0 \uc54a\ub3c4\ub85d \ub9cc\ub4e4\uc5c8\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\ud83d\udcab position \uc18d\uc131 .box { position : static; \/* \uae30\uc900 X (\uc88c\ud45c\uc801\uc6a9 X) *\/ position : relative; \/* \ub0b4 \uc6d0\ub798 \uc704\uce58 \uae30\uc900 *\/ position : absolute; \/* \ubd80\ubaa8 \uc911 position : relative\ub97c \uac00\uc9c0\uace0 \uc788\ub294 \ubd80\ubaa8 \uae30\uc900 *\/ position : fixed; \/* \ube0c\ub77c\uc6b0\uc800 \ucc3d \uae30\uc900 (viewport) *\/ } \uc88c\ud45c \uc18d\uc131\uc744 \uc801\uc6a9\ud560\u00a0\uae30\uc900\uc810\uc774 \uc5ec\uae30\uc5d0\uc694~! \ub77c\uace0 \uc9c0\uc815\ud574\uc8fc\ub294 \uc5ed\ud560 \u00a0 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[50,46,33],"tags":[48,17,40,34],"class_list":["post-731","post","type-post","status-publish","format-standard","hentry","category-frontend","category-html-css","category-web","tag-css","tag-database","tag-html","tag-web"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>[HTML\/CSS] position\uacfc \uc88c\ud45c \ub808\uc774\uc544\uc6c3 \ub9cc\ub4e4\uae30 - Dozzing World<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blog.dozzing.kr\/?p=731\" \/>\n<meta property=\"og:locale\" content=\"ko_KR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[HTML\/CSS] position\uacfc \uc88c\ud45c \ub808\uc774\uc544\uc6c3 \ub9cc\ub4e4\uae30 - Dozzing World\" \/>\n<meta property=\"og:description\" content=\"\ud83d\udcab position \uc18d\uc131 .box { position : static; \/* \uae30\uc900 X (\uc88c\ud45c\uc801\uc6a9 X) *\/ position : relative; \/* \ub0b4 \uc6d0\ub798 \uc704\uce58 \uae30\uc900 *\/ position : absolute; \/* \ubd80\ubaa8 \uc911 position : relative\ub97c \uac00\uc9c0\uace0 \uc788\ub294 \ubd80\ubaa8 \uae30\uc900 *\/ position : fixed; \/* \ube0c\ub77c\uc6b0\uc800 \ucc3d \uae30\uc900 (viewport) *\/ } \uc88c\ud45c \uc18d\uc131\uc744 \uc801\uc6a9\ud560\u00a0\uae30\uc900\uc810\uc774 \uc5ec\uae30\uc5d0\uc694~! \ub77c\uace0 \uc9c0\uc815\ud574\uc8fc\ub294 \uc5ed\ud560 \u00a0 [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blog.dozzing.kr\/?p=731\" \/>\n<meta property=\"og:site_name\" content=\"Dozzing World\" \/>\n<meta property=\"article:published_time\" content=\"2022-05-16T07:16:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-24T02:37:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blog.dozzing.kr\/wp-content\/uploads\/2024\/05\/wp_editor_md_2ad681e7c4bc3213413737c434c3ea67.jpg\" \/>\n<meta name=\"author\" content=\"Dozzing\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\uae00\uc4f4\uc774\" \/>\n\t<meta name=\"twitter:data1\" content=\"Dozzing\" \/>\n\t<meta name=\"twitter:label2\" content=\"\uc608\uc0c1 \ub418\ub294 \ud310\ub3c5 \uc2dc\uac04\" \/>\n\t<meta name=\"twitter:data2\" content=\"2\ubd84\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/blog.dozzing.kr\/?p=731\",\"url\":\"https:\/\/blog.dozzing.kr\/?p=731\",\"name\":\"[HTML\/CSS] position\uacfc \uc88c\ud45c \ub808\uc774\uc544\uc6c3 \ub9cc\ub4e4\uae30 - Dozzing World\",\"isPartOf\":{\"@id\":\"https:\/\/blog.dozzing.kr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/blog.dozzing.kr\/?p=731#primaryimage\"},\"image\":{\"@id\":\"https:\/\/blog.dozzing.kr\/?p=731#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blog.dozzing.kr\/wp-content\/uploads\/2024\/05\/wp_editor_md_2ad681e7c4bc3213413737c434c3ea67.jpg\",\"datePublished\":\"2022-05-16T07:16:19+00:00\",\"dateModified\":\"2025-10-24T02:37:52+00:00\",\"author\":{\"@id\":\"https:\/\/blog.dozzing.kr\/#\/schema\/person\/52258baef65b530d3e867e4c1f79c36f\"},\"breadcrumb\":{\"@id\":\"https:\/\/blog.dozzing.kr\/?p=731#breadcrumb\"},\"inLanguage\":\"ko-KR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blog.dozzing.kr\/?p=731\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\/\/blog.dozzing.kr\/?p=731#primaryimage\",\"url\":\"https:\/\/blog.dozzing.kr\/wp-content\/uploads\/2024\/05\/wp_editor_md_2ad681e7c4bc3213413737c434c3ea67.jpg\",\"contentUrl\":\"https:\/\/blog.dozzing.kr\/wp-content\/uploads\/2024\/05\/wp_editor_md_2ad681e7c4bc3213413737c434c3ea67.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blog.dozzing.kr\/?p=731#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/blog.dozzing.kr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[HTML\/CSS] position\uacfc \uc88c\ud45c \ub808\uc774\uc544\uc6c3 \ub9cc\ub4e4\uae30\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/blog.dozzing.kr\/#website\",\"url\":\"https:\/\/blog.dozzing.kr\/\",\"name\":\"Dozzing World\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/blog.dozzing.kr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ko-KR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/blog.dozzing.kr\/#\/schema\/person\/52258baef65b530d3e867e4c1f79c36f\",\"name\":\"Dozzing\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\/\/blog.dozzing.kr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0bbe3fe675c3641965411ffb61a1368b3bf05e794deaa3c7bd0ef7b4690a614a?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0bbe3fe675c3641965411ffb61a1368b3bf05e794deaa3c7bd0ef7b4690a614a?s=96&d=mm&r=g\",\"caption\":\"Dozzing\"},\"sameAs\":[\"https:\/\/blog.dozzing.kr\/\"],\"url\":\"https:\/\/blog.dozzing.kr\/?author=1\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[HTML\/CSS] position\uacfc \uc88c\ud45c \ub808\uc774\uc544\uc6c3 \ub9cc\ub4e4\uae30 - Dozzing World","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/blog.dozzing.kr\/?p=731","og_locale":"ko_KR","og_type":"article","og_title":"[HTML\/CSS] position\uacfc \uc88c\ud45c \ub808\uc774\uc544\uc6c3 \ub9cc\ub4e4\uae30 - Dozzing World","og_description":"\ud83d\udcab position \uc18d\uc131 .box { position : static; \/* \uae30\uc900 X (\uc88c\ud45c\uc801\uc6a9 X) *\/ position : relative; \/* \ub0b4 \uc6d0\ub798 \uc704\uce58 \uae30\uc900 *\/ position : absolute; \/* \ubd80\ubaa8 \uc911 position : relative\ub97c \uac00\uc9c0\uace0 \uc788\ub294 \ubd80\ubaa8 \uae30\uc900 *\/ position : fixed; \/* \ube0c\ub77c\uc6b0\uc800 \ucc3d \uae30\uc900 (viewport) *\/ } \uc88c\ud45c \uc18d\uc131\uc744 \uc801\uc6a9\ud560\u00a0\uae30\uc900\uc810\uc774 \uc5ec\uae30\uc5d0\uc694~! \ub77c\uace0 \uc9c0\uc815\ud574\uc8fc\ub294 \uc5ed\ud560 \u00a0 [&hellip;]","og_url":"https:\/\/blog.dozzing.kr\/?p=731","og_site_name":"Dozzing World","article_published_time":"2022-05-16T07:16:19+00:00","article_modified_time":"2025-10-24T02:37:52+00:00","og_image":[{"url":"https:\/\/blog.dozzing.kr\/wp-content\/uploads\/2024\/05\/wp_editor_md_2ad681e7c4bc3213413737c434c3ea67.jpg","type":"","width":"","height":""}],"author":"Dozzing","twitter_card":"summary_large_image","twitter_misc":{"\uae00\uc4f4\uc774":"Dozzing","\uc608\uc0c1 \ub418\ub294 \ud310\ub3c5 \uc2dc\uac04":"2\ubd84"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/blog.dozzing.kr\/?p=731","url":"https:\/\/blog.dozzing.kr\/?p=731","name":"[HTML\/CSS] position\uacfc \uc88c\ud45c \ub808\uc774\uc544\uc6c3 \ub9cc\ub4e4\uae30 - Dozzing World","isPartOf":{"@id":"https:\/\/blog.dozzing.kr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blog.dozzing.kr\/?p=731#primaryimage"},"image":{"@id":"https:\/\/blog.dozzing.kr\/?p=731#primaryimage"},"thumbnailUrl":"https:\/\/blog.dozzing.kr\/wp-content\/uploads\/2024\/05\/wp_editor_md_2ad681e7c4bc3213413737c434c3ea67.jpg","datePublished":"2022-05-16T07:16:19+00:00","dateModified":"2025-10-24T02:37:52+00:00","author":{"@id":"https:\/\/blog.dozzing.kr\/#\/schema\/person\/52258baef65b530d3e867e4c1f79c36f"},"breadcrumb":{"@id":"https:\/\/blog.dozzing.kr\/?p=731#breadcrumb"},"inLanguage":"ko-KR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blog.dozzing.kr\/?p=731"]}]},{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/blog.dozzing.kr\/?p=731#primaryimage","url":"https:\/\/blog.dozzing.kr\/wp-content\/uploads\/2024\/05\/wp_editor_md_2ad681e7c4bc3213413737c434c3ea67.jpg","contentUrl":"https:\/\/blog.dozzing.kr\/wp-content\/uploads\/2024\/05\/wp_editor_md_2ad681e7c4bc3213413737c434c3ea67.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/blog.dozzing.kr\/?p=731#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blog.dozzing.kr\/"},{"@type":"ListItem","position":2,"name":"[HTML\/CSS] position\uacfc \uc88c\ud45c \ub808\uc774\uc544\uc6c3 \ub9cc\ub4e4\uae30"}]},{"@type":"WebSite","@id":"https:\/\/blog.dozzing.kr\/#website","url":"https:\/\/blog.dozzing.kr\/","name":"Dozzing World","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blog.dozzing.kr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ko-KR"},{"@type":"Person","@id":"https:\/\/blog.dozzing.kr\/#\/schema\/person\/52258baef65b530d3e867e4c1f79c36f","name":"Dozzing","image":{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/blog.dozzing.kr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0bbe3fe675c3641965411ffb61a1368b3bf05e794deaa3c7bd0ef7b4690a614a?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0bbe3fe675c3641965411ffb61a1368b3bf05e794deaa3c7bd0ef7b4690a614a?s=96&d=mm&r=g","caption":"Dozzing"},"sameAs":["https:\/\/blog.dozzing.kr\/"],"url":"https:\/\/blog.dozzing.kr\/?author=1"}]}},"_links":{"self":[{"href":"https:\/\/blog.dozzing.kr\/index.php?rest_route=\/wp\/v2\/posts\/731","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.dozzing.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.dozzing.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.dozzing.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.dozzing.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=731"}],"version-history":[{"count":2,"href":"https:\/\/blog.dozzing.kr\/index.php?rest_route=\/wp\/v2\/posts\/731\/revisions"}],"predecessor-version":[{"id":1285,"href":"https:\/\/blog.dozzing.kr\/index.php?rest_route=\/wp\/v2\/posts\/731\/revisions\/1285"}],"wp:attachment":[{"href":"https:\/\/blog.dozzing.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=731"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.dozzing.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=731"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.dozzing.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=731"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}