https://smwiki.info/index.php?action=history&feed=atom&title=CSS%3A%ED%81%AC%EA%B8%B0%EC%B2%99%EB%8F%84 2026-05-12T02:35:15Z 이 문서의 편집 역사 MediaWiki 1.45.1 https://smwiki.info/index.php?title=CSS:%ED%81%AC%EA%B8%B0%EC%B2%99%EB%8F%84&diff=4548&oldid=prev 2021-06-02T13:03:23Z

<p><span class="autocomment">사이즈 척도</span></p> <table style="background-color: #fff; color: #202122;" data-mw="interface"> <col class="diff-marker" /> <col class="diff-content" /> <col class="diff-marker" /> <col class="diff-content" /> <tr class="diff-title" lang="ko"> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← 이전 판</td> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">2021년 6월 2일 (수) 13:03 판</td> </tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l1">1번째 줄:</td> <td colspan="2" class="diff-lineno">1번째 줄:</td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>{{CSS}}&lt;br /&gt;</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>{{CSS}}&lt;br /&gt;</div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></ins></div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>==사이즈 척도==</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>==사이즈 척도==</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>필요에 따라 사이즈 척도를 달리하여 적용한다.</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>필요에 따라 사이즈 척도를 달리하여 적용한다.</div></td></tr> <tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l21">21번째 줄:</td> <td colspan="2" class="diff-lineno">22번째 줄:</td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>바로 위의 부모에 대한 크기의 %로 크기를 지정한다.</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>바로 위의 부모에 대한 크기의 %로 크기를 지정한다.</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>|}</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>|}</div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">== 유의 ==</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">높이 height  속성엔 %를 사용할 순 없다. 이 대신 height: 50vh; 처럼 전체 높이의 50%를 가져간다는 값을 지정해줄 수 있다. width엔 %사용이 가능하고 50wh; 사용도 가능하다.</ins></div></td></tr> <!-- diff cache key my_wiki:diff:1.41:old-4537:rev-4548:php=table --> </table>

Sam https://smwiki.info/index.php?title=CSS:%ED%81%AC%EA%B8%B0%EC%B2%99%EB%8F%84&diff=4537&oldid=prev 2021-06-02T12:54:51Z

<p>새 문서: {{CSS}}&lt;br /&gt; ==사이즈 척도== 필요에 따라 사이즈 척도를 달리하여 적용한다. {| class=&quot;wikitable&quot; !척도 !설명 |- |px |픽셀. 고정된 값을 지정한다....</p> <p><b>새 문서</b></p><div>{{CSS}}&lt;br /&gt;<br /> ==사이즈 척도==<br /> 필요에 따라 사이즈 척도를 달리하여 적용한다.<br /> {| class=&quot;wikitable&quot;<br /> !척도<br /> !설명<br /> |-<br /> |px<br /> |픽셀. 고정된 값을 지정한다.<br /> |-<br /> |em<br /> |부모의 값을 함께 따라간다. 부모에 대한 배율로 지정한다.<br /> 부모가 여러 개 있을 때 중복적용되어 의존성 관리가 어렵다;(기본폰트사이즈가 커지면 부모들의 변화와 중첩 적용되어 지수형태로 변화가 일어나버린다.)<br /> |-<br /> |rem(responsive)<br /> |가장 많이 사용하는 방식.(최근엔 반응형 웹으로 만들기 때문에)<br /> HTML의 기본 폰트사이즈에 의존하여 따라간다.(body의 폰트사이즈에 의존)<br /> |-<br /> |%<br /> |이것도 아주 많이 사용한다.<br /> 바로 위의 부모에 대한 크기의 %로 크기를 지정한다.<br /> |}</div>

Sam