const{Fragment:i,jsx:h,jsxs:s}=arguments[0];function _createMdxContent(e){const a={a:"a",code:"code",figure:"figure",h4:"h4",li:"li",ol:"ol",p:"p",pre:"pre",span:"span",...e.components};return s(i,{children:[h(a.h4,{id:"sticky-header",children:h(a.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#sticky-header",children:"sticky header"})}),"\n",s(a.ol,{children:["\n",s(a.li,{children:["\n",h(a.p,{children:"보통의 경우"}),"\n",h(a.figure,{"data-rehype-pretty-code-figure":"",children:h(a.pre,{style:{"--shiki-light":"#24292e","--shiki-dark":"#abb2bf","--shiki-light-bg":"#fff","--shiki-dark-bg":"#282c34"},tabIndex:"0","data-language":"scss","data-theme":"github-light one-dark-pro",children:s(a.code,{"data-language":"scss","data-theme":"github-light one-dark-pro",style:{display:"grid"},children:[s(a.span,{"data-line":"",children:[h(a.span,{style:{"--shiki-light":"#22863A","--shiki-dark":"#E06C75"},children:"header"}),h(a.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#ABB2BF"},children:" {"})]}),"\n",s(a.span,{"data-line":"",children:[h(a.span,{style:{"--shiki-light":"#005CC5","--shiki-dark":"#ABB2BF"},children:"\tposition"}),h(a.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#ABB2BF"},children:": "}),h(a.span,{style:{"--shiki-light":"#005CC5","--shiki-dark":"#D19A66"},children:"fixed"}),h(a.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#ABB2BF"},children:";"})]}),"\n",s(a.span,{"data-line":"",children:[h(a.span,{style:{"--shiki-light":"#005CC5","--shiki-dark":"#ABB2BF"},children:"\ttop"}),h(a.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#ABB2BF"},children:": "}),h(a.span,{style:{"--shiki-light":"#005CC5","--shiki-dark":"#D19A66"},children:"0"})]}),"\n",s(a.span,{"data-line":"",children:[h(a.span,{style:{"--shiki-light":"#005CC5","--shiki-dark":"#ABB2BF"},children:"\twidth"}),h(a.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#ABB2BF"},children:": "}),h(a.span,{style:{"--shiki-light":"#005CC5","--shiki-dark":"#D19A66"},children:"100"}),h(a.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#E06C75"},children:"%"})]}),"\n",h(a.span,{"data-line":"",children:h(a.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#ABB2BF"},children:"}"})}),"\n",h(a.span,{"data-line":"",children:" "}),"\n",s(a.span,{"data-line":"",children:[h(a.span,{style:{"--shiki-light":"#22863A","--shiki-dark":"#E06C75"},children:"body"}),h(a.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#ABB2BF"},children:" {"})]}),"\n",s(a.span,{"data-line":"",children:[h(a.span,{style:{"--shiki-light":"#005CC5","--shiki-dark":"#ABB2BF"},children:"\tpadding-top"}),h(a.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#ABB2BF"},children:": (header"}),h(a.span,{style:{"--shiki-light":"#005CC5","--shiki-dark":"#ABB2BF"},children:"-"}),h(a.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#ABB2BF"},children:"height)px;"})]}),"\n",h(a.span,{"data-line":"",children:h(a.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#ABB2BF"},children:"}"})})]})})}),"\n",h(a.figure,{"data-rehype-pretty-code-figure":"",children:h(a.pre,{style:{"--shiki-light":"#24292e","--shiki-dark":"#abb2bf","--shiki-light-bg":"#fff","--shiki-dark-bg":"#282c34"},tabIndex:"0","data-language":"html","data-theme":"github-light one-dark-pro",children:s(a.code,{"data-language":"html","data-theme":"github-light one-dark-pro",style:{display:"grid"},children:[s(a.span,{"data-line":"",children:[h(a.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#ABB2BF"},children:"<"}),h(a.span,{style:{"--shiki-light":"#22863A","--shiki-dark":"#E06C75"},children:"header"}),h(a.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#ABB2BF"},children:">"})]}),"\n",s(a.span,{"data-line":"",children:[h(a.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#ABB2BF"},children:""})]}),"\n",s(a.span,{"data-line":"",children:[h(a.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#ABB2BF"},children:"<"}),h(a.span,{style:{"--shiki-light":"#22863A","--shiki-dark":"#E06C75"},children:"body"}),h(a.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#ABB2BF"},children:">"})]}),"\n",s(a.span,{"data-line":"",children:[h(a.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#ABB2BF"},children:""})]})]})})}),"\n"]}),"\n",s(a.li,{children:["\n",h(a.p,{children:"in Angular"}),"\n",h(a.figure,{"data-rehype-pretty-code-figure":"",children:h(a.pre,{style:{"--shiki-light":"#24292e","--shiki-dark":"#abb2bf","--shiki-light-bg":"#fff","--shiki-dark-bg":"#282c34"},tabIndex:"0","data-language":"scss","data-theme":"github-light one-dark-pro",children:s(a.code,{"data-language":"scss","data-theme":"github-light one-dark-pro",style:{display:"grid"},children:[s(a.span,{"data-line":"",children:[h(a.span,{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#56B6C2"},children:":host"}),h(a.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#ABB2BF"},children:" {"})]}),"\n",s(a.span,{"data-line":"",children:[h(a.span,{style:{"--shiki-light":"#005CC5","--shiki-dark":"#ABB2BF"},children:"\tpadding-top"}),h(a.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#ABB2BF"},children:": (header"}),h(a.span,{style:{"--shiki-light":"#005CC5","--shiki-dark":"#ABB2BF"},children:"-"}),h(a.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#ABB2BF"},children:"height)px;"})]}),"\n",h(a.span,{"data-line":"",children:h(a.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#ABB2BF"},children:"}"})}),"\n",h(a.span,{"data-line":"",children:" "}),"\n",s(a.span,{"data-line":"",children:[h(a.span,{style:{"--shiki-light":"#22863A","--shiki-dark":"#E06C75"},children:"header"}),h(a.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#ABB2BF"},children:"{"})]}),"\n",s(a.span,{"data-line":"",children:[h(a.span,{style:{"--shiki-light":"#005CC5","--shiki-dark":"#ABB2BF"},children:"\tposition"}),h(a.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#ABB2BF"},children:": "}),h(a.span,{style:{"--shiki-light":"#005CC5","--shiki-dark":"#D19A66"},children:"fixed"}),h(a.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#ABB2BF"},children:";"})]}),"\n",s(a.span,{"data-line":"",children:[h(a.span,{style:{"--shiki-light":"#005CC5","--shiki-dark":"#ABB2BF"},children:"\ttop"}),h(a.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#ABB2BF"},children:": "}),h(a.span,{style:{"--shiki-light":"#005CC5","--shiki-dark":"#D19A66"},children:"0"})]}),"\n",s(a.span,{"data-line":"",children:[h(a.span,{style:{"--shiki-light":"#005CC5","--shiki-dark":"#ABB2BF"},children:"\twidth"}),h(a.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#ABB2BF"},children:": "}),h(a.span,{style:{"--shiki-light":"#005CC5","--shiki-dark":"#D19A66"},children:"100"}),h(a.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#E06C75"},children:"%"})]}),"\n",h(a.span,{"data-line":"",children:h(a.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#ABB2BF"},children:"}"})})]})})}),"\n",h(a.figure,{"data-rehype-pretty-code-figure":"",children:h(a.pre,{style:{"--shiki-light":"#24292e","--shiki-dark":"#abb2bf","--shiki-light-bg":"#fff","--shiki-dark-bg":"#282c34"},tabIndex:"0","data-language":"html","data-theme":"github-light one-dark-pro",children:s(a.code,{"data-language":"html","data-theme":"github-light one-dark-pro",style:{display:"grid"},children:[s(a.span,{"data-line":"",children:[h(a.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#ABB2BF"},children:"<"}),h(a.span,{style:{"--shiki-light":"#22863A","--shiki-dark":"#E06C75"},children:"mapia-header"}),h(a.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#ABB2BF"},children:">"})]}),"\n",s(a.span,{"data-line":"",children:[h(a.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#ABB2BF"},children:"\t<"}),h(a.span,{style:{"--shiki-light":"#22863A","--shiki-dark":"#E06C75"},children:"header"}),h(a.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#ABB2BF"},children:">"})]}),"\n",s(a.span,{"data-line":"",children:[h(a.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#ABB2BF"},children:"\t"})]}),"\n",s(a.span,{"data-line":"",children:[h(a.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#ABB2BF"},children:""})]}),"\n",s(a.span,{"data-line":"",children:[h(a.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#ABB2BF"},children:"<"}),h(a.span,{style:{"--shiki-light":"#22863A","--shiki-dark":"#E06C75"},children:"body"}),h(a.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#ABB2BF"},children:">"})]}),"\n",s(a.span,{"data-line":"",children:[h(a.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#ABB2BF"},children:""})]})]})})}),"\n"]}),"\n"]})]})}return{default:function(i={}){const{wrapper:s}=i.components||{};return s?h(s,{...i,children:h(_createMdxContent,{...i})}):_createMdxContent(i)}};

sticky header

관련 포스트