답변 1개
채택된 답변
+20 포인트
11년 전
/css/default.css 에서
</p><span class="selector" style="font-family: Consolas, 'Lucida Console', monospace; font-size: 12px; line-height: normal; box-sizing: border-box; color: rgb(136, 136, 136);"><span class="simple-selector selector-matches" style="box-sizing: border-box; color: rgb(34, 34, 34);">#gnb</span></span><span style="color: rgb(34, 34, 34); font-family: Consolas, 'Lucida Console', monospace; font-size: 12px; line-height: normal; box-sizing: border-box;"> {</span><ol class="properties monospace" style="box-sizing: border-box; font-family: Consolas, 'Lucida Console', monospace; font-size: 12px; margin: 0px; padding: 2px 4px 0px 0px; list-style: none; clear: both; color: rgb(34, 34, 34); line-height: normal; white-space: nowrap;"><li title="" style="box-sizing: border-box; margin-left: 0px !important; padding-left: 38px; white-space: normal; text-overflow: ellipsis; overflow: hidden; cursor: auto;"><input class="enabled-button" type="checkbox" style="font-family: inherit; font-size: 10px; height: 12px; width: 18px; margin: 0px; flex-shrink: 0; visibility: hidden; float: left; vertical-align: top; position: relative; z-index: 1; left: -40px; top: 1px;"><span class="webkit-css-property" title="position:relative;" style="box-sizing: border-box; color: rgb(200, 0, 0); margin-left: -38px;">position</span>: <span class="expand-element" style="box-sizing: border-box;"></span><span class="value" style="box-sizing: border-box;">relative</span>;</li><li title="" class="parent" style="box-sizing: border-box; margin-left: 0px !important; padding-left: 38px; white-space: normal; text-overflow: ellipsis; overflow: hidden; cursor: auto;"><input class="enabled-button" type="checkbox" style="font-family: inherit; font-size: 10px; height: 12px; width: 18px; margin: 0px; flex-shrink: 0; visibility: hidden; float: left; vertical-align: top; position: relative; z-index: 1; left: -40px; top: 1px;"><span class="webkit-css-property" title="margin:-1px 0 0;" style="box-sizing: border-box; color: rgb(200, 0, 0); margin-left: -38px;">margin</span>: <span class="expand-element" style="box-sizing: border-box; -webkit-user-select: none; margin-right: 2px; margin-left: -6px; opacity: 0.55; width: 8px; height: 10px; display: inline-block; background-image: url(chrome-devtools://devtools/bundled/Images/statusbarButtonGlyphs.png); background-size: 320px 144px; background-position: -4px -96px;"></span><span class="value" style="box-sizing: border-box;">-1px 0 0</span>;</li><li title="" class="parent" style="box-sizing: border-box; margin-left: 0px !important; padding-left: 38px; white-space: normal; text-overflow: ellipsis; overflow: hidden; cursor: auto;"><input class="enabled-button styles-panel-hovered" type="checkbox" style="font-family: inherit; font-size: 10px; height: 12px; width: 18px; margin: 0px; flex-shrink: 0; visibility: hidden; float: left; vertical-align: top; position: relative; z-index: 1; left: -40px; top: 1px;"><span class="webkit-css-property" title="border-top:1px dotted #dde4e9;" style="box-sizing: border-box; color: rgb(200, 0, 0); margin-left: -38px;">border-top</span>: <span class="expand-element" style="box-sizing: border-box; -webkit-user-select: none; margin-right: 2px; margin-left: -6px; opacity: 0.55; width: 8px; height: 10px; display: inline-block; background-image: url(chrome-devtools://devtools/bundled/Images/statusbarButtonGlyphs.png); background-size: 320px 144px; background-position: -4px -96px;"></span><span class="value" style="box-sizing: border-box;">1px dotted <nobr style="box-sizing: border-box;"><span class="swatch" title="Click to open a colorpicker.
Shift-click to change color format." style="box-sizing: border-box; margin-left: 1px; margin-right: 2px; width: 10px; height: 10px; position: relative; top: 1px; display: inline-block; -webkit-user-select: none; background-image: url(chrome-devtools://devtools/bundled/Images/checker.png);"><span class="swatch-inner" style="box-sizing: border-box; width: 10px; height: 10px; display: inline-block; border: 1px solid rgba(128, 128, 128, 0.6); background-color: rgb(221, 228, 233);"></span></span><span style="box-sizing: border-box;">#dde4e9</span></nobr></span>;</li><li title="" class="parent" style="box-sizing: border-box; margin-left: 0px !important; padding-left: 38px; white-space: normal; text-overflow: ellipsis; overflow: hidden; cursor: auto;"><input class="enabled-button" type="checkbox" style="font-family: inherit; font-size: 10px; height: 12px; width: 18px; margin: 0px; flex-shrink: 0; visibility: hidden; float: left; vertical-align: top; position: relative; z-index: 1; left: -40px; top: 1px;"><span class="webkit-css-property" title="border-bottom:1px solid #dde4e9;" style="box-sizing: border-box; color: rgb(200, 0, 0); margin-left: -38px;">border-bottom</span>: <span class="expand-element" style="box-sizing: border-box; -webkit-user-select: none; margin-right: 2px; margin-left: -6px; opacity: 0.55; width: 8px; height: 10px; display: inline-block; background-image: url(chrome-devtools://devtools/bundled/Images/statusbarButtonGlyphs.png); background-size: 320px 144px; background-position: -4px -96px;"></span><span class="value" style="box-sizing: border-box;">1px solid <nobr style="box-sizing: border-box;"><span class="swatch" title="Click to open a colorpicker.
Shift-click to change color format." style="box-sizing: border-box; margin-left: 1px; margin-right: 2px; width: 10px; height: 10px; position: relative; top: 1px; display: inline-block; -webkit-user-select: none; background-image: url(chrome-devtools://devtools/bundled/Images/checker.png);"><span class="swatch-inner" style="box-sizing: border-box; width: 10px; height: 10px; display: inline-block; border: 1px solid rgba(128, 128, 128, 0.6); background-color: rgb(221, 228, 233);"></span></span><span style="box-sizing: border-box;">#dde4e9</span></nobr></span>;</li><li title="" class="parent" style="box-sizing: border-box; margin-left: 0px !important; padding-left: 38px; white-space: normal; text-overflow: ellipsis; overflow: hidden; cursor: auto;"><input class="enabled-button" type="checkbox" style="font-family: inherit; font-size: 10px; height: 12px; width: 18px; margin: 0px; flex-shrink: 0; visibility: hidden; float: left; vertical-align: top; position: relative; z-index: 1; left: -40px; top: 1px;"><span class="webkit-css-property" title="background:#ecf0f7" style="box-sizing: border-box; color: rgb(200, 0, 0); margin-left: -38px;">background</span>: <span class="expand-element" style="box-sizing: border-box; -webkit-user-select: none; margin-right: 2px; margin-left: -6px; opacity: 0.55; width: 8px; height: 10px; display: inline-block; background-image: url(chrome-devtools://devtools/bundled/Images/statusbarButtonGlyphs.png); background-size: 320px 144px; background-position: -4px -96px;"></span><span class="value" style="box-sizing: border-box;"><nobr style="box-sizing: border-box;"><span class="swatch" title="Click to open a colorpicker.
Shift-click to change color format." style="box-sizing: border-box; margin-left: 1px; margin-right: 2px; width: 10px; height: 10px; position: relative; top: 1px; display: inline-block; -webkit-user-select: none; background-image: url(chrome-devtools://devtools/bundled/Images/checker.png);"><span class="swatch-inner" style="box-sizing: border-box; width: 10px; height: 10px; display: inline-block; border: 1px solid rgba(128, 128, 128, 0.6); background-color: rgb(236, 240, 247);"></span></span><span style="box-sizing: border-box;">#ecf0f7</span></nobr></span>;</li></ol><span style="color: rgb(34, 34, 34); font-family: Consolas, 'Lucida Console', monospace; font-size: 12px; line-height: normal; white-space: nowrap;">}</span><p>
width값을 넣고 margin 가로는 auto를 주면 될 것 같은데요.
결론:
#gnb {position:relative;width:970px;margin:-1px auto 0;border-top:1px dotted #dde4e9;border-bottom:1px solid #dde4e9;background:#ecf0f7}
로그인 후 평가할 수 있습니다
답변에 대한 댓글 2개
�
와니안
11년 전
f
fear
11년 전
margin은 바깥 여백이며 auto 값은 자동 설정입니다.
바깥 여백을 자동으로 설정한단 뜻으로
<div style="width:500px">
<div style="width:300px;margin:auto;"></div>
</div>
위와 같다면
500안에 300인 태그가 여백이 자동이므로 양쪽 100씩 얻게되어
중앙 정렬한것과 같게 됩니다.
바깥 여백을 자동으로 설정한단 뜻으로
<div style="width:500px">
<div style="width:300px;margin:auto;"></div>
</div>
위와 같다면
500안에 300인 태그가 여백이 자동이므로 양쪽 100씩 얻게되어
중앙 정렬한것과 같게 됩니다.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
답변이 안달려서 실망하고 있었는데 fear님 정말 감사해요ㅎㅎ 답변도 상세하게 해주셔서 덕분에 잘 해결했습니다. 감사합니다. 진심으로..
한가지 궁금한 점은 auto라는게 정확히 무엇을 의미하는지 설명해 주실 수 있나요?
가운데 정렬.. 뭐 이런 의미인가요?