<![CDATA[
<div class="WordSection1"><h1><b><span style="font-size: 18pt;">1<span style='font: 7pt/normal "Times New Roman"; font-size-adjust: none; font-stretch: normal;'> </span></span></b><b><span style="font-size: 18pt;">Element </span></b><b><span style="font-size: 18pt;">배치와 정렬</span></b></h1><p ><span > </span></p><h2 style="margin-left: 1cm;"><b><span style="font-size: 14pt;">1.1<span style='font: 7pt/normal "Times New Roman"; font-size-adjust: none; font-stretch: normal;'> </span></span></b><b><span style="font-size: 18pt;">Position, Display</span></b></h2><p ><span > </span></p><p ><span >position</span>은 요소의 위치를 지정하는 속성으로<span > top, right, bottom, left </span>속성<span >, z-index </span>속성과 함께 사용된다<span >. display</span>는 요소의 박스 타입을 지정하는데 이용된다<span >. </span></p><p ><span > </span></p><p ><b><span style="font-size: 12pt;">position:</span></b></p><p class="MsoListParagraph" style="line-height: 12pt; text-indent: -18pt; margin-left: 21.3pt;"><span >-<span style='font: 7pt/normal "Times New Roman"; font-size-adjust: none; font-stretch: normal;'> </span></span><b><span >static</span></b><span >: </span>디폴트 값<span >. </span>요소를 문서의 흐름에 따라 순서대로 배치한다<span >. </span></p><p class="MsoListParagraph" style="line-height: 12pt; margin-left: 21.3pt;"><span >top, right, bottom, left, z-index </span>속성 효과가 적용되지 않는다<span >. </span></p><p class="MsoListParagraph" style="line-height: 12pt; text-indent: -18pt; margin-left: 21.3pt;"><span >-<span style='font: 7pt/normal "Times New Roman"; font-size-adjust: none; font-stretch: normal;'> </span></span><b><span >relative</span></b><span >: </span>요소를 문서의 흐름에서 상대적 위치에 배치한다<span >. </span>상대적 위치는<span > top, right, bottom, left</span>에 의해 결정되며<span > z-index</span>가 지정되면 새로운 스택오더가 만들어 진다<span >.<b> </b></span></p><p class="MsoListParagraph" style="line-height: 12pt; text-indent: -18pt; margin-left: 21.3pt;"><span >-<span style='font: 7pt/normal "Times New Roman"; font-size-adjust: none; font-stretch: normal;'> </span></span><b><span >absolute: </span></b>문서의 흐름과 상관없이 가장 가까운 <i><span >static</span>이 아닌</i> 부모 요소의 위치에 상대적으로 배치된다<span >. z-index</span>가 지정되면 새로운 스택 오더가 만들어 진다<span >. </span>부모가<span > static</span>이면<span > static</span>이 아닌 다음 부모를 기준으로 한다<span >.</span></p><p class="MsoListParagraph" style="line-height: 12pt; text-indent: -18pt; margin-left: 21.3pt;"><span >-<span style='font: 7pt/normal "Times New Roman"; font-size-adjust: none; font-stretch: normal;'> </span></span><b><span >fixed</span></b><span >: </span>문서의 흐름에 상관없이 화면에 상대적 위치에 배치된다<span >. </span>따라서<span >, </span>스크롤 되어도 움직이지 않는다<span >. </span></p><p class="MsoListParagraph" style="line-height: 12pt; text-indent: -18pt; margin-left: 21.3pt;"><span >-<span style='font: 7pt/normal "Times New Roman"; font-size-adjust: none; font-stretch: normal;'> </span></span><b><span >initial</span></b><span >: display </span>속성을 디폴트 값으로 설정한다<span >. </span></p><p class="MsoListParagraph" style="line-height: 12pt; text-indent: -18pt; margin-left: 21.3pt;"><span >-<span style='font: 7pt/normal "Times New Roman"; font-size-adjust: none; font-stretch: normal;'> </span></span><b><span >inherit</span></b><span >: </span>부모 요소로부터 속성을 상속 받는다<span >. </span></p><p class="MsoListParagraph" style="line-height: 12pt; text-indent: -18pt; margin-left: 21.3pt;"><span >-<span style='font: 7pt/normal "Times New Roman"; font-size-adjust: none; font-stretch: normal;'> </span></span><b><span >sticky: </span></b>특정 위치까지는<span > relative </span>속성을 유지하다가 특정 위치에 도달하면<span > fixed </span>속성이 됨<span >.</span></p><p style="line-height: 12pt;"><span > </span></p><p ><span >relative, absolute, fixd</span>의 위치값은<span > top, right, bottom, left</span>로 지정하며<span > static</span>은 이 속성이 적용되지 않는다<span >. z-index</span>를 쓰면<span > static</span>을 제외하고 새로운 스택오더가 만들어진다<span >. sticky</span>는 좀 특이하다<span >. </span>예를 들어<span >, <div></span>를<span > position:sticky; top:30px; </span>로 설정한 경우 화면 스크롤로<span > top 30px</span>에 도달하기 전까지는<span > relative</span>이고 도달하면<span > fixed</span>가 되어 화면<span > top 30px</span>에 고정된다<span >. </span>다만<span >, IE11</span>이나 엣지에서 동작 안 한다<span >. </span></p><p ><span > </span></p><p ><b><span style="font-size: 12pt;">display: </span></b></p><p class="MsoListParagraph" style="line-height: 12pt; text-indent: -17.85pt; margin-left: 21.25pt;"><span >-<span style='font: 7pt/normal "Times New Roman"; font-size-adjust: none; font-stretch: normal;'> </span></span><b><span >inline</span></b><span >: </span>디폴트<span >, </span>요소들을 가로로 배치한다<span >. </span></p><p class="MsoListParagraph" style="line-height: 12pt; text-indent: -17.85pt; margin-left: 21.25pt;"><span >-<span style='font: 7pt/normal "Times New Roman"; font-size-adjust: none; font-stretch: normal;'> </span></span><b><span >block</span></b><span >: </span>요소들을 블록 요소처럼 동작하도록 한다<span >. </span></p><p class="MsoListParagraph" style="line-height: 12pt; text-indent: -17.85pt; margin-left: 21.25pt;"><span >-<span style='font: 7pt/normal "Times New Roman"; font-size-adjust: none; font-stretch: normal;'> </span></span><b><span >inline-block:</span></b><span > </span>요소 내부는 블록으로 요소는 인라인 속성값이 적용된다<span >. </span></p><p class="MsoListParagraph" style="line-height: 12pt; text-indent: -17.85pt; margin-left: 21.25pt;"><span >-<span style='font: 7pt/normal "Times New Roman"; font-size-adjust: none; font-stretch: normal;'> </span></span><b><span >flex</span></b><span >: </span>블록 레벨<span > flex </span>컨테이너로 설정한다<span >. CSS3</span></p><p class="MsoListParagraph" style="line-height: 12pt; text-indent: -17.85pt; margin-left: 21.25pt;"><span >-<span style='font: 7pt/normal "Times New Roman"; font-size-adjust: none; font-stretch: normal;'> </span></span><b><span >inline-flex:</span></b><span > </span>인라인 레벨<span > flex </span>컨테이너로 설정한다<span >. CSS3</span></p><p class="MsoListParagraph" style="line-height: 12pt; text-indent: -17.85pt; margin-left: 21.25pt;"><span >-<span style='font: 7pt/normal "Times New Roman"; font-size-adjust: none; font-stretch: normal;'> </span></span><b><span >table:</span></b><span > </span>요소를 테이블처럼 동작하도록 한다<span >. table </span>디스플레이와 관련해서 더 많은<span > display </span>속성이 있으며 이를 나열하면<span > table-cell, table-column, talbe-row, table-caption, table-column-group, table-header-group, table-footer-group, talbe-row-group, table-cell, table-column, table-row</span>가 있다<span >. </span></p><p class="MsoListParagraph" style="line-height: 12pt; text-indent: -17.85pt; margin-left: 21.25pt;"><span >-<span style='font: 7pt/normal "Times New Roman"; font-size-adjust: none; font-stretch: normal;'> </span></span><b><span >inline-table:</span></b><span > </span>인라인 레벨 테이블처럼 동작하도록 한다<span >. </span></p><p class="MsoListParagraph" style="line-height: 12pt; text-indent: -17.85pt; margin-left: 21.25pt;"><span >-<span style='font: 7pt/normal "Times New Roman"; font-size-adjust: none; font-stretch: normal;'> </span></span><b><span >list-item:</span></b><span > </span>요소를<span > <li> </span>요소처럼 동작하도록 설정한다<span >. </span></p><p class="MsoListParagraph" style="line-height: 12pt; text-indent: -17.85pt; margin-left: 21.25pt;"><span >-<span style='font: 7pt/normal "Times New Roman"; font-size-adjust: none; font-stretch: normal;'> </span></span><b><span >run-in:</span></b><span > </span>문맥에 따라 요소를 블록 또는 인라인으로 표시한다<span >. </span></p><p class="MsoListParagraph" style="line-height: 12pt; text-indent: -17.85pt; margin-left: 21.25pt;"><span >-<span style='font: 7pt/normal "Times New Roman"; font-size-adjust: none; font-stretch: normal;'> </span></span><b><span >none:</span></b><span > </span>요소를 보이지 않도록 설정한다<span >. </span><i>영역을 유지하지 않으므로 영역을 유지하려면<span > visibility</span>속성을 사용해야 한다<span >. </span></i></p><p class="MsoListParagraph" style="line-height: 12pt; text-indent: -17.85pt; margin-left: 21.25pt;"><span >-<span style='font: 7pt/normal "Times New Roman"; font-size-adjust: none; font-stretch: normal;'> </span></span><b><span >initial:</span></b><span > </span>디폴트 값으로 설정한다<span >. </span></p><p class="MsoListParagraph" style="line-height: 12pt; text-indent: -17.85pt; margin-left: 21.25pt;"><span >-<span style='font: 7pt/normal "Times New Roman"; font-size-adjust: none; font-stretch: normal;'> </span></span><b><span >inherit:</span></b><span > </span>부모 요소로부터 상속 받는다<span >.</span></p><p ><span > </span></p><p ><span >position</span>과<span > display </span>외에도 여러가지 속성들이 있다<span >. </span></p><p ><span > </span></p><p ><b><span style="font-size: 12pt;">visibility: </span></b></p><p class="MsoListParagraph" style="text-indent: -18pt; margin-left: 21.3pt;"><span >-<span style='font: 7pt/normal "Times New Roman"; font-size-adjust: none; font-stretch: normal;'> </span></span><b><span >visible | hidden</span></b><span >: </span>영역을 유지함<span >.</span></p><p ><span > </span></p><p ><span >visibility</span>로 요소의 영역은 유지하면서 보이게 하거나 감춘다<span >. display: block | none</span>은 이와 다르게 영역을 유지하지 않는다<span >. </span></p><p ><span > </span></p><p ><b><span style="font-size: 12pt;">float: </span></b></p><p class="MsoListParagraph" style="text-indent: -18pt; margin-left: 21.3pt;"><span >-<span style='font: 7pt/normal "Times New Roman"; font-size-adjust: none; font-stretch: normal;'> </span></span><b><span >left | right | none| inherit</span></b></p><p ><span > </span></p><p ><span >float</span>는 컨테이너 내의 같은 레벨의 요소를 수평으로 배열시키며<span >, </span>속성값에 따라 요소를 정렬한다<span >. float </span>사용시 주의할 점은 요소 크기에 맞춰 부모 컴테이너의 사이즈가 증가되지 않는다는 것이다<span >. </span>따라서<span >, float </span>정렬하는 요소를 포함하는<span > <div> </span>컨테이너는 높이를 지정해 주어야<span >, </span>다음 컨테이너와 겹치지 않는다<span >.</span></p><p ><span > </span></p><p ><b><span style="font-size: 12pt;">clear:</span></b></p><p class="MsoListParagraph" style="text-indent: -18pt; margin-left: 21.3pt;"><span >-<span style='font: 7pt/normal "Times New Roman"; font-size-adjust: none; font-stretch: normal;'> </span></span><span >left | right | both | none | inherit</span></p><p ><span > </span></p><p ><span >float </span>속성을 갖는 요소 다음에 오는 요소의<span > float </span>속성을 제거하기 위해 사용한다<span >. both</span>를 사용하면 <span >left, right</span>에 상관없이 <span >float </span>속성값에 상관없이 속성이 해지된다<span >. </span></p><p ><span > </span></p><p ><b><span style="font-size: 12pt;">overflow: </span></b></p><p class="MsoListParagraph" style="line-height: 12pt; text-indent: -17.85pt; margin-left: 21.25pt;"><span >-<span style='font: 7pt/normal "Times New Roman"; font-size-adjust: none; font-stretch: normal;'> </span></span><span >visible: </span>오버플로우를 클립하지 않고<span >, </span>박스의 바깥에 표시한다<span >. </span>이 값이 디폴트이다<span >.</span></p><p class="MsoListParagraph" style="line-height: 12pt; text-indent: -17.85pt; margin-left: 21.25pt;"><span >-<span style='font: 7pt/normal "Times New Roman"; font-size-adjust: none; font-stretch: normal;'> </span></span><span >hidden: </span>오버플로우를 클립한다<span >. </span>넘어간 부분은 보이지 않음<span >.</span></p><p class="MsoListParagraph" style="line-height: 12pt; text-indent: -17.85pt; margin-left: 21.25pt;"><span >-<span style='font: 7pt/normal "Times New Roman"; font-size-adjust: none; font-stretch: normal;'> </span></span><span >scroll: </span>오버플로우를 클립한다<span >. </span>넘어간 부분을 위해 스크롤을 표시한다<span >. </span></p><p class="MsoListParagraph" style="line-height: 12pt; text-indent: -17.85pt; margin-left: 21.25pt;"><span >-<span style='font: 7pt/normal "Times New Roman"; font-size-adjust: none; font-stretch: normal;'> </span></span><span >auto: </span>오버플로우가 클립되면<span >, </span>넘어간 부분을 위해 스크롤을 표시한다<span >. </span></p><p class="MsoListParagraph" style="line-height: 12pt; text-indent: -17.85pt; margin-left: 21.25pt;"><span >-<span style='font: 7pt/normal "Times New Roman"; font-size-adjust: none; font-stretch: normal;'> </span></span><span >initial: </span>디폴트 값으로 설정한다<span >. </span></p><p ><span > </span></p><p ><span >overflow</span>는 콘텐츠가 박스의 범위를 넘어갈 때 어떻게 처리할지를 나타낸다<span >.</span></p><p ><span > </span></p><p class="MsoListParagraph" style="text-indent: -20pt; margin-left: 21.3pt;"><span style="font-family: Wingdings; font-size: 12pt;">n<span style='font: 7pt/normal "Times New Roman"; font-size-adjust: none; font-stretch: normal;'> </span></span><b><span style="font-size: 12pt;">Example: relative, absolute, fixed, sticky test</span></b></p><p ><span > </span></p><p ><span ><img width="620" height="343" id="그림 4" src="data:image/png;base64,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"></span></p><p ><span > </span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: teal; font-family: "Courier New";'><!</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>DOCTYPE</span><span style='font-family: "Courier New";'> <span style="color: teal;">html></span></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: teal; font-family: "Courier New";'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>html</span><span style='color: teal; font-family: "Courier New";'>></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: teal; font-family: "Courier New";'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>head</span><span style='color: teal; font-family: "Courier New";'>></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: teal; font-family: "Courier New";'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>meta</span><span style='font-family: "Courier New";'> <span style="color: rgb(127, 0, 127);">charset</span><span style="color: black;">=</span><i><span style="color: rgb(42, 0, 255);">"UTF-8"</span></i><span style="color: teal;">></span></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: teal; font-family: "Courier New";'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>title</span><span style='color: teal; font-family: "Courier New";'>></span><span style='color: black; font-family: "Courier New";'>Position</span><span style='color: teal; font-family: "Courier New";'></</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>title</span><span style='color: teal; font-family: "Courier New";'>></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: teal; font-family: "Courier New";'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>style</span><span style='color: teal; font-family: "Courier New";'>></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='font-family: "Courier New";'> </span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><b><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>div</span></b><span style='color: black; font-family: "Courier New";'> {</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>width</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>50px</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>height</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>50px</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>font</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>bold 15px arial, sans-serif</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>color</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>white</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'>}</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='font-family: "Courier New";'> </span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><i><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>.container1</span></i><span style='color: black; font-family: "Courier New";'> {</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>width</span><span style='color: black; font-family: "Courier New";'>:</span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>300px</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>height</span><span style='color: black; font-family: "Courier New";'>:</span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>100px</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>background-color</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>AliceBlue</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'>}</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><i><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>.container2</span></i><span style='color: black; font-family: "Courier New";'> {</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>position</span><span style='color: black; font-family: "Courier New";'>:</span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>relative</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>width</span><span style='color: black; font-family: "Courier New";'>:</span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>300px</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>height</span><span style='color: black; font-family: "Courier New";'>:</span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>100px</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>background-color</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>WhiteSmoke</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'>}</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='font-family: "Courier New";'> </span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><i><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>.inline-box</span></i><span style='color: black; font-family: "Courier New";'> {</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>position</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>static</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>display</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>inline-block</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>background-color</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>Olive</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'>}</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><i><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>.relative-box</span></i><span style='color: black; font-family: "Courier New";'> {</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>display</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>inline-block</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>position</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>relative</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>top</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>20px</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>left</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>20px</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>background-color</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>Orange</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'>}</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><i><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>.absolute-box</span></i><span style='color: black; font-family: "Courier New";'> {</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>display</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>inline-block</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>position</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>absolute</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>top</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>20px</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>left</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>20px</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>background-color</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>Orange</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'>}</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><i><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>.fixed-box</span></i><span style='color: black; font-family: "Courier New";'> {</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>position</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>fixed</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>top</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>10px</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>right</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>10px</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>background-color</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>DodgerBlue</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'>}</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><i><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>.sticky-box</span></i><span style='color: black; font-family: "Courier New";'> {</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>display</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>inline-block</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>position</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>sticky</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>top</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>20px</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>left</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>20px</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>background-color</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>OrangeRed</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'>}</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: teal; font-family: "Courier New";'></</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>style</span><span style='color: teal; font-family: "Courier New";'>></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: teal; font-family: "Courier New";'></</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>head</span><span style='color: teal; font-family: "Courier New";'>></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: teal; font-family: "Courier New";'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>body</span><span style='color: teal; font-family: "Courier New";'>></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: rgb(63, 95, 191); font-family: "Courier New";'><!-- relative --></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: teal; font-family: "Courier New";'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>div</span><span style='font-family: "Courier New";'> <span style="color: rgb(127, 0, 127);">class</span><span style="color: black;">=</span><i><span style="color: rgb(42, 0, 255);">"container1"</span></i><span style="color: teal;">></span></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: teal; font-family: "Courier New";'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>div</span><span style='font-family: "Courier New";'> <span style="color: rgb(127, 0, 127);">class</span><span style="color: black;">=</span><i><span style="color: rgb(42, 0, 255);">"inline-box"</span></i><span style="color: teal;">></</span><span style="color: rgb(63, 127, 127);">div</span><span style="color: teal;">></span></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: teal; font-family: "Courier New";'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>div</span><span style='font-family: "Courier New";'> <span style="color: rgb(127, 0, 127);">class</span><span style="color: black;">=</span><i><span style="color: rgb(42, 0, 255);">"inline-box"</span></i><span style="color: teal;">></</span><span style="color: rgb(63, 127, 127);">div</span><span style="color: teal;">></span></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'><!-- </span><span style="color: rgb(63, 95, 191);">바로</span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'> </span><span style="color: rgb(63, 95, 191);">앞</span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'> div</span><span style="color: rgb(63, 95, 191);">와</span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'> </span><span style="color: rgb(63, 95, 191);">상대적</span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'> </span><span style="color: rgb(63, 95, 191);">위치</span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'> --></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: teal; font-family: "Courier New";'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>div</span><span style='font-family: "Courier New";'> <span style="color: rgb(127, 0, 127);">class</span><span style="color: black;">=</span><i><span style="color: rgb(42, 0, 255);">"relative-box"</span></i><span style="color: teal;">></</span><span style="color: rgb(63, 127, 127);">div</span><span style="color: teal;">></span><span style="color: black;"> </span></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: teal; font-family: "Courier New";'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>div</span><span style='font-family: "Courier New";'> <span style="color: rgb(127, 0, 127);">class</span><span style="color: black;">=</span><i><span style="color: rgb(42, 0, 255);">"inline-box"</span></i><span style="color: teal;">></</span><span style="color: rgb(63, 127, 127);">div</span><span style="color: teal;">></span></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: teal; font-family: "Courier New";'></</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>div</span><span style='color: teal; font-family: "Courier New";'>></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: teal; font-family: "Courier New";'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>br</span><span style='color: teal; font-family: "Courier New";'>></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: rgb(63, 95, 191); font-family: "Courier New";'><!-- absolute --></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: teal; font-family: "Courier New";'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>div</span><span style='font-family: "Courier New";'> <span style="color: rgb(127, 0, 127);">class</span><span style="color: black;">=</span><i><span style="color: rgb(42, 0, 255);">"container2"</span></i><span style="color: teal;">></span></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: teal; font-family: "Courier New";'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>div</span><span style='font-family: "Courier New";'> <span style="color: rgb(127, 0, 127);">class</span><span style="color: black;">=</span><i><span style="color: rgb(42, 0, 255);">"inline-box"</span></i><span style="color: teal;">></</span><span style="color: rgb(63, 127, 127);">div</span><span style="color: teal;">></span></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: teal; font-family: "Courier New";'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>div</span><span style='font-family: "Courier New";'> <span style="color: rgb(127, 0, 127);">class</span><span style="color: black;">=</span><i><span style="color: rgb(42, 0, 255);">"inline-box"</span></i><span style="color: teal;">></</span><span style="color: rgb(63, 127, 127);">div</span><span style="color: teal;">></span></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'><!-- container2</span><span style="color: rgb(63, 95, 191);">가</span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'> relatvie </span><span style="color: rgb(63, 95, 191);">면</span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'> </span><span style="color: rgb(63, 95, 191);">이를</span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'> </span><span style="color: rgb(63, 95, 191);">기준으로</span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'> </span><span style="color: rgb(63, 95, 191);">함</span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'>--></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: teal; font-family: "Courier New";'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>div</span><span style='font-family: "Courier New";'> <span style="color: rgb(127, 0, 127);">class</span><span style="color: black;">=</span><i><span style="color: rgb(42, 0, 255);">"absolute-box"</span></i><span style="color: teal;">></</span><span style="color: rgb(63, 127, 127);">div</span><span style="color: teal;">></span><span style="color: black;"> </span></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: teal; font-family: "Courier New";'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>div</span><span style='font-family: "Courier New";'> <span style="color: rgb(127, 0, 127);">class</span><span style="color: black;">=</span><i><span style="color: rgb(42, 0, 255);">"inline-box"</span></i><span style="color: teal;">></</span><span style="color: rgb(63, 127, 127);">div</span><span style="color: teal;">></span></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: teal; font-family: "Courier New";'></</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>div</span><span style='color: teal; font-family: "Courier New";'>></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: rgb(63, 95, 191); font-family: "Courier New";'><!-- fixed --></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: teal; font-family: "Courier New";'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>div</span><span style='font-family: "Courier New";'> <span style="color: rgb(127, 0, 127);">class</span><span style="color: black;">=</span><i><span style="color: rgb(42, 0, 255);">"fixed-box"</span></i><span style="color: teal;">></</span><span style="color: rgb(63, 127, 127);">div</span><span style="color: teal;">></span></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: teal; font-family: "Courier New";'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>br</span><span style='color: teal; font-family: "Courier New";'>></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: rgb(63, 95, 191); font-family: "Courier New";'><!-- sticky --></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: teal; font-family: "Courier New";'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>div</span><span style='font-family: "Courier New";'> <span style="color: rgb(127, 0, 127);">class</span><span style="color: black;">=</span><i><span style="color: rgb(42, 0, 255);">"container1"</span></i><span style="color: teal;">></span></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: teal; font-family: "Courier New";'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>div</span><span style='font-family: "Courier New";'> <span style="color: rgb(127, 0, 127);">class</span><span style="color: black;">=</span><i><span style="color: rgb(42, 0, 255);">"inline-box"</span></i><span style="color: teal;">></</span><span style="color: rgb(63, 127, 127);">div</span><span style="color: teal;">></span></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: teal; font-family: "Courier New";'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>div</span><span style='font-family: "Courier New";'> <span style="color: rgb(127, 0, 127);">class</span><span style="color: black;">=</span><i><span style="color: rgb(42, 0, 255);">"sticky-box"</span></i><span style="color: teal;">></</span><span style="color: rgb(63, 127, 127);">div</span><span style="color: teal;">></span></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: teal; font-family: "Courier New";'></</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>div</span><span style='color: teal; font-family: "Courier New";'>></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: teal; font-family: "Courier New";'></</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>body</span><span style='color: teal; font-family: "Courier New";'>></span></p><p style="line-height: 12pt; -ms-word-break: keep-all;"><span style='color: teal; font-family: "Courier New";'></</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>html</span><span style='color: teal; font-family: "Courier New";'>></span></p><p ><span > </span></p><p class="MsoListParagraph" style="text-indent: -20pt; margin-left: 21.3pt;"><span style="font-family: Wingdings; font-size: 12pt;">n<span style='font: 7pt/normal "Times New Roman"; font-size-adjust: none; font-stretch: normal;'> </span></span><b><span style="font-size: 12pt;">Example: float</span></b></p><p ><span > </span></p><p ><span ><img width="534" height="235" src="data:image/png;base64,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"></span></p><p ><span > </span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: teal; font-family: "Courier New";'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>style</span><span style='color: teal; font-family: "Courier New";'>></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><b><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>div</span></b><span style='color: black; font-family: "Courier New";'> {</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>width</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>50px</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>height</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>50px</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>font</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>bold 15px arial, sans-serif</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>color</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>white</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'>}</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><i><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>.container1</span></i><span style='color: black; font-family: "Courier New";'> {</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>width</span><span style='color: black; font-family: "Courier New";'>:</span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>300px</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>height</span><span style='color: black; font-family: "Courier New";'>:</span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>100px</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>background-color</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>AliceBlue</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'>}</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='font-family: "Courier New";'> </span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><i><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>.float-box</span></i><span style='color: black; font-family: "Courier New";'> {</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>position</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>relative</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>float</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>right</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>display</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>inline-block</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>background-color</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>Olive</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>margin</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>1px</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'>}</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><i><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>.no-float-box</span></i><span style='color: black; font-family: "Courier New";'> {</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>position</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>relative</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>clear</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>both</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>display</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>inline-block</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>background-color</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>OliveDrab</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>margin</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>1px</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'>}</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: teal; font-family: "Courier New";'></</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>style</span><span style='color: teal; font-family: "Courier New";'>></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: teal; font-family: "Courier New";'>...</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: teal; font-family: "Courier New";'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>div</span><span style='font-family: "Courier New";'> <span style="color: rgb(127, 0, 127);">class</span><span style="color: black;">=</span><i><span style="color: rgb(42, 0, 255);">"container1"</span></i><span style="color: teal;">></span></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: teal; font-family: "Courier New";'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>div</span><span style='font-family: "Courier New";'> <span style="color: rgb(127, 0, 127);">class</span><span style="color: black;">=</span><i><span style="color: rgb(42, 0, 255);">"float-box"</span></i><span style="color: teal;">></span><span style="color: black;">1</span><span style="color: teal;"></</span><span style="color: rgb(63, 127, 127);">div</span><span style="color: teal;">></span></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: teal; font-family: "Courier New";'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>div</span><span style='font-family: "Courier New";'> <span style="color: rgb(127, 0, 127);">class</span><span style="color: black;">=</span><i><span style="color: rgb(42, 0, 255);">"float-box"</span></i><span style="color: teal;">></span><span style="color: black;">2</span><span style="color: teal;"></</span><span style="color: rgb(63, 127, 127);">div</span><span style="color: teal;">></span></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: teal; font-family: "Courier New";'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>div</span><span style='font-family: "Courier New";'> <span style="color: rgb(127, 0, 127);">class</span><span style="color: black;">=</span><i><span style="color: rgb(42, 0, 255);">"float-box"</span></i><span style="color: teal;">></span><span style="color: black;">3</span><span style="color: teal;"></</span><span style="color: rgb(63, 127, 127);">div</span><span style="color: teal;">></span></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: teal; font-family: "Courier New";'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>div</span><span style='font-family: "Courier New";'> <span style="color: rgb(127, 0, 127);">class</span><span style="color: black;">=</span><i><span style="color: rgb(42, 0, 255);">"no-float-box"</span></i><span style="color: teal;">></span><span style="color: black;">4</span><span style="color: teal;"></</span><span style="color: rgb(63, 127, 127);">div</span><span style="color: teal;">></span></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: teal; font-family: "Courier New";'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>div</span><span style='font-family: "Courier New";'> <span style="color: rgb(127, 0, 127);">class</span><span style="color: black;">=</span><i><span style="color: rgb(42, 0, 255);">"no-float-box"</span></i><span style="color: teal;">></span><span style="color: black;">5</span><span style="color: teal;"></</span><span style="color: rgb(63, 127, 127);">div</span><span style="color: teal;">></span></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: teal; font-family: "Courier New";'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>div</span><span style='font-family: "Courier New";'> <span style="color: rgb(127, 0, 127);">class</span><span style="color: black;">=</span><i><span style="color: rgb(42, 0, 255);">"no-float-box"</span></i><span style="color: teal;">></span><span style="color: black;">6</span><span style="color: teal;"></</span><span style="color: rgb(63, 127, 127);">div</span><span style="color: teal;">></span></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: teal; font-family: "Courier New";'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>div</span><span style='font-family: "Courier New";'> <span style="color: rgb(127, 0, 127);">class</span><span style="color: black;">=</span><i><span style="color: rgb(42, 0, 255);">"no-float-box"</span></i><span style="color: teal;">></span><span style="color: black;">7</span><span style="color: teal;"></</span><span style="color: rgb(63, 127, 127);">div</span><span style="color: teal;">></span></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: teal; font-family: "Courier New";'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>div</span><span style='font-family: "Courier New";'> <span style="color: rgb(127, 0, 127);">class</span><span style="color: black;">=</span><i><span style="color: rgb(42, 0, 255);">"no-float-box"</span></i><span style="color: teal;">></span><span style="color: black;">8</span><span style="color: teal;"></</span><span style="color: rgb(63, 127, 127);">div</span><span style="color: teal;">></span></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: teal; font-family: "Courier New";'></</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>div</span><span style='color: teal; font-family: "Courier New";'>></span></p><p ><span > </span></p><p >클래스<span > float-box</span>는<span > float: left</span>로 설정했으므로 왼쪽부터 배열된다<span >. </span>클래스<span > no-float-box</span>는<span > clear:both</span>로 설정했으므로<span > float </span>속성이 지워지고 보통의<span > position:relative </span>블록처럼 동작한다<span >. no-float-box</span>에<span > display: inline-block </span>설정이 없다면<span > float-box</span>의 수평 영역 아래에서부터 <span >no-float-box</span>의 위치가 시작된다<span >. </span></p><p ><span > </span></p><h2 style="margin-left: 1cm;"><b><span style="font-size: 14pt;">1.2<span style='font: 7pt/normal "Times New Roman"; font-size-adjust: none; font-stretch: normal;'> </span></span></b><b><span style="font-size: 18pt;">정렬</span></b></h2><p ><span > </span></p><p ><b><span style="font-size: 14pt;">블록 수평 중앙 정렬</span></b></p><p ><b>방법<span >1</span></b><span >: </span>컨테이너 내의 블록 요소의 마진을<span > margin: 0 auto; </span>로 설정해 중앙 정렬할 수 있다<span >. width</span>를 반드시 지정해야 하며<span >, display</span>는 <i><span >inline, inline-block</span></i>을 사용하면 정렬되지 않는다<span >. </span></p><p ><b>방법<span >2</span></b><span >: </span>정렬할 블록 요소 내에 반드시 텍스트가 있을 경우로<span >, </span>컨테이너에<span > text-align: center</span>를 설정한다<span >. </span>그리고<span >, </span>정렬할 블록은<span > display: inline-block</span>으로 설정한다<span >. block</span>으로 설정하면 정렬되지 않는다<span >. </span>물론 블록 내 텍스트도 함께 중앙 정렬된다<span >. </span></p><p ><span > </span></p><p class="MsoListParagraph" style="text-indent: -20pt; margin-left: 21.3pt;"><span style="font-family: Wingdings; font-size: 12pt;">n<span style='font: 7pt/normal "Times New Roman"; font-size-adjust: none; font-stretch: normal;'> </span></span><b><span style="font-size: 12pt;">Example: horizontal center – margin: 0 auto;</span></b></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><i><span style='color: rgb(63, 127, 127); font-family: "Courier New";'> </span></i></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><i><span style='color: rgb(63, 127, 127); font-family: "Courier New";'><img width="534" height="195" id="그림 17" src="data:image/png;base64,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AAEIdCMBJKQb7zp1hgAEIJAJASQkE4wdy2Tx4sUdK5uCIZCYAA01MaqKJURCKnbDcBcCEIBAeQggIeW5F3gCAQhAoGIEkJCK3TDchUDBBNasWbNly5aCC61HcbfccsugQYPmz59fj+rE1iIDCdm9e3dJABXpyfjx4w/+fdN+kMCiRYv0qysJE9yoE4Eff/zx74Htq6++0hmr4Pfff//5558Hr7pLbRLo6el5/vnn28ykC82lH7fffvvMmTNvuummGj8Q2pUQPbVXrFjx3nvvdbyJyAd5UpiKqH2oc3HIIYdEK75r165LL71UuvLmm292HAsO1IOAFOLbb79V0/rkk0/++fu2bdu2d955R38VJaj9Sz/siqRFyZRYJjJsk8Bf9mxtZtI95roXU6ZMMf2YNm2a9EN1Hz16dF0JtPWxd9OPww47rCSAJPXqiF1wwQW9e/fO+4ZJHi6++GI1ERX0+uuvP/7448ESv/zyy7vuumvBggVPP/30Kaeckp8zWuii9ppf/uRcEgIffvihtMGcOfXUU51XEomPP/5Yh0cfffQBBxxg53Xy/ffft/2DDjrouOOO866FHojDhw+X+caNGwcPHuydT04NNW3v/oQTTujXr593LZIYKuzYvHnzq6++OmHChHnz5i1dulRn3njjjbzLTeJb5mna+th72fTDpF56VkAsYvqh9qEuhkazojdGzUWXlEDJyhaL/HXPFvQ5dJh5O6tKhhs2bHjxxRdL663a9sCBA0PuSTbUYdLm9MMlUGKZtFmd9evXH7Nn006bWeVhfmHKLe/xEimuOo6zZs36+uuvr7/+elX5oYcekoTUUj/shnoOZJVQP6w+xaiI5EHxh3oZKvGMM86YNGlS7M9DCVwkm8fvxyNPPSJPOumkyy67TIMeUg79TZvJs88+63q4sl22bFkwEztUKSZUtgXTh4rTJWWY1oe800tLVJGsSlFWAtK+OO277777779/cq+UWCbJ08emVBg9ds+mnTazysNcg3WptrzHS+6880795JcsWaK/CtoUJCkcufLKK/Ooe0ny9JGQ0upHMSpizWL69OmuONOS2E3JlDhtuF1A4zj88MMlJPqbqixTi+OPP96sJACaDXKZBA9NqGxTB3bt2rWxBW3fvr2dYZZUzidPPGLEiHHjxiVP3ySlMRENdUszybDITDQe++ijj/77nk07Oiyy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"></span></i></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><i><span style='color: rgb(63, 127, 127); font-family: "Courier New";'> </span></i></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: teal; font-family: "Courier New";'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>style</span><span style='color: teal; font-family: "Courier New";'>></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: rgb(63, 95, 191); font-family: "Courier New";'>/* </span><span style="color: rgb(63, 95, 191);">수평</span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'> </span><span style="color: rgb(63, 95, 191);">중앙</span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'> </span><span style="color: rgb(63, 95, 191);">정렬</span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'> */</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><i><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>.container1</span></i><span style='color: black; font-family: "Courier New";'> {</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>position</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>relative</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>width</span><span style='color: black; font-family: "Courier New";'>:</span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>300px</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>height</span><span style='color: black; font-family: "Courier New";'>:</span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>100px</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>background-color</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>AliceBlue</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'>}</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: rgb(63, 95, 191); font-family: "Courier New";'>/* display</span><span style="color: rgb(63, 95, 191);">를</span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'> inline, inline-xxxx</span><span style="color: rgb(63, 95, 191);">로</span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'> </span><span style="color: rgb(63, 95, 191);">설정하면</span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'> </span><span style="color: rgb(63, 95, 191);">정렬</span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'> </span><span style="color: rgb(63, 95, 191);">안됨</span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'>*/</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><i><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>.h-center-box</span></i><span style='color: black; font-family: "Courier New";'> {</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>display</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>block</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>background-color</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>Olive</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>margin</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>0 auto</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'>}</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: teal; font-family: "Courier New";'></</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>style</span><span style='color: teal; font-family: "Courier New";'>></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='font-family: "Courier New";'>...</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: teal; font-family: "Courier New";'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>div</span><span style='font-family: "Courier New";'> <span style="color: rgb(127, 0, 127);">class</span><span style="color: black;">=</span><i><span style="color: rgb(42, 0, 255);">"container1"</span></i><span style="color: teal;">></span></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: teal; font-family: "Courier New";'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>div</span><span style='font-family: "Courier New";'> <span style="color: rgb(127, 0, 127);">class</span><span style="color: black;">=</span><i><span style="color: rgb(42, 0, 255);">"h-center-box "</span></i><span style="color: teal;">></</span><span style="color: rgb(63, 127, 127);">div</span><span style="color: teal;">></span></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: teal; font-family: "Courier New";'></</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>div</span><span style='color: teal; font-family: "Courier New";'>></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: teal; font-family: "Courier New";'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>br</span><span style='color: teal; font-family: "Courier New";'>></span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='font-family: "Courier New";'> </span></p><p ><b><span style="font-size: 14pt;">블록 수직 중앙 정렬</span></b></p><p >수직 중앙 정렬을<span > display</span>를 테이블 타입으로 지정하고 테이블의 정렬 속성<span > vertical-align</span>을 이용한다<span >. </span></p><p ><span > </span></p><p class="MsoListParagraph" style="text-indent: -20pt; margin-left: 21.3pt;"><span style="font-family: Wingdings; font-size: 12pt;">n<span style='font: 7pt/normal "Times New Roman"; font-size-adjust: none; font-stretch: normal;'> </span></span><b><span style="font-size: 12pt;">Example: vertical center – table cell</span></b></p><p ><span ><img width="540" height="204" id="그림 26" src="data:image/png;base64,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QAACiAp9AAIQgAAEMiOAqGSGsiOOFi1a1JF6qRQCiQjQURPhqrQxolLp00fwEIAABMpFAFEp1/kgGghAAAKVJoCoVPr0ETwEciewevXqLVu25F5NN1Zw6623DhkyZN68ed3YuF7blIGo7Nq1qyTIioxk/PjxB/yx6XOUwMKFC/U7LAkTwugmAj/99NP/Rravv/5aR6yBP/zwwxdffBH91n3VJoGNGze+8MILbTqpYXEpyh133DFjxoybbrqpVheEdkVF1/Hly5e///77He80ikGRFKYr6jEagBx44IGNDd+5c+cll1wipXnrrbc6joUAuoOANOO7775T1/r000//9se2bdu2d999V3+VSaj/S1HsG4mNzGSsIirYJoH/3L216aQ+xXUuJk+ebIoydepUKYraPmbMmPoQaOvV96YoBx98cEmQaTigwdr555/ft2/fvE+hBOOiiy5Sp1FFb7zxxhNPPBGt8auvvrr77rvnz5//zDPPnHTSSfkFo5tq1IPz84/nkhD46KOPpBYWzMknn+yikmx88skn2j3iiCP23XdfO66DH3zwgX3ef//9jznmmNSt0CVyxIgRKr5hw4YjjzwytZ+cOmrSDOC4444bMGBA6laEFFRqsnnz5tdee23ChAlz585dsmSJjrz55pt51xsSWwE2bb36vmyKYsMBKVwB+YopinqMhiGaA2s8VepA+koGMitbvvJfu7dozLHdAnpeOatYv379Sy+9VM7YFJX69uDBg2PhSUg0hNLmFMUZyFhF2mzOunXrjtq96UObrvIofkHCLe85FWmwhpIzZ8785ptvrr/+ejX54YcflqjURFHsFKec/iqholh7itEVCYZyFI1EVONpp502adKkpj8YGbj8N49fVAqfumiecMIJl156qaZKpCX6m9TJc88950bBKrt06dKoE9tVLSZdtkXtY9XpKzlMGkPe9lIXNSSrWuRKQNqXqz//+c/77LNPeFQyVpFw+6aWSrXP3b3pQ5uu8iiuKb5EW95zKnfddZd+8osXL9ZfJXZKpJSyXHHFFXm0vbQ+04hKaRWlGF2xjjJt2jRXnalL001mMk6apBfQXQ455BBJi/4mqsv049hjj7VSkgStKjkn0V2TLts0yF2zZk3TirZv397O5Eyi4MONR44cOW7cuHD7FpbGRDQ0dM3EYZFONIv72GOP/fPuTR+0W2Tt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"></span></p><p style="line-height: 12pt; -ms-word-break: keep-all;"><span > </span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: teal; font-family: "Courier New";'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>style</span><span style='color: teal; font-family: "Courier New";'>></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: rgb(63, 95, 191); font-family: "Courier New";'>/* </span><span style="color: rgb(63, 95, 191);">수직</span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'> </span><span style="color: rgb(63, 95, 191);">중앙</span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'> </span><span style="color: rgb(63, 95, 191);">정렬</span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'> <span >- display:block</span></span><span style="color: rgb(63, 95, 191);">인</span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'> </span><span style="color: rgb(63, 95, 191);">하위</span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'> </span><span style="color: rgb(63, 95, 191);">요소는</span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'> </span><span style="color: rgb(63, 95, 191);">정렬</span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'> </span><span style="color: rgb(63, 95, 191);">안됨</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: rgb(63, 95, 191); font-family: "Courier New";'> table-cell</span><span style="color: rgb(63, 95, 191);">은</span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'> inline</span><span style="color: rgb(63, 95, 191);">으로</span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'> </span><span style="color: rgb(63, 95, 191);">배열</span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'> </span><span style="color: rgb(63, 95, 191);">됨</span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'> <span >*/</span></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='font-family: "Courier New";'> </span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><i><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>.v-center-container</span></i><span style='color: black; font-family: "Courier New";'> {</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>display</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>table-cell</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>vertical-align</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>middle</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>width</span><span style='color: black; font-family: "Courier New";'>:</span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>300px</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>height</span><span style='color: black; font-family: "Courier New";'>:</span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>100px</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>background-color</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>AliceBlue</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'>}</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><i><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>.box</span></i><span style='color: black; font-family: "Courier New";'> {</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>display</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>inline-block</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>background-color</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>Olive</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'>}</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: teal; font-family: "Courier New";'></</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>style</span><span style='color: teal; font-family: "Courier New";'>></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='font-family: "Courier New";'> </span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: teal; font-family: "Courier New";'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>div</span><span style='font-family: "Courier New";'> <span style="color: rgb(127, 0, 127);">class</span><span style="color: black;">=</span><i><span style="color: rgb(42, 0, 255);">"v-center-container"</span></i><span style="color: teal;">></span></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: teal; font-family: "Courier New";'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>div</span><span style='font-family: "Courier New";'> <span style="color: rgb(127, 0, 127);">class</span><span style="color: black;">=</span><i><span style="color: rgb(42, 0, 255);">"box"</span></i><span style="color: teal;">></</span><span style="color: rgb(63, 127, 127);">div</span><span style="color: teal;">></span></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: teal; font-family: "Courier New";'></</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>div</span><span style='color: teal; font-family: "Courier New";'>></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='font-family: "Courier New";'> </span></p><p ><b><span style="font-size: 14pt;">블록 수직 수평 중앙 정렬</span></b></p><p style="-ms-word-break: keep-all;"><b>방법<span >1:</span></b><span > </span>정렬할 블록의 절대 위치와 마진을 조절하한다<span >. display:absolute</span>로 하고 부모의 중앙에<span > top-left </span>가 오도록 한 후에 마진 위치를 조정하여 정렬한다<span >. margin</span>을 지정하는 다른 방법으로<span > -25%</span>로 지정할 수도 있다<span >. % </span>길이의 기준은 컨테이너의 길이이다<span >. </span></p><p style="-ms-word-break: keep-all;"><b>방법<span >2:</span></b><span > transform: tanslate(-50%, -50%)</span>를 이용할 수도 있다<span >. % </span>길이의 기준은 정렬할 <span >box</span>의 길이이다<span >. </span></p><p style="-ms-word-break: keep-all;"><b>방법<span >3:</span></b><span > </span>블록에 텍스트를 포함하는 경우에 앞서 알아본 수평정렬<span >-</span>방법<span >2</span>와 수직 정렬 방법을 컨테이너에 적용한다<span >. </span></p><p ><span > </span></p><p class="MsoListParagraph" style="text-indent: -20pt; margin-left: 21.3pt;"><span style="font-family: Wingdings; font-size: 12pt;">n<span style='font: 7pt/normal "Times New Roman"; font-size-adjust: none; font-stretch: normal;'> </span></span><b><span style="font-size: 12pt;">Example: vertical & horizontal center – absolute& margin</span></b></p><p style="line-height: 12pt; -ms-word-break: keep-all;"><span > </span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: rgb(63, 95, 191); font-family: "Courier New";'>/* </span><span style="color: rgb(63, 95, 191);">수직</span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'> </span><span style="color: rgb(63, 95, 191);">수평</span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'> </span><span style="color: rgb(63, 95, 191);">중앙</span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'> </span><span style="color: rgb(63, 95, 191);">정렬</span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'> 1 */</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><i><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>.vh-center-box</span></i><span style='color: black; font-family: "Courier New";'> {</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>position</span><span style='color: black; font-family: "Courier New";'>:</span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>absolute</span></i><span style='color: black; font-family: "Courier New";'>; </span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'>/* </span><span style="color: rgb(63, 95, 191);">부모</span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'> div</span><span style="color: rgb(63, 95, 191);">는</span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'> position:relative</span><span style="color: rgb(63, 95, 191);">로</span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'> </span><span style="color: rgb(63, 95, 191);">설정</span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'>*/</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>top</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>50%</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>left</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>50%</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>margin-top</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>-25%</span></i><span style='color: black; font-family: "Courier New";'>; </span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'>/* -50px: height/2*/</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>margin-left</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>-25%</span></i><span style='color: black; font-family: "Courier New";'>; </span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'>/* -50px: width/2*/</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>width</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>100px</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>height</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>100px</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p style="line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'>}</span></p><p ><span > </span></p><p class="MsoListParagraph" style="text-indent: -20pt; margin-left: 21.3pt;"><span style="font-family: Wingdings; font-size: 12pt;">n<span style='font: 7pt/normal "Times New Roman"; font-size-adjust: none; font-stretch: normal;'> </span></span><b><span style="font-size: 12pt;">Example: vertical & horizontal center – absolute& transform</span></b></p><p style="line-height: 12pt; -ms-word-break: keep-all;"><span > </span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: rgb(63, 95, 191); font-family: "Courier New";'>/* </span><span style="color: rgb(63, 95, 191);">수직</span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'> </span><span style="color: rgb(63, 95, 191);">수평</span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'> </span><span style="color: rgb(63, 95, 191);">중앙</span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'> </span><span style="color: rgb(63, 95, 191);">정렬</span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'> <span >2 */</span></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><i><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>.vh-center-box</span></i><span style='color: black; font-family: "Courier New";'> {</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>position</span><span style='color: black; font-family: "Courier New";'>:</span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>absolute</span></i><span style='color: black; font-family: "Courier New";'>; </span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'>/* </span><span style="color: rgb(63, 95, 191);">부모</span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'> div</span><span style="color: rgb(63, 95, 191);">는</span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'> position:relative</span><span style="color: rgb(63, 95, 191);">로</span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'> </span><span style="color: rgb(63, 95, 191);">설정</span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'>*/</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>display</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>inline-block</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'> top</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>50%</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>left</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>50%</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: rgb(127, 0, 127); font-family: "Courier New";'> transform</span><span style='color: black; font-family: "Courier New";'>:</span><span style='font-family: "Courier New";'> <i><span style="color: rgb(42, 0, 225);">translate(-50%,-50%)</span></i><span style="color: black;">;</span></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: rgb(127, 0, 127); font-family: "Courier New";'> width</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>100px</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>height</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>100px</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p style="line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'>}</span></p><p style="line-height: 12pt; -ms-word-break: keep-all;"><span > </span></p><p class="MsoListParagraph" style="text-indent: -20pt; margin-left: 21.3pt;"><span style="font-family: Wingdings; font-size: 12pt;">n<span style='font: 7pt/normal "Times New Roman"; font-size-adjust: none; font-stretch: normal;'> </span></span><b><span style="font-size: 12pt;">Example: vertical & horizontal center – table-cell </span></b></p><p style="-ms-word-break: keep-all;"><span ><img width="312" height="110" id="그림 29" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAATgAAABuCAIAAAA8vZhjAAAAAXNSR0IArs4c6QAAAAlwSFlzAAAOxAAADsQBlSsOGwAABQNJREFUeF7tnD9IG2EchmMXBymhUkKFbnESdCuU4hZxvKFQHNxNKC6Cg+AmCA5CFinG3aF0u1F0cyi4VXAySxECbhkyOKX3J9EigV5vMHnfe4JQ/1za3/u838P35Rqc6vf7JR4QgMBkE3g12eMxHQQgEBNAVNYBBAQIIKpASYwIAURlDUBAgMDUs5tJ3QeBoRkRAsYEytMjwrGjGjdONB8CiOrTJUmMCSCqcblE8yGAqD5dksSYAKIal0s0HwKI6tMlSYwJIKpxuUTzIYCoPl2SxJgAohqXSzQfAojq0yVJjAkgqnG5RPMhgKg+XZLEmACiGpdLNB8CiOrTJUmMCSCqcblE8yGAqD5dksSYAKIal0s0HwKI6tMlSYwJIKpxuUTzIYCoPl2SxJgAohqXSzQfAojq0yVJjAkgqnG5RPMhgKg+XZLEmAC/gDt/ubvf5vM/uWDP3P96W7DE+ePyC7jzs+OZEBgvAY6+4+XPvw6BTAQ4+mbCNPKilzv6LodHHxZGzXB/HX5qtfNHeLFncvTNjpqjb3ZW7ldWW/sbrSX3lE752FHzt/lyO+rTjNs7W433pZuzZhDmHjzdn3sXJyf1X7n/kv98IjtqdmDsqNlZSV0ZbY9bt0fpx/r2YPTIxvg7YZB8HawPf/p4ip6pbWzd7ixLJS3wsNxMEi8/sjSolR9DVBoDVy+Ds/vouwurkbrL4Wol+vzm7PRQPG1xx0dU7e6Dj7Gl3XZjszm/2Wxc90qlyud6NQ4Vnh7fRX9E6iY3ou6uktPyZbB5dRP/ODr6NucPLrXjF2d6RJXuemVuJp6/XD1ODrrHi/GXlTdzaajDg9TJxGSclG4aUaXr+8fwS7Nv0yvK775wj1e6aUSVru+8E511n46+0ek3/hhsntXWWjV+bRo/Zmprwcrg806nKx26kMMjqnbt4c+LyLrh0Te995ve6V2p14YvX8P0mr30teujutz1FeoeUYXKGjVqu76beDh8DP6LdSnYi1+v9i6+h+el6Jr4xWplsZa8yaH943eyD0eP17PDbVYcg/34vOEhf8XjeMND/mnH+0ze8JCdP294yM6KKyEwWQQ4+k5WH0wDgZEEEJWFAQEBAogqUBIjQgBRWQMQECCAqAIlMSIEEJU1AAEBAogqUBIjQgBRWQMQECCAqAIlMSIEEJU1AAEBAogqUBIjQgBRWQMQECCAqAIlMSIEEJU1AAEBAogqUBIjQgBRWQMQECCAqAIlMSIEEJU1AAEBAogqUBIjQgBRWQMQECCAqAIlMSIEEJU1AAEBAogqUBIjQgBRWQMQECCAqAIlMSIEEJU1AAEBAogqUBIjQgBRWQMQECCAqAIlMSIEEJU1AAEBAogqUBIjQgBRWQMQECCAqAIlMSIEEJU1AAEBAlP9fv/vMbsPAkMzIgSMCZSnR4RjRzVunGg+BBDVp0uSGBNAVONyieZDAFF9uiSJMQFENS6XaD4EENWnS5IYE0BU43KJ5kMAUX26JIkxAUQ1LpdoPgQQ1adLkhgTQFTjconmQwBRfbokiTEBRDUul2g+BBDVp0uSGBNAVONyieZDAFF9uiSJMQFENS6XaD4EENWnS5IYE0BU43KJ5kMAUX26JIkxAUQ1LpdoPgQQ1adLkhgTQFTjconmQwBRfbokiTGB57+A2zgq0SCgS4AdVbc7Ji8QAUQtUNlE1SWAqLrdMXmBCCBqgcomqi6BP1Uhwyq+YL6qAAAAAElFTkSuQmCC"></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: rgb(63, 95, 191); font-family: "Courier New";'>/* </span><span style="color: rgb(63, 95, 191);">수직</span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'> </span><span style="color: rgb(63, 95, 191);">중앙</span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'> </span><span style="color: rgb(63, 95, 191);">정렬</span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'> <span >- display:block</span></span><span style="color: rgb(63, 95, 191);">인</span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'> </span><span style="color: rgb(63, 95, 191);">하위</span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'> </span><span style="color: rgb(63, 95, 191);">요소는</span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'> </span><span style="color: rgb(63, 95, 191);">정렬</span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'> </span><span style="color: rgb(63, 95, 191);">안됨</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: rgb(63, 95, 191); font-family: "Courier New";'> table-cell</span><span style="color: rgb(63, 95, 191);">은</span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'> inline</span><span style="color: rgb(63, 95, 191);">으로</span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'> </span><span style="color: rgb(63, 95, 191);">배열</span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'> </span><span style="color: rgb(63, 95, 191);">됨</span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'> <span >*/</span></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><i><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>.vh-center-container</span></i><span style='color: black; font-family: "Courier New";'> {</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'>/* </span><span style="color: rgb(63, 95, 191);">수평</span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'> </span><span style="color: rgb(63, 95, 191);">정렬</span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'> */</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>text-align</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>center</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'>/* </span><span style="color: rgb(63, 95, 191);">수직</span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'> </span><span style="color: rgb(63, 95, 191);">정렬</span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'> */</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>vertical-align</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>middle</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>display</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>table-cell</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>width</span><span style='color: black; font-family: "Courier New";'>:</span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>300px</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>height</span><span style='color: black; font-family: "Courier New";'>:</span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>100px</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>background-color</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>AliceBlue</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>font</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>bold 15px arial, sans-serif</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>color</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>white</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'>}</span></p><p style="line-height: 12pt; -ms-word-break: keep-all;"><span > </span></p><p style="-ms-word-break: keep-all;"><span >display: table-cell</span>인 요소가 연속으로 오면 수평으로 배열된다<span >. </span></p><p style="line-height: 12pt; -ms-word-break: keep-all;"><span > </span></p><p ><b><span style="font-size: 14pt;">완쪽<span >, </span>오른쪽<span >, </span>위<span >, </span>아래 정렬</span></b></p><p >왼쪽<span >, </span>오른쪽<span >, </span>위<span >, </span>아래는<span > position:absolute</span>와<span > top, right, bottom, left</span>를 이용한다<span >. </span>예를 들어<span >, </span></p><p style="line-height: 12pt; -ms-word-break: keep-all;"><span > </span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: rgb(63, 95, 191); font-family: "Courier New";'>/* </span><span style="color: rgb(63, 95, 191);">오른쪽</span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'> </span><span style="color: rgb(63, 95, 191);">정렬</span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'> */</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><i><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>.right</span></i><span style='color: black; font-family: "Courier New";'> {</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>position</span><span style='color: black; font-family: "Courier New";'>:</span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>absolute</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>right</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>0px</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p style="line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'>}</span></p><p ><span > </span></p><p ><b><span style="font-size: 14pt;">블록 안의 텍스트 정렬</span></b></p><p >블록 안의 텍스트를 수평<span >, </span>수직 정렬하는 방법은 블록의 정렬과 같은 방법을 이용한다<span >. </span></p><p style="line-height: 12pt; -ms-word-break: keep-all;"><span > </span></p><p class="MsoListParagraph" style="text-indent: -20pt; margin-left: 21.3pt;"><span style="font-family: Wingdings; font-size: 12pt;">n<span style='font: 7pt/normal "Times New Roman"; font-size-adjust: none; font-stretch: normal;'> </span></span><b><span style="font-size: 12pt;">Example: text align</span></b></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: teal; font-family: "Courier New";'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>style</span><span style='color: teal; font-family: "Courier New";'>></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><i><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>.text-vh-center-container</span></i><span style='color: black; font-family: "Courier New";'> {</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'>/* </span><span style="color: rgb(63, 95, 191);">수평</span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'> </span><span style="color: rgb(63, 95, 191);">정렬</span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'> */</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>text-align</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>center</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'>/* </span><span style="color: rgb(63, 95, 191);">수직</span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'> </span><span style="color: rgb(63, 95, 191);">정렬</span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'> */</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>vertical-align</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>middle</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>display</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>table-cell</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>width</span><span style='color: black; font-family: "Courier New";'>:</span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>200px</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>height</span><span style='color: black; font-family: "Courier New";'>:</span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>100px</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>background-color</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>OliveDrab</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>font</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>bold 15px arial, sans-serif</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>color</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>white</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'>}</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: teal; font-family: "Courier New";'></</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>style</span><span style='color: teal; font-family: "Courier New";'>></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: teal; font-family: "Courier New";'>...</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: teal; font-family: "Courier New";'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>div</span><span style='font-family: "Courier New";'> <span style="color: rgb(127, 0, 127);">class</span><span style="color: black;">=</span><i><span style="color: rgb(42, 0, 255);">"text-vh-center-container"</span></i><span style="color: teal;">></span></span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: teal; font-family: "Courier New";'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>p</span><span style='color: teal; font-family: "Courier New";'>></span><span style='color: black; font-family: "Courier New";'>TextA</span><span style='color: teal; font-family: "Courier New";'></</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>p</span><span style='color: teal; font-family: "Courier New";'>><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>p</span><span style='color: teal; font-family: "Courier New";'>></span><span style='color: black; font-family: "Courier New";'>TextB</span><span style='color: teal; font-family: "Courier New";'></</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>p</span><span style='color: teal; font-family: "Courier New";'>></span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: teal; font-family: "Courier New";'></</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>div</span><span style='color: teal; font-family: "Courier New";'>></span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='font-family: "Courier New";'> </span></p><p >다른 방법으로 <span >display: table-cell</span>을 이용하지 않는 경우<span >, </span>텍스트의 높이를 컨테이너 영역의 높이와 같이 설정하여 방법도 있다<span >. text-align: center</span>는 유지한다<span >. </span>단<span >, </span>여러 줄의 텍스트를 쓸 수 없다<span >. </span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='font-family: "Courier New";'> </span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><i><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>.text-fit-height</span></i><span style='color: black; font-family: "Courier New";'> {</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>padding</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>0px</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>height</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>100px</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>line-height</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>100px</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'>}</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='font-family: "Courier New";'>...</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: teal; font-family: "Courier New";'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>div</span><span style='font-family: "Courier New";'> <span style="color: rgb(127, 0, 127);">class</span><span style="color: black;">=</span><i><span style="color: rgb(42, 0, 255);">"text-h-center-container"</span></i><span style="color: teal;">></span></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: teal; font-family: "Courier New";'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>p</span><span style='font-family: "Courier New";'> <span style="color: rgb(127, 0, 127);">class</span><span style="color: black;">=</span><i><span style="color: rgb(42, 0, 255);">"text-fit-height"</span></i><span style="color: teal;">></span><span style="color: black;">Text</span><span style="color: teal;"></</span><span style="color: rgb(63, 127, 127);">p</span><span style="color: teal;">></span></span></p><p style="line-height: 12pt; -ms-word-break: keep-all;"><span style='color: teal; font-family: "Courier New";'></</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>div</span><span style='color: teal; font-family: "Courier New";'>></span></p><p ><span > </span></p><p ><b><span style="font-size: 14pt;">블록과 텍스트의 정렬</span></b></p><p style="line-height: 12pt; -ms-word-break: keep-all;"><span > </span></p><p class="MsoListParagraph" style="text-indent: -20pt; margin-left: 21.3pt;"><span style="font-family: Wingdings; font-size: 12pt;">n<span style='font: 7pt/normal "Times New Roman"; font-size-adjust: none; font-stretch: normal;'> </span></span><b><span style="font-size: 12pt;">Example: text and div</span></b></p><table class="MsoTableGrid" style="border: currentColor; border-image: none; border-collapse: collapse;" border="0" cellspacing="0" cellpadding="0"><tbody><tr><td width="307" valign="top" style="padding: 0cm 5.4pt; width: 230.6pt;"><p ><b><span >Display</span></b></p><p ><span ><img width="255" height="57" id="그림 6" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAP8AAAA5CAIAAAB222o0AAAAAXNSR0IArs4c6QAAAAlwSFlzAAAOwwAADsQBiC4+owAAA6hJREFUeF7tnety4yAMhTf7/u+cutWMqgpCEBdFRsc/Om0NEpzzAbLTnX08n89/uKBASgX+p5w1Jg0FvhUA/eAgrwKPkyufxyORsahg7WafTn8SJq51nmSmdsQbPVD5LJUTwW6lwPl7/6Oof2Sxd92drP16IpRjYEhmsv+mxt4/tOpS7P0XYfJqsDik4ftOMvvVWv34vj9a7FEgBf17pEPU2ysA+v9YeB0LfJXetu9S++GDpZq3jEa/ocbym9uT+IkJpKO/UabTLb4Uee27jP5YHS+D96wfGiQXUZ8g54ScKejv3LMVuNePDGK5ZkrKex5/q8iojjKv/J52+rHVdQKqG+aQgn6Hp959XPIC2JdiA1f3CJmCfmWF2lDnjeqpVdpZ5OlURqMBY9efd0pFyEj/chHpbJlZA+p0UqAT+jPxl0/5jICgf5mPmwDlXX9T/GXzv2GgjPRXq4iSLdmsere0ewzQRvDGA/ENYQs35KOryZ/P/6tlNPug8JKNq291uCPfLddSu0Z/dbea+m1w6kXvPsPBFX5A59Mf3oIVA8Tf+QypmLHyGRIKnQ5U4OXebyoYej7EKds0XmLMvN37rRby7Ij2Gi+oZb5LrEV/9b0bDa/n9XNPm1f194wImem/vWUzxtv7Giof6wuNmf3bPhH0qCgAy9pYGOh/Faj9OSUdFPSVr35Uq13Kkkmm4Fz9WbK1hGXk+Cz9VGbIi9GUjKpmjYpfgih79XShYVwR+JtsWPfMF5axSgb6q3V8Z3nT2axEn38jD3F1oJseMHr4OKYNLBuvfNT52CB4rKqZgYwXANBXW4b0ApaN069KmkbdL1vOMK36tstTWgADp8rCEUYLBctMjhgqn2rcrfwpL6uv83qeB0yKHN8Ylo3U/aGwYAutL/VCzSLVYAJaNrv37/OvxFq+TZLnABbAPhdMkW9n2Sz9NGH1pLWqGlHBO0t87mVyLk9jWMZeH/3UmOzvfPIs4FUznd37V40DcaCAvwKg319zZIyiAOiP4gTG4a8A6PfXHBmjKAD6oziBcfgrAPr9NUfGKAqA/ihOYBz+CoB+f82RMYoCoD+KExiHvwKg319zZIyiAOiP4gTG4a8A6PfXHBmjKAD6oziBcfgrAPr9NUfGKAqA/ihOYBz+CoB+f82RMYoCoD+KExiHvwKg319zZIyiAOiP4gTG4a/A6f+u11/RT2XE/1xkV/5o+u1yoEcqBVD5pLIbk/2jAOgHEHkVAP15vcfMvwB5WNmwuyHOmQAAAABJRU5ErkJggg=="></span></p></td><td width="307" valign="top" style="padding: 0cm 5.4pt; width: 230.6pt;"><p ><b><span >Display</span></b></p><p ><span ><img width="230" height="55" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOYAAAA3CAIAAACXaqFmAAAAAXNSR0IArs4c6QAAAAlwSFlzAAAOxAAADsQBlSsOGwAAA01JREFUeF7tmut24yAMhDf7/u+custZqiNuAtupmRn/6mkwaDSfkUj8er/ff3QpA/tk4O8+oSpSZeA7Ay/AXfb1IvKWr0iCIkti5PFwkig1m5AaA6IdGUOqkMXwkUiFkCUyG0OqkMXwkUiFkCUyG0OqkMXwkUiFkCUyG0OqkMXwkUiFkCUyG0OqkMXwkUiFkCUyG0OqkMXwkUiFkCUyG0OqkMXwkUiFf/nwVbxsal+oPT4dvl87HFMukfM9nLzjzM+6PK/k/VOKYNnME1dB1nFjERzieCwdGZMjnBrc18WM7PaWzSA7bgyOdHT2xXKtMzvlTOQa28wAtmVjZFuJOTi2Vzksgd4fM5zcDiifHLtEXivd4sJz9049hNUgIzOUMeT/nHngIku3Yn6yZcGcLCKbqrC9ch5tQt2wYK7tXZFbUhiH4PxHEt+KMJia88NsAC6e85PPzrCFZRFRY2Sr7Waw+geHua3U3mVrnKt3F/bBkUxtNAbbsgqyrpx1sFsr+me8z9Rey+uwXA4LeqQa9Iv1cgtUdkHYllWQdfW00266wneGRWdYh6FE7ez+3bml371EepuFeHLDnXMYgT7YAmFY1lIxbgxae8MsNHGg3TNT/QYnYnCkCJS02faj+qkTcpLXPNvdLdBynBHjrrIsstYispGp7xiT8x75HucDx6/7OLipBbrDlP6cU5ZFwnscsiWL9ruI1sksIjVCeWSePCay0w/tvLwFmpJwyeD7LKuGt4hsitJeFwLhJg92IPmuS2yITJJ28TPgfrKewlg2fY6JePnLY/7/8l6ynotU+Yc7/6V7h4c2e4oabqjVprx/VKrO/xMVz9sUJk2Lu+wvQ7m0fJW/alHLbHVKng1hba/9cD1dytkTb0LeZV2+7Sbn8LXFvbo323N9a2ftH8Van1aXLgdXA06/+D0RqztjgkX2zqQ9Zm41Bo+xQoEoA80MEPWyogAjA0IWw0ciFUKWyGwMqUIWw0ciFUKWyGwMqUIWw0ciFUKWyGwMqUIWw0ciFUKWyGwMqUIWw0ciFUKWyGwMqUIWw0ciFUKWyGwMqUIWw0ciFaDvy/I4qFe8ebyW0k0zoMZgU+N4wxayvN5vqlzIbmocb9hCltf7TZV/AZ/w4eZNomtdAAAAAElFTkSuQmCC"></span></p></td></tr><tr><td width="307" valign="top" style="padding: 0cm 5.4pt; width: 230.6pt;"><p ><b><span >CSS</span></b></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><b><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>div</span></b><span style='color: black; font-family: "Courier New";'> {</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>display</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>inline-block</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>position</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>relative</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>vertical-align</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>middle</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>border</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>1px solid red</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>font-size</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>1em</span></i><span style='color: black; font-family: "Courier New";'>; </span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>margin</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>0</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>height</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>3em</span></i><span style='color: black; font-family: "Courier New";'>; </span></p><p style="line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'>}</span></p></td><td width="307" valign="top" style="padding: 0cm 5.4pt; width: 230.6pt;"><p ><b><span >CSS</span></b></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><b><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>div</span></b><span style='color: black; font-family: "Courier New";'> {</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>display</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>inline-block</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>position</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>relative</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>vertical-align</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>middle</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>border</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>1px solid red</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>font-size</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>1em</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>padding</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>1em</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>box-sizing</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>border-box</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p ><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>margin</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>0</span></i></p><p ><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>height</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>3em</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p ><span style='color: black; font-family: "Courier New";'>}</span></p></td></tr></tbody></table><p ><span > </span></p><p style="line-height: 12pt; -ms-word-break: keep-all;"><b><span >HTML</span></b></p><p style="line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'>PlainText</span><span style='color: teal; font-family: "Courier New";'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>div</span><span style='color: teal; font-family: "Courier New";'>></span><span style='color: black; font-family: "Courier New";'>Block Text</span><span style='color: teal; font-family: "Courier New";'></</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>div</span><span style='color: teal; font-family: "Courier New";'>></span><span style='color: black; font-family: "Courier New";'>PlainText</span></p><p style="line-height: 12pt; -ms-word-break: keep-all;"><span > </span></p><p ><span >div</span>의<span > vertical-align: middle</span>은<span > div</span>를 중앙으로 정렬한다<span >. div </span>안의 텍스트를 중앙으로 정렬하려면 <span >“</span>수직 패딩<span >” + font-size = div height </span>이도록 설정하거나<span > line-height = div height </span>이도록 설정한다<span >. </span></p><p >외부 텍스트와<span > div </span>텍스트 라인을 맞추려면<span > vertical-align: baseline</span>으로 한다<span >. </span></p><p style="line-height: 12pt; -ms-word-break: keep-all;"><span > </span></p><p class="MsoListParagraph" style="text-indent: -20pt; margin-left: 21.3pt;"><span style="font-family: Wingdings; font-size: 12pt;">n<span style='font: 7pt/normal "Times New Roman"; font-size-adjust: none; font-stretch: normal;'> </span></span><b><span style="font-size: 12pt;">Example: text and button</span></b></p><table class="MsoTableGrid" style="border: currentColor; border-image: none; border-collapse: collapse;" border="0" cellspacing="0" cellpadding="0"><tbody><tr><td width="307" valign="top" style="padding: 0cm 5.4pt; width: 230.6pt;"><p ><b><span >Display</span></b></p><p ><span ><img width="233" height="53" src="data:image/png;base64,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"></span></p></td><td width="307" valign="top" style="padding: 0cm 5.4pt; width: 230.6pt;"><p ><b><span >Display</span></b></p><p ><span ><img width="231" height="54" src="data:image/png;base64,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"></span></p></td></tr><tr><td width="307" valign="top" style="padding: 0cm 5.4pt; width: 230.6pt;"><p ><b><span >CSS</span></b></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><b><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>button</span></b><span style='color: black; font-family: "Courier New";'> {</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>display</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>inline-block</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>position</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>relative</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>font-size</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>1em</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>vertical-align</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>middle</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>padding</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>0</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>margin</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>0</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>height</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>3em</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p ><span style='color: black; font-family: "Courier New";'>}</span></p></td><td width="307" valign="top" style="padding: 0cm 5.4pt; width: 230.6pt;"><p ><b><span >CSS</span></b></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>vertical-align</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>baseline</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p ><span > </span></p></td></tr></tbody></table><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span></p><p ><b><span >HTML</span></b></p><p style="line-height: 12pt;"><span style='color: black; font-family: "Courier New";'>PlainText</span><span style='color: teal; font-family: "Courier New";'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>button</span><span style='color: teal; font-family: "Courier New";'>></span><span style='color: black; font-family: "Courier New";'>Button Text</span><span style='color: teal; font-family: "Courier New";'></</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>button</span><span style='color: teal; font-family: "Courier New";'>></span><span style='color: black; font-family: "Courier New";'>PlainText</span></p><p style="line-height: 12pt;"><span > </span></p><p ><span >button</span>의<span > vertical-align: middle</span>은<span > button</span>을 중앙 정렬한다<span >. button</span>은 버튼 안의 텍스트를 중앙으로 자동 정렬한다<span >. </span>중앙 정렬된 버튼 텍스트는 외부 텍스트 라인보다 약간 밑으로 내려간다<span >. </span>버튼 텍스트와 외부 텍스트를 맞추려면<span > vertical-align: baseline</span>으로 한다<span >. </span></p><p style="line-height: 12pt; -ms-word-break: keep-all;"><span > </span></p><p class="MsoListParagraph" style="text-indent: -20pt; margin-left: 21.3pt;"><span style="font-family: Wingdings; font-size: 12pt;">n<span style='font: 7pt/normal "Times New Roman"; font-size-adjust: none; font-stretch: normal;'> </span></span><b><span style="font-size: 12pt;">Example: inside button</span></b></p><p ><b><span >Display</span></b></p><table class="MsoTableGrid" style="border: currentColor; border-image: none; border-collapse: collapse;" border="0" cellspacing="0" cellpadding="0"><tbody><tr><td width="177" style="padding: 0cm 5.4pt; width: 133pt;"><p ><b><span >vertical-align: middle;</span></b></p></td><td width="382" style="padding: 0cm 5.4pt; width: 286.8pt;"><p ><b><span ><img width="366" height="61" src="data:image/png;base64,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"></span></b></p></td></tr><tr><td width="177" style="padding: 0cm 5.4pt; width: 133pt;"><p ><b><span >vertical-align: baseline;</span></b></p></td><td width="382" style="padding: 0cm 5.4pt; width: 286.8pt;"><p ><b><span ><img width="359" height="58" id="그림 8" src="data:image/png;base64,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"></span></b></p></td></tr></tbody></table><p align="left" style="text-align: left; -ms-word-break: keep-all;"><b><span style='font-family: "Courier New";'>HTML</span></b></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'>PlainText</span><span style='color: teal; font-family: "Courier New";'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>button</span><span style='color: teal; font-family: "Courier New";'>></span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: teal; font-family: "Courier New";'> <</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>img</span><span style='font-family: "Courier New";'> <span style="color: rgb(127, 0, 127);">src</span><span style="color: black;">=</span><i><span style="color: rgb(42, 0, 255);">"./img/home.png"</span></i><span style="color: teal;">></span></span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: teal; font-family: "Courier New";'> <</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>span</span><span style='font-family: "Courier New";'> <span style="color: rgb(127, 0, 127);">class</span><span style="color: black;">=</span><i><span style="color: rgb(42, 0, 255);">"icon_calendar"</span></i><span style="color: teal;">></</span><span style="color: rgb(63, 127, 127);">span</span><span style="color: teal;">></span></span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: teal; font-family: "Courier New";'> </span><span style='color: black; font-family: "Courier New";'>PlainText</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: teal; font-family: "Courier New";'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>span</span><span style='color: teal; font-family: "Courier New";'>></span><span style='color: black; font-family: "Courier New";'>SpanText</span><span style='color: teal; font-family: "Courier New";'></</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>span</span><span style='color: teal; font-family: "Courier New";'>></span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: teal; font-family: "Courier New";'> <</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>a</span><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>href</span><span style='color: black; font-family: "Courier New";'>=</span><i><span style='color: rgb(42, 0, 255); font-family: "Courier New";'>"#"</span></i><span style='color: teal; font-family: "Courier New";'>></span><span style='color: black; font-family: "Courier New";'>AText</span><span style='color: teal; font-family: "Courier New";'></</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>a</span><span style='color: teal; font-family: "Courier New";'>></span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: teal; font-family: "Courier New";'></</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>button</span><span style='color: teal; font-family: "Courier New";'>></span><span style='color: black; font-family: "Courier New";'>PlainText</span></p><p ><span > </span></p><p >버튼 안의 모든 요소들이<span > vertical-align: middle </span>혹은<span > baseline</span>인 경우이다<span >. middle </span>경우에는 모두 중앙으로 정렬된다<span >. </span>따라서<span >, baseline</span>에 정렬되에 있는 버튼 내의 <span >“PlainText” </span>보다는 약간 밑에 온다<span >. baseline </span>경우에는 일반 텍스트를 포함해 모두<span > baseline</span>에 정렬된다<span >. </span></p><p style="line-height: 12pt; -ms-word-break: keep-all;"><span > </span></p><p class="MsoListParagraph" style="text-indent: -20pt; margin-left: 21.3pt;"><span style="font-family: Wingdings; font-size: 12pt;">n<span style='font: 7pt/normal "Times New Roman"; font-size-adjust: none; font-stretch: normal;'> </span></span><b><span style="font-size: 12pt;">Example: inside button</span></b></p><table class="MsoTableGrid" style="border: currentColor; border-image: none; border-collapse: collapse;" border="0" cellspacing="0" cellpadding="0"><tbody><tr><td width="633" valign="top" style="padding: 0cm 5.4pt; width: 474.8pt;" colspan="3"><p ><b><span >Display</span></b></p><p align="center" style="text-align: center;"><span ><img width="176" height="26" src="data:image/png;base64,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"></span></p><p align="center" style="text-align: center;"><span > </span></p></td></tr><tr><td width="211" valign="top" style="padding: 0cm 5.4pt; width: 158.25pt;"><p ><b><span >CSS</span></b></p></td><td width="211" valign="top" style="padding: 0cm 5.4pt; width: 158.25pt;"><p align="left" style="text-align: left; -ms-word-break: keep-all;"><i><span style='color: rgb(63, 127, 127); font-family: "Courier New";'> </span></i></p></td><td width="211" valign="top" style="padding: 0cm 5.4pt; width: 158.3pt;"><p align="left" style="text-align: left; -ms-word-break: keep-all;"><i><span style='color: rgb(63, 127, 127); font-family: "Courier New";'> </span></i></p></td></tr><tr><td width="211" valign="top" style="padding: 0cm 5.4pt; width: 158.25pt;"><p align="left" style="text-align: left; -ms-word-break: keep-all;"><i><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>.button0</span></i><span style='color: black; font-family: "Courier New";'> {</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>vertical-align</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>middle</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>height</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>1.5em</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>margin</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>0</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>padding</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>0</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'>}</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><i><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>.span0</span></i><span style='color: black; font-family: "Courier New";'> {</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>vertical-align</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>baseline</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>hegith</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>1em</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>line-height</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>1em</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>font-size</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>1em</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>margin</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>0</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>padding</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>0</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>border</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>1px solid red</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'>}</span></p></td><td width="211" valign="top" style="padding: 0cm 5.4pt; width: 158.25pt;"><p align="left" style="text-align: left; -ms-word-break: keep-all;"><i><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>.button1</span></i><span style='color: black; font-family: "Courier New";'> {</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>vertical-align</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>middle</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>height</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>1.5em</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>margin</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>0</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>padding</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>0</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'>}</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><i><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>.span1</span></i><span style='color: black; font-family: "Courier New";'> {</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>vertical-align</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>middle</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>hegith</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>1em</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>line-height</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>1em</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>font-size</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>1em</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>margin</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>0</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>padding</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>0</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>border</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>1px solid red</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'>}</span></p></td><td width="211" valign="top" style="padding: 0cm 5.4pt; width: 158.3pt;"><p align="left" style="text-align: left; -ms-word-break: keep-all;"><i><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>.button2</span></i><span style='color: black; font-family: "Courier New";'> {</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>vertical-align</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>middle</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>height</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>1em</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>margin</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>0</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>padding</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>0</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'>}</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><i><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>.span2</span></i><span style='color: black; font-family: "Courier New";'> {</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>vertical-align</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>middle</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>hegith</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>1em</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>line-height</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>1em</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>font-size</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>1em</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>margin</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>0</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>padding</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>0</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>border</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>1px solid red</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p ><span style='color: black; font-family: "Courier New";'>}</span></p></td></tr></tbody></table><p ><span > </span></p><p ><span >(button0): </span>버튼의 크기가 작은 경우 <span >baseline</span>으로 정렬해야 버튼 내의 요소가 버튼 내부에 들어간다<span >.</span></p><p ><span >(button1): middle</span>로 하면 밑으로 살짝 내려간다<span >. </span></p><p ><span >(button3): </span>텍스트와 크기와 비교해 버튼이 <span >0.5</span>쯤 커야 텍스트를 다 담을 수 있다<span >. </span></p><p ><span > </span></p><h2 style="margin-left: 1cm;"><b><span style="font-size: 14pt;">1.3<span style='font: 7pt/normal "Times New Roman"; font-size-adjust: none; font-stretch: normal;'> </span></span></b><b><span style="font-size: 18pt;">블록 사이즈 <span >– box-sizing</span></span></b></h2><p >블록의 실제 사이즈는<span > width, height </span>뿐만 아니라 마진과 패딩 사이즈도 영향을 미친다<span >.</span></p><p ><span > </span></p><table Table" style="border: currentColor; border-image: none; margin-left: 69.2pt; border-collapse: collapse;" border="1" cellspacing="0" cellpadding="0"><tbody><tr><td width="65" valign="top" style="border-width: 1pt medium medium 1pt; border-style: solid none none solid; border-color: windowtext currentColor currentColor windowtext; padding: 0cm 5.4pt; width: 48.65pt;"><p><span style='color: black; font-family: "Courier New"; font-size: 10.5pt;'> </span></p></td><td width="134" valign="top" style="border-width: 1pt medium 1.5pt; border-style: solid none; border-color: windowtext currentColor; padding: 0cm 5.4pt; width: 100.2pt;" colspan="2"><p><span style='color: black; font-family: "Courier New"; font-size: 10.5pt;'> </span></p></td><td width="104" valign="top" style="border-width: medium medium 1.5pt; border-style: none none solid; border-color: currentColor currentColor windowtext; padding: 0cm 5.4pt; border-image: none; width: 77.95pt;"><p style="text-indent: 15.75pt;"><span style='color: black; font-family: "Courier New"; font-size: 10.5pt;'>border</span></p></td></tr><tr><td width="65" valign="top" style="border-width: medium 1.5pt medium 1pt; border-style: none solid; border-color: currentColor windowtext; padding: 0cm 5.4pt; width: 48.65pt;"><p><span style='color: black; font-family: "Courier New"; font-size: 10.5pt;'> </span></p></td><td width="73" valign="top" style="padding: 0cm 5.4pt; border: currentColor; border-image: none; width: 54.95pt;"><p><span style='color: black; font-family: "Courier New"; font-size: 10.5pt;'> </span></p></td><td width="60" valign="top" style="border-width: 1.5pt medium 1pt; border-style: solid none; border-color: windowtext currentColor; padding: 0cm 5.4pt; width: 45.25pt;"><p><span style='color: black; font-family: "Courier New"; font-size: 10.5pt;'> </span></p></td><td width="104" valign="top" style="padding: 0cm 5.4pt; border: currentColor; border-image: none; width: 77.95pt;"><p><span style='color: black; font-family: "Courier New"; font-size: 10.5pt;'> </span></p></td></tr><tr style="height: 28.5pt;"><td width="65" valign="top" style="border-width: medium 1.5pt medium 1pt; border-style: none solid; border-color: currentColor windowtext; padding: 0cm 5.4pt; width: 48.65pt; height: 28.5pt;"><p><span style='color: black; font-family: "Courier New"; font-size: 10.5pt;'>Margin</span></p></td><td width="73" valign="top" style="border-width: medium 1pt medium medium; border-style: none solid none none; border-color: currentColor windowtext currentColor currentColor; padding: 0cm 5.4pt; border-image: none; width: 54.95pt; height: 28.5pt;"><p><span style='color: black; font-family: "Courier New"; font-size: 10.5pt;'>Padding</span></p></td><td width="60" valign="top" style="border-width: medium medium 1pt; border-style: none none solid; border-color: currentColor currentColor windowtext; padding: 0cm 5.4pt; border-image: none; width: 45.25pt; height: 28.5pt;"><p><span style='color: black; font-family: "맑은 고딕"; font-size: 10.5pt;'>내용</span></p></td><td width="104" valign="top" style="padding: 0cm 5.4pt; border: currentColor; border-image: none; width: 77.95pt; height: 28.5pt;"><p><span style='color: black; font-family: "Courier New"; font-size: 10.5pt;'> </span></p></td></tr><tr><td width="65" valign="top" style="border-width: medium 1.5pt medium 1pt; border-style: none solid; border-color: currentColor windowtext; padding: 0cm 5.4pt; width: 48.65pt;"><p><span style='color: black; font-family: "Courier New"; font-size: 10.5pt;'> </span></p></td><td width="73" valign="top" style="border-width: medium medium 1.5pt; border-style: none none solid; border-color: currentColor currentColor windowtext; padding: 0cm 5.4pt; border-image: none; width: 54.95pt;"><p><span style='color: black; font-family: "Courier New"; font-size: 10.5pt;'> </span></p></td><td width="60" valign="top" style="border-width: medium medium 1.5pt; border-style: none none solid; border-color: currentColor currentColor windowtext; padding: 0cm 5.4pt; border-image: none; width: 45.25pt;"><p><span style='color: black; font-family: "Courier New"; font-size: 10.5pt;'> </span></p></td><td width="104" valign="top" style="padding: 0cm 5.4pt; border: currentColor; border-image: none; width: 77.95pt;"><p><span style='color: black; font-family: "Courier New"; font-size: 10.5pt;'> </span></p></td></tr><tr><td width="65" valign="top" style="border-width: medium medium 1pt 1pt; border-style: none none solid solid; border-color: currentColor currentColor windowtext windowtext; padding: 0cm 5.4pt; width: 48.65pt;"><p><span style='color: black; font-family: "Courier New"; font-size: 10.5pt;'> </span></p></td><td width="134" valign="top" style="border-width: medium medium 1pt; border-style: none none solid; border-color: currentColor currentColor windowtext; padding: 0cm 5.4pt; border-image: none; width: 100.2pt;" colspan="2"><p><span style='color: black; font-family: "Courier New"; font-size: 10.5pt;'> </span></p></td><td width="104" valign="top" style="padding: 0cm 5.4pt; border: currentColor; border-image: none; width: 77.95pt;"><p><span style='color: black; font-family: "Courier New"; font-size: 10.5pt;'> </span></p></td></tr></tbody></table><p><span style='color: black; font-family: "Courier New"; font-size: 10.5pt;'> </span></p><p style="line-height: 12pt; margin-left: 14.2pt;"><span >padding: top right bottom left;</span></p><p style="line-height: 12pt; margin-left: 14.2pt;"><span >padding: top&bottom right&left;</span></p><p style="line-height: 12pt; margin-left: 14.2pt;"><span >margin: top right bottom left;</span></p><p style="line-height: 12pt; margin-left: 14.2pt;"><span >margin: top&bottom right&left;</span></p><p ><span > </span></p><p >예를 들어<span >, </span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='font-family: "Courier New";'> </span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: rgb(63, 95, 191); font-family: "Courier New";'>/* </span><span style="color: rgb(63, 95, 191);">실제</span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'> </span><span style="color: rgb(63, 95, 191);">사이즈</span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'>: width + padding + margin, height + padding + margin */</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><b><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>div</span></b><span style='color: black; font-family: "Courier New";'> {</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>width</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>100px</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>height</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>100px</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>padding</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>20px</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>border</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>10px soild black</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'>}</span></p><p style="line-height: 12pt; -ms-word-break: keep-all;"><span > </span></p><p >이러한 박스의 실제 너비는<span > width + padding-left & right width + border left & right width</span>이다<span >. </span>높이도 마찬가지다<span >. </span>즉<span >, </span>박스 사이즈가 늘어난다<span >. </span>그러나<span >, box-sizing</span>을 이용하면 이러한 점을 해결할 수 있다<span >. box-sizing: border-box</span>를 이용하면 패딩과 보더 사이즈를<span > width, height </span>내에 포함시킨다<span >. </span>위<span > div</span>에 이 속성을 추가하면<span > padding</span>과<span > border</span>는 박스<span > width, height </span>설정 내로 들어가서 실제 사이즈를 증가시키지 않는다<span >. border-box </span>대신<span > content-box </span>속성값을 주면 기본 박스 사이징 동작을 한다<span >(</span>이 값이 디폴트 값<span >).</span></p><p style="line-height: 12pt; -ms-word-break: keep-all;"><span > </span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: rgb(63, 95, 191); font-family: "Courier New";'>/* </span><span style="color: rgb(63, 95, 191);">실제</span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'> </span><span style="color: rgb(63, 95, 191);">사이즈</span><span style='color: rgb(63, 95, 191); font-family: "Courier New";'>: width, height */</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><b><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>div</span></b><span style='color: black; font-family: "Courier New";'> {</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>width</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>100px</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>height</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>100px</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>padding</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>20px</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>border</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>10px soild black</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>-webkit-box-sizing</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>border-box</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>-moz-box-sizing</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>border-box</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><b><span style='color: black; font-family: "Courier New";'> </span></b><b><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>box-sizing</span></b><b><span style='color: black; font-family: "Courier New";'>: </span></b><b><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>border-box</span></i></b><b><span style='color: black; font-family: "Courier New";'>;</span></b></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'>}</span></p><p style="line-height: 12pt; -ms-word-break: keep-all;"><span > </span></p><h2 style="margin-left: 1cm;"><b><span style="font-size: 14pt;">1.4<span style='font: 7pt/normal "Times New Roman"; font-size-adjust: none; font-stretch: normal;'> </span></span></b><b><span style="font-size: 18pt;">z-index</span></b></h2><p ><span >z-index</span>는 요소의 쌓이는 순서를 정하는 속성으로 <span >z-index </span>값이 높을수록 앞쪽에 쌓인다<span >. z-index</span>에 의해 쌓이는 컨텍스트를 만들어 내는 요소들은 </p><p style="line-height: 12pt;"><span > </span></p><p class="MsoListParagraph" style="line-height: 12pt; text-indent: -18pt; margin-left: 21.3pt;"><span >-<span style='font: 7pt/normal "Times New Roman"; font-size-adjust: none; font-stretch: normal;'> </span></span><span >html </span>루트</p><p class="MsoListParagraph" style="line-height: 12pt; text-indent: -18pt; margin-left: 21.3pt;"><span >-<span style='font: 7pt/normal "Times New Roman"; font-size-adjust: none; font-stretch: normal;'> </span></span><span >position</span>이<span > absoulte, relative, fixed</span>로 설정된 요소들</p><p class="MsoListParagraph" style="line-height: 12pt; text-indent: -18pt; margin-left: 21.3pt;"><span >-<span style='font: 7pt/normal "Times New Roman"; font-size-adjust: none; font-stretch: normal;'> </span></span><span >z-index </span>값이<span > auto</span>가 아닌<span > flex </span>요소</p><p class="MsoListParagraph" style="line-height: 12pt; text-indent: -18pt; margin-left: 21.3pt;"><span >-<span style='font: 7pt/normal "Times New Roman"; font-size-adjust: none; font-stretch: normal;'> </span></span>투명도가<span > 1</span>보다 작게 지정된 요소</p><p style="line-height: 12pt;"><span > </span></p><p >컨테이너 안의 자식 요소들은 컨테이너 안에서 자식들끼리의 새로운<span > z-index </span>쌍임 컨텍스트를 만든다<span >. </span></p><p style="line-height: 12pt; -ms-word-break: keep-all;"><span > </span></p><p class="MsoListParagraph" style="text-indent: -20pt; margin-left: 21.3pt;"><span style="font-family: Wingdings; font-size: 12pt;">n<span style='font: 7pt/normal "Times New Roman"; font-size-adjust: none; font-stretch: normal;'> </span></span><b><span style="font-size: 12pt;">Example: z-index</span></b></p><p ><span > </span></p><p ><span ><img width="514" height="335" id="그림 30" src="data:image/png;base64,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"></span></p><p ><span > </span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: teal; font-family: "Courier New";'><!</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>DOCTYPE</span><span style='font-family: "Courier New";'> <span style="color: teal;">html></span></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: teal; font-family: "Courier New";'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>html</span><span style='color: teal; font-family: "Courier New";'>></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: teal; font-family: "Courier New";'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>head</span><span style='color: teal; font-family: "Courier New";'>></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: teal; font-family: "Courier New";'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>meta</span><span style='font-family: "Courier New";'> <span style="color: rgb(127, 0, 127);">charset</span><span style="color: black;">=</span><i><span style="color: rgb(42, 0, 255);">"UTF-8"</span></i><span style="color: teal;">></span></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: teal; font-family: "Courier New";'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>title</span><span style='color: teal; font-family: "Courier New";'>></span><span style='color: black; font-family: "Courier New";'>Position</span><span style='color: teal; font-family: "Courier New";'></</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>title</span><span style='color: teal; font-family: "Courier New";'>></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: teal; font-family: "Courier New";'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>style</span><span style='color: teal; font-family: "Courier New";'>></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='font-family: "Courier New";'> </span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><b><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>div</span></b><span style='color: black; font-family: "Courier New";'> {</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>width</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>100px</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>height</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>100px</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>font</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>bold 13px arial, sans-serif</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>color</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>white</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>line-height</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>100px</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>padding</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>0px 5px</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'>}</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='font-family: "Courier New";'> </span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><i><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>.container-1</span></i><span style='color: black; font-family: "Courier New";'> {</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>display</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>block</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>position</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>relative</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>background-color</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>OliveDrab</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>z-index</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>7</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'>}</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='font-family: "Courier New";'> </span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><i><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>.container-2</span></i><span style='color: black; font-family: "Courier New";'> {</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>display</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>block</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>position</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>absolute</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>top</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>150px</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>background-color</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>LightBlue</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>z-index</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>1</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'>}</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='font-family: "Courier New";'> </span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><i><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>.container-3</span></i><span style='color: black; font-family: "Courier New";'> {</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>display</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>block</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>position</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>absolute</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>top</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>75px</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>left</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>50px</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>background-color</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>Orange</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>z-index</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>5</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'>}</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='font-family: "Courier New";'> </span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: teal; font-family: "Courier New";'></</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>style</span><span style='color: teal; font-family: "Courier New";'>></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: teal; font-family: "Courier New";'></</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>head</span><span style='color: teal; font-family: "Courier New";'>></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: teal; font-family: "Courier New";'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>body</span><span style='color: teal; font-family: "Courier New";'>></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='font-family: "Courier New";'> </span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: teal; font-family: "Courier New";'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>div</span><span style='font-family: "Courier New";'> <span style="color: rgb(127, 0, 127);">id</span><span style="color: black;">=</span><i><span style="color: rgb(42, 0, 255);">"1"</span></i> <span style="color: rgb(127, 0, 127);">class</span><span style="color: black;">=</span><i><span style="color: rgb(42, 0, 255);">"container-1"</span></i><span style="color: teal;">></span><span style="color: black;">id:1 - z-index:7</span><span style="color: teal;"></</span><span style="color: rgb(63, 127, 127);">div</span><span style="color: teal;">></span></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: teal; font-family: "Courier New";'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>div</span><span style='font-family: "Courier New";'> <span style="color: rgb(127, 0, 127);">id</span><span style="color: black;">=</span><i><span style="color: rgb(42, 0, 255);">"2"</span></i> <span style="color: rgb(127, 0, 127);">class</span><span style="color: black;">=</span><i><span style="color: rgb(42, 0, 255);">"container-2"</span></i><span style="color: teal;">></span><span style="color: black;">id:2 - z-index:1</span><span style="color: teal;"></</span><span style="color: rgb(63, 127, 127);">div</span><span style="color: teal;">></span></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: teal; font-family: "Courier New";'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>div</span><span style='font-family: "Courier New";'> <span style="color: rgb(127, 0, 127);">id</span><span style="color: black;">=</span><i><span style="color: rgb(42, 0, 255);">"3"</span></i> <span style="color: rgb(127, 0, 127);">class</span><span style="color: black;">=</span><i><span style="color: rgb(42, 0, 255);">"container-3"</span></i><span style="color: teal;">></span><span style="color: black;">id:3 - z-index:5</span><span style="color: teal;"></</span><span style="color: rgb(63, 127, 127);">div</span><span style="color: teal;">></span></span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='font-family: "Courier New";'> </span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: teal; font-family: "Courier New";'></</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>body</span><span style='color: teal; font-family: "Courier New";'>></span></p><p style="line-height: 12pt; -ms-word-break: keep-all;"><span style='color: teal; font-family: "Courier New";'></</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>html</span><span style='color: teal; font-family: "Courier New";'>></span></p><p style="line-height: 12pt; -ms-word-break: keep-all;"><span > </span></p><h2 style="margin-left: 1cm;"><b><span style="font-size: 14pt;">1.5<span style='font: 7pt/normal "Times New Roman"; font-size-adjust: none; font-stretch: normal;'> </span></span></b><b><span style="font-size: 18pt;">flex</span></b></h2><p ><span >flex</span>는 요소들의 너비나 높이를 공간에 맞게 늘리거나 줄여 화면을 구성하는데 편리한 기능을 제공한다<span >. display </span>속성 값으로<span > flex</span>나<span > inline-flex </span>지정해<span > flex </span>요소로 만들 수 있다<span >. </span>브라우저 별<span > display </span>값은 플렉스 속성들에서<span > flex</span>를 대신할 접두어로도 사용된다<span >. </span></p><p style="line-height: 12pt;"><span > </span></p><table class="MsoTableGrid" style="border: currentColor; border-image: none; border-collapse: collapse;" border="0" cellspacing="0" cellpadding="0"><tbody><tr><td width="292" valign="top" style="padding: 0cm 5.4pt; width: 218.85pt;"><p style="line-height: 12pt;"><span >display</span><i><span >:</span></i><span > -webkit-box;</span></p><p style="line-height: 12pt;"><span >display</span><i><span >:</span></i><span > -moz-box;</span></p><p style="line-height: 12pt;"><span >display</span><i><span >:</span></i><span > -webkit-flex;</span></p><p style="line-height: 12pt;"><span >display</span><i><span >:</span></i><span > -ms-flexbox;</span></p><p style="line-height: 12pt;"><span >display</span><i><span >:</span></i><span > flex;</span></p></td><td width="207" valign="top" style="padding: 0cm 5.4pt; width: 155.1pt;"><p style="line-height: 12pt;"><span >display</span><i><span >:</span></i><span > -webkit-inline-box;</span></p><p style="line-height: 12pt;"><span >display</span><i><span >:</span></i><span > -moz-inline-box;</span></p><p style="line-height: 12pt;"><span >display</span><i><span >:</span></i><span > -webkit-inline-flex;</span></p><p style="line-height: 12pt;"><span >display</span><i><span >:</span></i><span > -ms-inline-flexbox;</span></p><p style="line-height: 12pt;"><span >display</span><i><span >:</span></i><span > inline-flex;</span></p></td></tr></tbody></table><p style="line-height: 12pt;"><span > </span></p><p ><span >flex </span>또는<span > flex-inline</span>인 선언된 요소를 플렉스 컨테이너로 플렉스 컨테이너 안의 요소들을 플렉스 아이템이라고 부를 것이다<span >. flex-inline</span>은 플렉스 컨테이너를 인라인으로 배치한다는 의미이다<span >. </span>컨테이너 안의 플렉스 아이템 배치를 위한 속성으로 다음과 같은 것들이 있다<span >. </span>공통으로 <span >initial, inherit </span>값이 있으며 생략한다<span >. </span></p><p ><span > </span></p><p ><b><span style="font-size: 12pt;">Container Properties</span></b></p><p class="MsoListParagraph" style="text-indent: -18pt; margin-left: 21.3pt;"><span >-<span style='font: 7pt/normal "Times New Roman"; font-size-adjust: none; font-stretch: normal;'> </span></span><b><span >flex-direction: row | row-reverse | column | column-reverse</span></b></p><p class="MsoListParagraph" style="margin-left: 21.3pt;">기본값은<span > row</span>이다<span >. </span>이 속성은 플렉스 아이템을 플렉스 컨테이너에 위치시키는 방향을 설정한다<span >. </span>방향이라 함은 메인 축의 방향을 의미한다<span >. row</span>는 가로<span >, column</span>은 세로가 메인축 방향이다<span >. *-reverse</span>는 해당 축 위에서 아이템의 배치 시작 위치가 반대이다<span >. row-reverse</span>는 우에서 좌로<span > column-reverse</span>는 아래에서 위로 배치시킨다<span >. </span></p><p class="MsoListParagraph" style="text-indent: -18pt; margin-left: 21.3pt;"><span >-<span style='font: 7pt/normal "Times New Roman"; font-size-adjust: none; font-stretch: normal;'> </span></span><b><span >flex-wrap: nowrap | wrap | wrap-reverse</span></b></p><p class="MsoListParagraph" style="margin-left: 21.3pt;">기본값은<span > nowrap</span>이다<span >. </span>이 속성은 플렉스 컨테이너 내의 아이템들이 한 줄로 배치<span >(nowrap)</span>될지 여러 줄로 배치<span >(wrap)</span>될지에 대해 설정한다<span >. wrap</span>이 위쪽을 다 채우면 아랫 줄로 넘기는 반면 <span >wrap-reverse</span>는 아래쪽을 다 채우면 윗 줄로 넘긴다<span >. wrap</span>이 설정되어 다음 줄로 넘어간 아이템은 컨테이버의 영역을 넘어가며 다른 컨테이너 위에 있을 수도 있다<span >. </span></p><p class="MsoListParagraph" style="text-indent: -18pt; margin-left: 21.3pt;"><span >-<span style='font: 7pt/normal "Times New Roman"; font-size-adjust: none; font-stretch: normal;'> </span></span><b><span >flex-flow: flex-direction value flex-wrap value</span></b></p><p class="MsoListParagraph" style="margin-left: 21.3pt;">기본값은<span > row nowrap</span>이다<span >. </span>이 속성은<span > flex-direcction</span>과<span > flex-flow</span>를 한 번에 설정하기 위한 속성이다<span >. </span></p><p class="MsoListParagraph" style="margin-left: 21.3pt;"><span > </span></p><p ><b><span style="font-size: 12pt;">Item Properties</span></b></p><p class="MsoListParagraph" style="text-indent: -18pt; margin-left: 21.3pt;"><span >-<span style='font: 7pt/normal "Times New Roman"; font-size-adjust: none; font-stretch: normal;'> </span></span><b><span >flex-grow: number</span></b><b>≥<span >0</span></b></p><p class="MsoListParagraph" style="margin-left: 21.3pt;">기본값은 <span >0</span>이다<span >. </span>이 속성은 플렉스 컨테이너의 공간이 남을 때 아이템의 크기를 증가시키기 위한 비율이다<span >. number</span>는 다른 아이템보다 큰 비율이다<span >. </span>예를 들어<span >, </span>다른 아이템들은 <span >flex-grow:1</span>인데 한 아이템만 <span >flex-grow:2</span>면 그 아이템은 다른 아이템보다 크기가<span > 2</span>배이다<span >. 0</span>인 값은 공간이 있더라도 원래 크기를 유지한다<span >. </span>다만<span >, </span>남는 공간이 없는 경우<span > flex-grow</span>에 상관없이 같은 크기가 된다<span >. </span></p><p class="MsoListParagraph" style="text-indent: -18pt; margin-left: 21.3pt;"><span >-<span style='font: 7pt/normal "Times New Roman"; font-size-adjust: none; font-stretch: normal;'> </span></span><b><span >flex-shrink: number</span></b><b>≥<span >0</span></b></p><p class="MsoListParagraph" style="margin-left: 21.3pt;">기본값은<span > 1</span>이다<span >. </span>이 속성은 <span >flex-grow</span>와 반대로 플렉스 컨터이너 공간이 부족할 때 아이템의 크기를 줄이기 위한 비율이다<span >. number</span>는<span > 1/number </span>크기를 의미한다<span >. </span>다만<span >, </span>남는 공간이 있는 경우<span > flex-shrink</span>에 상관없이 원래 크기가 된다<span >. </span></p><p class="MsoListParagraph" style="text-indent: -18pt; margin-left: 21.3pt;"><span >-<span style='font: 7pt/normal "Times New Roman"; font-size-adjust: none; font-stretch: normal;'> </span></span><b><span >flex-order: number</span></b></p><p class="MsoListParagraph" style="margin-left: 21.3pt;">기본값은<span > 0</span>이다<span >. </span>플렉스 아이템의 순서는 보통 아이템 태그가 선언된 순서이다<span >. </span>그 순서를 바꾸고자 할 때<span >, flex-order</span>를 이용한다<span >. </span>작은 값일수록 순서가 앞이다<span >. </span>임의의 아이템을 먼저 나오게 하고 싶다면<span > flex-order: -1;</span>을 지정하면 된다<span >. </span></p><p class="MsoListParagraph" style="text-indent: -18pt; margin-left: 21.3pt;"><span >-<span style='font: 7pt/normal "Times New Roman"; font-size-adjust: none; font-stretch: normal;'> </span></span><b><span >flex-basis: number</span></b></p><p class="MsoListParagraph" style="margin-left: 21.3pt;">기본값은<span > auto</span>이다<span >. </span>이 속성은 플렉스 아이템의 기본 크기<span >(width)</span>이다<span >. </span>예를 들어<span >, auto</span>면<span > flex-grow, flex-shrink</span>에 따라 크기가 줄어들거나 늘어난다<span >. </span>하지만<span >, flex-grow:0, flex-shrink:0</span>이고<span > flex-basis</span>를 설정하면 아이템의 크기는<span > flex-basis</span>에 명시한 크기가 된다<span >. </span></p><p class="MsoListParagraph" style="text-indent: -18pt; margin-left: 21.3pt;"><span >-<span style='font: 7pt/normal "Times New Roman"; font-size-adjust: none; font-stretch: normal;'> </span></span><b><span >flex: flex-grow flex-shrink flex-basis | auto</span></b></p><p class="MsoListParagraph" style="margin-left: 21.3pt;">기본값은<span > 0 1 auto</span>이다<span >. flex-grow,shrink,basis</span>를 한 번에 설정하기 위한 속성이다<span >. </span>브라우저 버전별 속성 이름은 <span >display</span>와 같이 <span >–webkit-box, -mox-box, -webkit-flex, -ms-flexbox</span>이다<span >. </span></p><p ><span > </span></p><p >정렬 속성의 경우 브라우저 버전별 <span >–webkit-box, -mox-box, -webkit-flex, -ms-flexbox</span>가 아니라 속성값마다 다르기 때문에 함께 표시한다<span >. </span></p><p ><span > </span></p><p ><b><span style="font-size: 12pt;">Alignment Properties</span></b></p><p class="MsoListParagraph" style="text-indent: -18pt; margin-left: 21.3pt;"><span >-<span style='font: 7pt/normal "Times New Roman"; font-size-adjust: none; font-stretch: normal;'> </span></span><b><span >justify-content: flex-start | flex-end | center | space-between | space-around</span></b></p><p class="MsoListParagraph" style="margin-left: 21.3pt;">기본값은 <span >flex-start</span>로 컨테이너 속성이다<span >. </span>이 속성은 메인축<span >(</span>가로<span >)</span>을 따라 아이템들을 정렬 방식을 설정한다<span >. -webkit-box-pack, -moz-box-pack, -ms-flex-pack, -webkit-justify-content.</span></p><p class="MsoListParagraph" style="text-indent: -18pt; margin-left: 21.3pt;"><span >-<span style='font: 7pt/normal "Times New Roman"; font-size-adjust: none; font-stretch: normal;'> </span></span><b><span >align-items: flex-start | flex-end | center | baseline | stretch</span></b></p><p class="MsoListParagraph" style="margin-left: 21.3pt;">기본값은<span > stretch</span>로 컨테이너 속성이다<span >. </span>이 속성은 크로스 축<span >(</span>세로<span >)</span>을 따라 아이템을 정렬하는 방식을 설정한다<span >. stretch</span>는 정렬 대신 수직 채우기를 한다<span >. </span></p><p class="MsoListParagraph" style="margin-left: 21.3pt;"><span >-webkit-box-align, -moz-box-align, -ms-flex-align, -webkit-align-items.</span></p><p class="MsoListParagraph" style="text-indent: -18pt; margin-left: 21.3pt;"><span >-<span style='font: 7pt/normal "Times New Roman"; font-size-adjust: none; font-stretch: normal;'> </span></span><b><span >align-self: auto | flex-start | flex-end | center | baseline | stretch</span></b></p><p class="MsoListParagraph" style="margin-left: 21.3pt;">기본값은<span > auto</span>로 아이템 속성이다<span >. </span>이 속성은 플렉스 아이템에서 수직 정렬 방식을 설정한다<span >. </span>컨테이너에서 사용한<span > align-items </span>속성을 아이템에서 사용한<span > align-self </span>속성이 덮어쓴다<span >. </span></p><p class="MsoListParagraph" style="margin-left: 21.3pt;"><span > -webkit-align-self, -ms-flex-item-align.</span></p><p class="MsoListParagraph" style="text-indent: -18pt; margin-left: 21.3pt;"><span >-<span style='font: 7pt/normal "Times New Roman"; font-size-adjust: none; font-stretch: normal;'> </span></span><b><span >align-content: flex-start | flex-end | center | space-between | space-around| stretch</span></b></p><p class="MsoListParagraph" style="margin-left: 21.3pt;">기본값은<span > stretch</span>로 컨테이너 속성이다<span >. flex-wrap </span>속성에 의해 여러 라인이 된 아이템들의 수직 정렬 방식을 설정한다<span >. align-items</span>가 라인은 그대로 두고 아이템을 정렬한다면<span > align-content</span>는 라인을 정렬한다<span >. -webkit-align-content, -ms-flex-line-pack</span></p><p style="line-height: 12pt; -ms-word-break: keep-all;"><span > </span></p><p class="MsoListParagraph" style="text-indent: -20pt; margin-left: 21.3pt;"><span style="font-family: Wingdings; font-size: 12pt;">n<span style='font: 7pt/normal "Times New Roman"; font-size-adjust: none; font-stretch: normal;'> </span></span><b><span style="font-size: 12pt;">Example: flex container</span></b></p><p >모두 같은 아이템을 사용했고 아이템의 숫자는 <span >HTML </span>페이지에서 아이템 태그가 나열된 순서이다<span >. </span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><i><span style='color: rgb(63, 127, 127); font-family: "Courier New";'> </span></i></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><i><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>.item</span></i><span style='color: black; font-family: "Courier New";'> {</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>background-color</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>OliveDrab</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p style="line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'>}</span></p><p style="line-height: 12pt; -ms-word-break: keep-all;"><span > </span></p><table class="MsoTableGrid" style="border: currentColor; border-image: none; border-collapse: collapse;" border="1" cellspacing="0" cellpadding="0"><tbody><tr><td width="317" valign="top" style="border-width: 1pt medium; border-style: solid none; border-color: windowtext currentColor; padding: 0cm 5.4pt; width: 237.4pt;"><p align="left" style="text-align: left; -ms-word-break: keep-all;"><i><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>.container1</span></i><span style='color: black; font-family: "Courier New";'> {</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>display</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>flex</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><u><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>flex-direction</span></u><u><span style='color: black; font-family: "Courier New";'>:</span></u><i><u><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>row</span></u></i><u><span style='color: black; font-family: "Courier New";'>;</span></u></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>background-color</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>AliceBlue</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p ><span style='color: black; font-family: "Courier New";'>}</span></p></td><td width="295" valign="top" style="border-width: 1pt medium; border-style: solid none; border-color: windowtext currentColor; padding: 0cm 5.4pt; width: 221.6pt;"><p ><span ><img width="243" height="62" id="그림 7" src="data:image/png;base64,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"></span></p></td></tr><tr><td width="317" valign="top" style="border-width: medium medium 1pt; border-style: none none solid; border-color: currentColor currentColor windowtext; padding: 0cm 5.4pt; border-image: none; width: 237.4pt;"><p align="left" style="text-align: left; -ms-word-break: keep-all;"><i><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>.container2</span></i><span style='color: black; font-family: "Courier New";'> {</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>display</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>flex</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><u><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>flex-direction</span></u><u><span style='color: black; font-family: "Courier New";'>:</span></u><i><u><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>row-reverse</span></u></i><u><span style='color: black; font-family: "Courier New";'>;</span></u></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>background-color</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>AliceBlue</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p ><span style='color: black; font-family: "Courier New";'>}</span></p></td><td width="295" valign="top" style="border-width: medium medium 1pt; border-style: none none solid; border-color: currentColor currentColor windowtext; padding: 0cm 5.4pt; border-image: none; width: 221.6pt;"><p ><span ><img width="243" height="60" id="그림 10" src="data:image/png;base64,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"></span></p></td></tr><tr><td width="317" valign="top" style="border-width: medium medium 1pt; border-style: none none solid; border-color: currentColor currentColor windowtext; padding: 0cm 5.4pt; border-image: none; width: 237.4pt;"><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='font-family: "Courier New";'> </span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><i><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>.container3</span></i><span style='color: black; font-family: "Courier New";'> { </span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>display</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>flex</span></i><span style='color: black; font-family: "Courier New";'>; </span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><u><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>flex-direction</span></u><u><span style='color: black; font-family: "Courier New";'>:</span></u><i><u><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>row-reverse</span></u></i><u><span style='color: black; font-family: "Courier New";'>;</span></u></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><u><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>flex-wrap</span></u><u><span style='color: black; font-family: "Courier New";'>: </span></u><i><u><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>wrap</span></u></i><u><span style='color: black; font-family: "Courier New";'>; </span></u></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>background-color</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>AliceBlue</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'>}</span></p><p ><span > </span></p></td><td width="295" valign="top" style="border-width: medium medium 1pt; border-style: none none solid; border-color: currentColor currentColor windowtext; padding: 0cm 5.4pt; border-image: none; width: 221.6pt;"><p ><span ><img width="223" height="97" id="그림 13" src="data:image/png;base64,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"></span></p></td></tr><tr><td width="317" valign="top" style="border-width: medium medium 1pt; border-style: none none solid; border-color: currentColor currentColor windowtext; padding: 0cm 5.4pt; border-image: none; width: 237.4pt;"><p align="left" style="text-align: left; -ms-word-break: keep-all;"><i><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>.container4</span></i><span style='color: black; font-family: "Courier New";'> {</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>display</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>flex</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><u><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>flex-direction</span></u><u><span style='color: black; font-family: "Courier New";'>: </span></u><i><u><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>column</span></u></i><u><span style='color: black; font-family: "Courier New";'>;</span></u></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><u><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>flex-wrap</span></u><u><span style='color: black; font-family: "Courier New";'>: </span></u><i><u><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>wrap</span></u></i><u><span style='color: black; font-family: "Courier New";'>;</span></u></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>background-color</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>AliceBlue</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p ><span style='color: black; font-family: "Courier New";'>}</span></p></td><td width="295" valign="top" style="border-width: medium medium 1pt; border-style: none none solid; border-color: currentColor currentColor windowtext; padding: 0cm 5.4pt; border-image: none; width: 221.6pt;"><p ><span ><img width="216" height="109" id="그림 16" src="data:image/png;base64,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"></span></p></td></tr></tbody></table><p style="line-height: 12pt; -ms-word-break: keep-all;"><span > </span></p><p style="line-height: 12pt; -ms-word-break: keep-all;"><span > </span></p><p class="MsoListParagraph" style="text-indent: -20pt; margin-left: 21.3pt;"><span style="font-family: Wingdings; font-size: 12pt;">n<span style='font: 7pt/normal "Times New Roman"; font-size-adjust: none; font-stretch: normal;'> </span></span><b><span style="font-size: 12pt;">Example: flex item</span></b></p><p >모두 같은 컨테이너를 사용했다<span >. </span>아이템 숫자는<span > HTML </span>페이지에서의 아이템 태그 순서이다<span >. </span></p><p style="line-height: 12pt; -ms-word-break: keep-all;"><span > </span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><i><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>.container</span></i><span style='color: black; font-family: "Courier New";'> {</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>display</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>flex</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>width</span><span style='color: black; font-family: "Courier New";'>:</span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>300px</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>height</span><span style='color: black; font-family: "Courier New";'>:</span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>70px</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>background-color</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>AliceBlue</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p style="line-height: 12pt; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'>}</span></p><p style="line-height: 12pt; -ms-word-break: keep-all;"><span > </span></p><table class="MsoTableGrid" style="border: currentColor; border-image: none; border-collapse: collapse;" border="1" cellspacing="0" cellpadding="0"><tbody><tr><td width="310" valign="top" style="border-width: 1pt medium; border-style: solid none; border-color: windowtext currentColor; padding: 0cm 5.4pt; width: 232.4pt;"><p align="left" style="text-align: left; -ms-word-break: keep-all;"><i><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>.item-g1</span></i><span style='color: black; font-family: "Courier New";'> {</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><u><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>flex-grow</span></u><u><span style='color: black; font-family: "Courier New";'>: </span></u><i><u><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>1</span></u></i><u><span style='color: black; font-family: "Courier New";'>;</span></u></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>background-color</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>OliveDrab</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'>}</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><i><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>.item-g2</span></i><span style='color: black; font-family: "Courier New";'> {</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><u><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>flex-grow</span></u><u><span style='color: black; font-family: "Courier New";'>: </span></u><i><u><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>4</span></u></i><u><span style='color: black; font-family: "Courier New";'>;</span></u></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>background-color</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>Orange</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'>}</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><i><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>.item-g3</span></i><span style='color: black; font-family: "Courier New";'> {</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><u><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>flex-grow</span></u><u><span style='color: black; font-family: "Courier New";'>: </span></u><i><u><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>0</span></u></i><u><span style='color: black; font-family: "Courier New";'>;</span></u></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>background-color</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>DodgerBlue</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'>}</span></p></td><td width="324" valign="top" style="border-width: 1pt medium; border-style: solid none; border-color: windowtext currentColor; padding: 0cm 5.4pt; width: 243.3pt;"><p ><span ><img width="303" height="74" id="그림 19" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAS8AAABKCAIAAABl8kXSAAAAAXNSR0IArs4c6QAABClJREFUeF7tm01IVFEcxf/TTiSiIKEQBHETUuiiVYs2KRQ4EUEL24WUSBBCoNKqhaRLIcQ+1q4MShfR10baFRaFq0QQhMAWKhG5m+a9HLWQmRFnxnv+9zfMYmDe3HvO77zjfR++TC6XM14QgEAABDJrG7QxgByQAAGzQ0CAAAQCIUAbAwkCGRBgbWQfgEAwBFgbg4kCIdEToI3R7wIACIYAbQwmCoRET2D3Oxz3xlvckxnuWyji8cizjHsC6gbXrxa7OXdmInR/X3r/V8jaGHpm6IuHAG2MJ2uchk6ANoaeEPriIUAb48kap6ETKLONdwf7Fx72T2dDt1MNfZftSs66/77nqjEBY1abwNMeW7qTvnuss9qT7WP8stqYvd7buI85lH+ar+Jzq9ty0E4h5dIc6LaO+oLqensScCFLtvHCrZsLnQ1yEVRIcOONtIqfbDJjkyPpoO3WVqHBGaYmBM4fT6Z5M2NNYzaf/1Rv15prMvHeJynexnwVJ07n/678Wlnf+9AeftF8NnGx+ir1MmSrHjzF5uHSWNLDnsVt3992fA6KRsm10ZY/tNx+9zUo0bUTM3syWRVfDqUzPrCj6Tr5uXbzM1PFCJxLzhtbzeY/2mjFBq3wQMXb+PbR45aR9xWeUnO4/AnkYKJ8+b6m/thVdx7bJNB6KtwLOaXXxthjTPwXruWsjtjsC4AoEnidnjeO/0jOG4e7AnVAG0sGs6OKm4esJX/CBsEQSA9Qt25sjC4lwhoOByPvXyG0sVQwF9M7HL+nC2ePpbbn+6AIfLeVvJ7CddSBpkTcys+gJG6LoY1Fg2mbS6/cmNVlC/8AkOMOR6D78q6yFm0qf3Rq1tGVLJJ96d2OqZlAHdDGosGcaA80N2SVTWB0Mj1dLLzGx8K9psrzjbunyvONZe/tB7YhzzceGHomhoB7Ahypuo8YgzIEaKNMVAh1T4A2uo8YgzIEaKNMVAh1T4A2uo8YgzIEaKNMVAh1T4A2uo8YgzIEaKNMVAh1T4A2uo8YgzIEaKNMVAh1T4A2uo8YgzIEaKNMVAh1T4A2uo8YgzIEaKNMVAh1T4A2uo8YgzIEaKNMVAh1T4A2uo8YgzIEaKNMVAh1T4A2uo8YgzIEaKNMVAh1T4A2uo8YgzIEaKNMVAh1T4A2uo8YgzIEaKNMVAh1T4A2uo8YgzIEaKNMVAh1T4A2uo8YgzIEaKNMVAh1T4A2uo8YgzIEaKNMVAh1T4A2uo8YgzIEaKNMVAh1T4A2uo8YgzIEaKNMVAh1T4A2uo8YgzIEaKNMVAh1TyCztpFzbxKDEJAgwNooERMioyBAG6OIGZMSBGijREyIjIIAbYwiZkxKEKCNEjEhMgoCtDGKmDEpQYA2SsSEyCgI0MYoYsakBAHaKBETIqMgQBujiBmTEgRoo0RMiIyCwB9hgYiCKBa8pgAAAABJRU5ErkJggg=="></span></p></td></tr><tr><td width="310" valign="top" style="border-width: medium medium 1pt; border-style: none none solid; border-color: currentColor currentColor windowtext; padding: 0cm 5.4pt; border-image: none; width: 232.4pt;"><p align="left" style="text-align: left; -ms-word-break: keep-all;"><i><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>.item-s1</span></i><span style='color: black; font-family: "Courier New";'> {</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><u><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>flex-shrink</span></u><u><span style='color: black; font-family: "Courier New";'>: </span></u><i><u><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>1</span></u></i><u><span style='color: black; font-family: "Courier New";'>;</span></u></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>background-color</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>OliveDrab</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'>}</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><i><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>.item-s2</span></i><span style='color: black; font-family: "Courier New";'> {</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><u><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>flex-shrink</span></u><u><span style='color: black; font-family: "Courier New";'>: </span></u><i><u><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>2</span></u></i><u><span style='color: black; font-family: "Courier New";'>;</span></u></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>background-color</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>Orange</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'>}</span></p></td><td width="324" valign="top" style="border-width: medium medium 1pt; border-style: none none solid; border-color: currentColor currentColor windowtext; padding: 0cm 5.4pt; border-image: none; width: 243.3pt;"><p ><span ><img width="304" height="75" id="그림 22" src="data:image/png;base64,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"></span></p></td></tr><tr><td width="310" valign="top" style="border-width: medium medium 1pt; border-style: none none solid; border-color: currentColor currentColor windowtext; padding: 0cm 5.4pt; border-image: none; width: 232.4pt;"><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: rgb(63, 95, 191); font-family: "Courier New";'>/* flex: flex-grow flex-shrink flex-basis */</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><i><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>.item-f1</span></i><span style='color: black; font-family: "Courier New";'> {</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><u><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>flex</span></u><u><span style='color: black; font-family: "Courier New";'>: </span></u><i><u><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>1 1 auto</span></u></i><u><span style='color: black; font-family: "Courier New";'>;</span></u></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>background-color</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>OliveDrab</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'>}</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><i><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>.item-f2</span></i><span style='color: black; font-family: "Courier New";'> {</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><u><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>flex</span></u><u><span style='color: black; font-family: "Courier New";'>: </span></u><i><u><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>2 1 auto</span></u></i><u><span style='color: black; font-family: "Courier New";'>;</span></u></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>background-color</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>Orange</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'>}</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><i><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>.item-f3</span></i><span style='color: black; font-family: "Courier New";'> {</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><u><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>flex</span></u><u><span style='color: black; font-family: "Courier New";'>: </span></u><i><u><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>1 2 auto</span></u></i><u><span style='color: black; font-family: "Courier New";'>;</span></u></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>background-color</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>DodgerBlue</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p ><span style='color: black; font-family: "Courier New";'>}</span></p><p ><span style='color: black; font-family: "Courier New";'> </span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: teal; font-family: "Courier New";'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>div</span><span style='font-family: "Courier New";'> <span style="color: rgb(127, 0, 127);">class</span><span style="color: black;">=</span><i><span style="color: rgb(42, 0, 255);">"container"</span></i><span style="color: teal;">></span></span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: teal; font-family: "Courier New";'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>div</span><span style='font-family: "Courier New";'> <span style="color: rgb(127, 0, 127);">class</span><span style="color: black;">=</span><i><span style="color: rgb(42, 0, 255);">"item-f1"</span></i><span style="color: teal;">></span><span style="color: black;">1</span><span style="color: teal;"></</span><span style="color: rgb(63, 127, 127);">div</span><span style="color: teal;">></span></span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: teal; font-family: "Courier New";'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>div</span><span style='font-family: "Courier New";'> <span style="color: rgb(127, 0, 127);">class</span><span style="color: black;">=</span><i><span style="color: rgb(42, 0, 255);">"item-f2"</span></i><span style="color: teal;">></span><span style="color: black;">2</span><span style="color: teal;"></</span><span style="color: rgb(63, 127, 127);">div</span><span style="color: teal;">></span></span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: teal; font-family: "Courier New";'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>div</span><span style='font-family: "Courier New";'> <span style="color: rgb(127, 0, 127);">class</span><span style="color: black;">=</span><i><span style="color: rgb(42, 0, 255);">"item-f3"</span></i><span style="color: teal;">></span><span style="color: black;">3</span><span style="color: teal;"></</span><span style="color: rgb(63, 127, 127);">div</span><span style="color: teal;">></span></span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: teal; font-family: "Courier New";'></</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>div</span><span style='color: teal; font-family: "Courier New";'>></span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: teal; font-family: "Courier New";'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>div</span><span style='font-family: "Courier New";'> <span style="color: rgb(127, 0, 127);">class</span><span style="color: black;">=</span><i><span style="color: rgb(42, 0, 255);">"container"</span></i><span style="color: teal;">></span></span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: teal; font-family: "Courier New";'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>div</span><span style='font-family: "Courier New";'> <span style="color: rgb(127, 0, 127);">class</span><span style="color: black;">=</span><i><span style="color: rgb(42, 0, 255);">"item-f1"</span></i><span style="color: teal;">></span><span style="color: black;">1</span><span style="color: teal;"></</span><span style="color: rgb(63, 127, 127);">div</span><span style="color: teal;">></span></span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: teal; font-family: "Courier New";'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>div</span><span style='font-family: "Courier New";'> <span style="color: rgb(127, 0, 127);">class</span><span style="color: black;">=</span><i><span style="color: rgb(42, 0, 255);">"item-f3"</span></i><span style="color: teal;">></span><span style="color: black;">2</span><span style="color: teal;"></</span><span style="color: rgb(63, 127, 127);">div</span><span style="color: teal;">></span></span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: teal; font-family: "Courier New";'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>div</span><span style='font-family: "Courier New";'> <span style="color: rgb(127, 0, 127);">class</span><span style="color: black;">=</span><i><span style="color: rgb(42, 0, 255);">"item-f1"</span></i><span style="color: teal;">></span><span style="color: black;">3</span><span style="color: teal;"></</span><span style="color: rgb(63, 127, 127);">div</span><span style="color: teal;">></span></span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: teal; font-family: "Courier New";'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>div</span><span style='font-family: "Courier New";'> <span style="color: rgb(127, 0, 127);">class</span><span style="color: black;">=</span><i><span style="color: rgb(42, 0, 255);">"item-f1"</span></i><span style="color: teal;">></span><span style="color: black;">4</span><span style="color: teal;"></</span><span style="color: rgb(63, 127, 127);">div</span><span style="color: teal;">></span></span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: teal; font-family: "Courier New";'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>div</span><span style='font-family: "Courier New";'> <span style="color: rgb(127, 0, 127);">class</span><span style="color: black;">=</span><i><span style="color: rgb(42, 0, 255);">"item-f1"</span></i><span style="color: teal;">></span><span style="color: black;">5</span><span style="color: teal;"></</span><span style="color: rgb(63, 127, 127);">div</span><span style="color: teal;">></span></span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: teal; font-family: "Courier New";'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>div</span><span style='font-family: "Courier New";'> <span style="color: rgb(127, 0, 127);">class</span><span style="color: black;">=</span><i><span style="color: rgb(42, 0, 255);">"item-f1"</span></i><span style="color: teal;">></span><span style="color: black;">6</span><span style="color: teal;"></</span><span style="color: rgb(63, 127, 127);">div</span><span style="color: teal;">></span></span></p><p ><span style='color: teal; font-family: "Courier New";'></</span><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>div</span><span style='color: teal; font-family: "Courier New";'>></span></p><p ><span > </span></p></td><td width="324" valign="top" style="border-width: medium medium 1pt; border-style: none none solid; border-color: currentColor currentColor windowtext; padding: 0cm 5.4pt; border-image: none; width: 243.3pt;"><p ><span ><img width="307" height="153" id="그림 28" src="data:image/png;base64,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"></span></p></td></tr></tbody></table><p ><span > </span></p><p class="MsoListParagraph" style="text-indent: -20pt; margin-left: 21.3pt;"><span style="font-family: Wingdings; font-size: 12pt;">n<span style='font: 7pt/normal "Times New Roman"; font-size-adjust: none; font-stretch: normal;'> </span></span><b><span style="font-size: 12pt;">Example: Alignment</span></b></p><p ><span >container-alignment2</span>와<span > container-alignment3</span>에서<span > align-items</span>와<span > align-content</span>의 차이를 알 수 있을 것이다<span >. align-items</span>은 라인은 유지하면서 아이템을 정렬하고<span > align-content</span>는 라인을 정렬한다<span >. </span></p><table class="MsoTableGrid" style="border: currentColor; border-image: none; border-collapse: collapse;" border="1" cellspacing="0" cellpadding="0"><tbody><tr><td width="317" valign="top" style="border-width: 1pt medium; border-style: solid none; border-color: windowtext currentColor; padding: 0cm 5.4pt; width: 237.4pt;"><p align="left" style="text-align: left; -ms-word-break: keep-all;"><i><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>.container-alignment1</span></i><span style='color: black; font-family: "Courier New";'> {</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>display</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>flex</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>flex-wrap</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>wrap</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>justify-content</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>center</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>align-items</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>center</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>width</span><span style='color: black; font-family: "Courier New";'>:</span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>250px</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>height</span><span style='color: black; font-family: "Courier New";'>:</span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>100px</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>background-color</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>AliceBlue</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p ><span style='color: black; font-family: "Courier New";'>}</span></p></td><td width="295" valign="top" style="border-width: 1pt medium; border-style: solid none; border-color: windowtext currentColor; padding: 0cm 5.4pt; width: 221.6pt;"><p ><span ><img width="253" height="103" id="그림 31" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAP0AAABnCAIAAABEqtOOAAAAAXNSR0IArs4c6QAAA/pJREFUeF7tnb9rU2EUhm9d3YtDsEMzCXXrIASn4ng3p+6NiEshQ6BzwUHoEkT7Z9zBodhNXNwsZIpDwSmTDgU3zRcaK2IdTm8P77nnCd3Kd897nvfhkl+0a99+/Kx4QCAZgTvJ9mVdCBQCeI8HGQngfcbW2RnvcSAjAbzP2Do74z0OZCSA9xlbZ2e8x4GMBPA+Y+vsjPc4kJEA3mdsnZ3xHgcyEsD7jK2zM97jQEYCeJ+xdXbGexzISADvM7bOzniPAxkJ4H3G1tkZ73EgIwG8z9g6O+M9DmQkgPcZW2dnvMeBjATWuvR3ow5e98U7PHw++0/C6PnF4f8Zj/t9oLKI2hoBvG8NJRcKRADvA5VF1NYI4H1rKLlQIALd9n403p9N9ps6UCGrqA/rj5MSvvyMBwEX0I7cZe/r3Wc9bfrXpVtIv7e5/vu3vW3Ub7nIrnq/M9ybPbkyp2Vqt3y5nUf3SvSvn/ovjvon8zKttzG65aG5Lt9J7xfSv9m6W1UX8+8R29x8en8RvppOP5T0zfk04hLimTvpfWFebpanZ+L0/x3vy/DgaHGnr5vlr+uNB2Wd81chd1EN3Unv37897r9c3iyjPxZP9MuztYvTd51YR6eOTnqvg/dGSVavbqcnx8PPN7oSh/8mgPeiTlxJv3rCIxo0Ziy8l+xt0Czfx5yfNZfP8iVTBg6F94Lljcbb5bVsVa1v1ZcfXU12eR+zzabwvk2a7Vxr8Djox23trO9yFb5/74J5NYTv37vivn4Y93uRIojhSgDvXXEzTIQA3osUQQxXAnjvipthIgTwXqQIYrgSwHtX3AwTIYD3IkUQw5UA3rviZpgIAbwXKYIYrgTw3hU3w0QI4L1IEcRwJYD3rrgZJkIA70WKIIYrAbx3xc0wEQJ4L1IEMVwJ4L0rboaJEMB7kSKI4UoA711xM0yEAN6LFEEMVwJ474qbYSIE8F6kCGK4EsB7V9wMEyGA9yJFEMOVAN674maYCAG8FymCGK4E8N4VN8NECOC9SBHEcCWA9664GSZCAO9FiiCGKwG8d8XNMBECeC9SBDFcCeC9K26GiRDAe5EiiOFKAO9dcTNMhADeixRBDFcCeO+Km2EiBPBepAhiuBLo1P8zdCXHsMgEuN9Hbo/sVgJ4byXHucgE8D5ye2S3EsB7KznORSaA95HbI7uVAN5byXEuMgG8j9we2a0E8N5KjnORCeB95PbIbiWA91ZynItMAO8jt0d2KwG8t5LjXGQCeB+5PbJbCeC9lRznIhPA+8jtkd1KAO+t5DgXmQDeR26P7FYCeG8lx7nIBPA+cntktxLAeys5zkUmgPeR2yO7lQDeW8lxLjIBvI/cHtmtBH4BIfBmkdmV52QAAAAASUVORK5CYII="></span></p></td></tr><tr><td width="317" valign="top" style="border-width: medium medium 1pt; border-style: none none solid; border-color: currentColor currentColor windowtext; padding: 0cm 5.4pt; border-image: none; width: 237.4pt;"><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='font-family: "Courier New";'> </span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><i><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>.container-alignment2</span></i><span style='color: black; font-family: "Courier New";'> {</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>display</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>flex</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>flex-wrap</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>wrap</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>justify-content</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>center</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>align-items</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>center</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>width</span><span style='color: black; font-family: "Courier New";'>:</span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>250px</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>height</span><span style='color: black; font-family: "Courier New";'>:</span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>250px</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>background-color</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>AliceBlue</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p ><span style='color: black; font-family: "Courier New";'>}</span></p></td><td width="295" valign="top" style="border-width: medium medium 1pt; border-style: none none solid; border-color: currentColor currentColor windowtext; padding: 0cm 5.4pt; border-image: none; width: 221.6pt;"><p ><span ><img width="173" height="165" id="그림 34" src="data:image/png;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAoHBwgHBgoICAgLCgoLDhgQDg0NDh0VFhEYIx8lJCIfIiEmKzcvJik0KSEiMEExNDk7Pj4+JS5ESUM8SDc9Pjv/2wBDAQoLCw4NDhwQEBw7KCIoOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozv/wAARCAClAK0DASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD2GT71Mp8n3qZVrYh7hRRRTEFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAVJF0NR1JF0NJ7DW4kn3qZT5PvUyhbA9wpcE9BSVx2uWlzqPi8WcV+1qnkISfMI9ei55NZ1ajppNK4jstp9DRtPoa8ga9vAxH2y44OP9a3+NH268/wCfy4/7+t/jXB/aK/lFc9f2n0NGD6GvIPt15/z+XH/f1v8AGtHw9d3T+IbBHup2UzAFWkYg9feqjmClJLlC56djPSjafQ1geMmcaPEI7g25e5RTJuKhQc8kjtXH6rHPYLbyQatcXEVwrMrFmQ8HGcZ6Hsa2rYr2UrWuB6ftPoaNp9DXkH268/5/Lj/v63+NH268/wCfy4/7+t/jXP8A2iv5Quev7T6GivIPt15/z+XH/f1v8a9P0lmbw9aOzFmNqpLE5JO2uihilWbVrWBO5obT6GjafQ15hHDPJocmox6tcs8JAkjy+Bk4A3Z5Pf8ArWf9uvP+fy4/7+t/jWLx/LvH8Quev7T6GjafQ15B9uvP+fy4/wC/rf40fbrz/n8uP+/rf41P9or+ULnr5BHUUlcn4Cnmmt74yzSSYdMb2LY4PrXWV30antIKfcYVJF0NR1JF0NaPYa3Ek+9TKfJ96mULYHuFcH4pvH0/xjHeRorvFEhCt0PBrvK878cf8jGf+uCf1rixzappruS9jnicsT6nNFFFeGSFaXhz/kZNP/67D+RrNrS8Of8AIyaf/wBdh/I1dP44+qBHZeNnWPRYnaNZFW6QlG6N14NcTqup/wBq3AuGtY4Hxg+WzEEduCeMegrtPHf/ACL6/wDXwn8jXntdmOk/a2GwooorgEFeq6R/yLln/wBeq/8AoNeVV6rpH/IuWf8A16r/AOg16OX/ABS9Bo85XWJRpZsVt4VLR+W0wBDsmc4Pbr361QpB0pa89yctxBRRRSA7b4ff8e1//wBdE/ka6+uQ+H3/AB7X/wD10T+Rrr6+gwf8CJS2CpIuhqOpIuhrpexS3Ek+9TKfJ96mULYHuFed+OP+RjP/AFwT+teiVzHiDwpcazqhvIruKJfLVNrqSeM+lcmMpynTtFXJZwNFdZ/wr+8/6CFv/wB8NR/wr+8/6CFv/wB8NXk/VK38orM5OtLw5/yMmn/9dh/I1tf8K/vP+ghb/wDfDVa0vwVdafqltePewOsMgYqqtk1dPC1lNNx6hYueO/8AkX1/6+E/ka89r1HxDpEmtaaLSKZImEgfc4JHGfT61zX/AAr+8/6CFv8A98NXRjKFSdW8VdDaOTorrP8AhX95/wBBC3/74aj/AIV/ef8AQQt/++Grk+qVv5RWZydeq6R/yLln/wBeq/8AoNcr/wAK/vP+ghb/APfDV2Nlata6XBZs4ZooRGWHQkDGa7sHRqU5NyVtBpHkQ6UtdWPh9eY/5CFv/wB8NS/8K/vP+ghb/wDfDVw/VK38orM5Oius/wCFf3n/AEELf/vhqP8AhX95/wBBC3/74aj6pW/lCzLXw+/49r//AK6J/I119YnhrQZtCiuEmnjmMzKRsBGMA+v1rbr2sNGUKSjLcpBUkXQ1HUkXQ1u9hrcST71Mp8n3qZQtge4UUUUxBRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFSRdDUdSRdDSew1uJJ96mU+T71MoWwPcKKKKYgooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACpIuhqOpIuhpPYa3Ek+9TKfJ96mULYHuFFFFMQUUUE4Un0GaACiuMXx7ctG8i6QCiY3MJDhc9MnHFN/4WFL/0DE/7/H/CuT67Q7/gxXR2tFcV/wALCl/6Bif9/j/hR/wsKX/oGJ/3+P8AhR9dod/wYXR2tFY3hzxA2vJcM1ssHklRw+7Oc+3tUGreJbuw1dtPtdLa8ZY1fKMc8+wBrX29PkU76MZ0FFcW/j+dHKPpSqynBUykEH8qT/hYUv8A0DE/7/H/AArL67Q7/gxXO1oriv8AhYUv/QMT/v8AH/CrWl+NZNR1O3szYJGJn27xKTjj0xTWMot2TC51dFFFdQwooooAKki6Go6ki6Gk9hrcST71Mp8n3qZQtge4UUUUxBSP9xvoaWkf7jfQ0MDzuK+0tfClzYpLJHcMFZlaMfvJN3Y56AAD2rn6KK+YnNytfoQFFFFQB2vw9/1V/wD70f8AI1JqV5FZ+K7zzLiCAyW0S5nQsrLnLDjocVH8Pf8AVX/+9H/I1k+N/wDkZH/64p/KvT53DCxku/8AmPoY988El/cPbBhA0jGPd1254qCiivME9QrU8M/8jLYf9df6GsutTwz/AMjLYf8AXX+hq6X8SPqgR6jRRRX05YUUUUAFSRdDUdSRdDSew1uJJ96mU+T71MoWwPcKKKKYgpH+430NLSN9xvoaGB43RT/Jm/54yf8AfBo8mb/njJ/3wa+VsyBlFP8AJm/54yf98GjyZv8AnjJ/3waLMDsvh7/qr/8A3o/5Gsnxv/yMj/8AXFP5Vr/D9HSK/wB6MuWT7wI7GsrxrHI3iNysbsPJTkKT2r0Z/wC5x9f8x9DnqKf5M3/PGT/vg0eTN/zxk/74NedZiGVqeGf+RlsP+uv9DWd5M3/PGT/vg1p+GopV8SWBaJwBL1KkdjWlJP2kfVAj0+iiivpiwooooAKki6Go6ki6Gk9hrcST71Mp8n3qZQtge4UUUUxBRRRQAuT6mjJ9TSUUALk+poyfU0lFAC5zRk+tJRQAuT6mjJ9TSUUALk+poyfWkooAKKKKACiiigAqSLoajqSLoaT2GtxJPvUyiihbA9wooopiCiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKki6Giik9hrc//9k="></span></p></td></tr><tr><td width="317" valign="top" style="border-width: medium medium 1pt; border-style: none none solid; border-color: currentColor currentColor windowtext; padding: 0cm 5.4pt; border-image: none; width: 237.4pt;"><p align="left" style="text-align: left; -ms-word-break: keep-all;"><i><span style='color: rgb(63, 127, 127); font-family: "Courier New";'> </span></i></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><i><span style='color: rgb(63, 127, 127); font-family: "Courier New";'>.container-alignment3</span></i><span style='color: black; font-family: "Courier New";'> {</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>display</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>flex</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>flex-wrap</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>wrap</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>justify-content</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>center</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>align-content</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>center</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>width</span><span style='color: black; font-family: "Courier New";'>:</span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>250px</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>height</span><span style='color: black; font-family: "Courier New";'>:</span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>250px</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p align="left" style="text-align: left; -ms-word-break: keep-all;"><span style='color: black; font-family: "Courier New";'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New";'>background-color</span><span style='color: black; font-family: "Courier New";'>: </span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New";'>AliceBlue</span></i><span style='color: black; font-family: "Courier New";'>;</span></p><p ><span style='color: black; font-family: "Courier New";'>}</span></p></td><td width="295" valign="top" style="border-width: medium medium 1pt; border-style: none none solid; border-color: currentColor currentColor windowtext; padding: 0cm 5.4pt; border-image: none; width: 221.6pt;"><p ><span ><img width="173" height="170" id="그림 37" src="data:image/png;base64,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"></span></p></td></tr></tbody></table><p ><span > </span></p><p ><span > </span></p><p ><span > </span></p><p ><span > </span></p><p ><span > </span></p><p ><span > </span></p><p ><span > </span></p><p ><span > </span></p></div><p><br></p>
<!-- -->
]]>
카페 게시글
HTML/CSS
[CSS] 위치와 정렬 Display, Position, Align
초코러브
추천 0
조회 372
17.12.27 16:03
댓글 0
다음검색
