이것은 w3c 조직에서 제공한 HTML4에 대한 스타일 제안입니다. 안타깝게도 브라우저는 자체 비공개 속성을 추가하여 표준을 클라우드로 만들었습니다. 그러나 그것은 여전히 우리에게 매우 중요한 참고 자료입니다.
부록 D. HTML 4용 기본 스타일 시트
이 부록은 규범이 아닌 정보 제공용입니다.
이 스타일 시트는 다음을 기반으로 하는 모든 HTML 4([HTML4]) 요소의 일반적인 형식을 설명합니다. 현재 UA 방식에 대한 광범위한 연구를 통해 개발자는 이를 구현 시 기본 스타일 시트로 사용하는 것이 좋습니다.
교체된 요소("img", "개체"), 스크립팅 요소("스크립트", "애플릿"), 양식 제어 요소 및 프레임 요소.
다른 요소의 경우 레거시 프레젠테이션을 CSS로 설명할 수 있지만 솔루션에서는 해당 요소를 제거합니다. 예를 들어 FONT 요소는 CSS 선언을 다른 요소(예: DIV)에 첨부하여 대체할 수 있습니다. 마찬가지로 표현 속성(예: TABLE의 "border" 속성)의 레거시 표현은 CSS로 설명할 수 있지만 원본 문서를 변경해야 합니다.
<code class="css">html, address, <br>blockquote, <br>body, dd, div, <br>dl, dt, fieldset, form, <br>frame, frameset, <br>h1, h2, h3, h4, <br>h5, h6, noframes, <br>ol, p, ul, <span class="value"><font color="#0000ff">center</font></span>, <br>dir, hr, menu, <span class="value"><font color="#0000ff">pre</font></span> { <span class="attrib"><strong><font color="#000080">display</font></strong></span>: <span class="value"><font color="#0000ff">block</font></span> } <br>li { <span class="attrib"><strong><font color="#000080">display</font></strong></span>: <span class="value"><font color="#0000ff">list-item</font></span> } <br>head { <span class="attrib"><strong><font color="#000080">display</font></strong></span>: <span class="value"><font color="#0000ff">none</font></span> } <br>table { <span class="attrib"><strong><font color="#000080">display</font></strong></span>: table } <br>tr { <span class="attrib"><strong><font color="#000080">display</font></strong></span>: <span class="value"><font color="#0000ff">table-row</font></span> } <br>thead { <span class="attrib"><strong><font color="#000080">display</font></strong></span>: <span class="value"><font color="#0000ff">table-header-group</font></span> } <br>tbody { <span class="attrib"><strong><font color="#000080">display</font></strong></span>: <span class="value"><font color="#0000ff">table-row-group</font></span> } <br>tfoot { <span class="attrib"><strong><font color="#000080">display</font></strong></span>: <span class="value"><font color="#0000ff">table-footer-group</font></span> } <br>col { <span class="attrib"><strong><font color="#000080">display</font></strong></span>: <span class="value"><font color="#0000ff">table-column</font></span> } <br>colgroup { <span class="attrib"><strong><font color="#000080">display</font></strong></span>: <span class="value"><font color="#0000ff">table-column-group</font></span> } <br>td, th { <span class="attrib"><strong><font color="#000080">display</font></strong></span>: <span class="value"><font color="#0000ff">table-cell</font></span> } <br><span class="value"><font color="#0000ff">caption</font></span> { <span class="attrib"><strong><font color="#000080">display</font></strong></span>: <span class="value"><font color="#0000ff">table-caption</font></span> } <br>th { <span class="attrib"><strong><font color="#000080">font-weight</font></strong></span>: <span class="value"><font color="#0000ff">bolder</font></span>; <span class="attrib"><strong><font color="#000080">text-align</font></strong></span>: <span class="value"><font color="#0000ff">center</font></span> } <br><span class="value"><font color="#0000ff">caption</font></span> { <span class="attrib"><strong><font color="#000080">text-align</font></strong></span>: <span class="value"><font color="#0000ff">center</font></span> } <br>body { <span class="attrib"><strong><font color="#000080">margin</font></strong></span>: <span class="number"><font color="#ff0000">8px</font></span> } <br>h1 { <span class="attrib"><strong><font color="#000080">font-size</font></strong></span>: <span class="number"><font color="#ff0000">2em</font></span>; <span class="attrib"><strong><font color="#000080">margin</font></strong></span>: .<span class="number"><font color="#ff0000">67em</font></span> <span class="number"><font color="#ff0000">0</font></span> } <br>h2 { <span class="attrib"><strong><font color="#000080">font-size</font></strong></span>: <span class="number"><font color="#ff0000">1.5em</font></span>; <span class="attrib"><strong><font color="#000080">margin</font></strong></span>: .<span class="number"><font color="#ff0000">75em</font></span> <span class="number"><font color="#ff0000">0</font></span> } <br>h3 { <span class="attrib"><strong><font color="#000080">font-size</font></strong></span>: <span class="number"><font color="#ff0000">1.17em</font></span>; <span class="attrib"><strong><font color="#000080">margin</font></strong></span>: .<span class="number"><font color="#ff0000">83em</font></span> <span class="number"><font color="#ff0000">0</font></span> } <br>h4, p, <br>blockquote, ul, <br>fieldset, form, <br>ol, dl, dir, <br>menu { <span class="attrib"><strong><font color="#000080">margin</font></strong></span>: <span class="number"><font color="#ff0000">1.12em</font></span> <span class="number"><font color="#ff0000">0</font></span> } <br>h5 { <span class="attrib"><strong><font color="#000080">font-size</font></strong></span>: .<span class="number"><font color="#ff0000">83em</font></span>; <span class="attrib"><strong><font color="#000080">margin</font></strong></span>: <span class="number"><font color="#ff0000">1.5em</font></span> <span class="number"><font color="#ff0000">0</font></span> } <br>h6 { <span class="attrib"><strong><font color="#000080">font-size</font></strong></span>: .<span class="number"><font color="#ff0000">75em</font></span>; <span class="attrib"><strong><font color="#000080">margin</font></strong></span>: <span class="number"><font color="#ff0000">1.67em</font></span> <span class="number"><font color="#ff0000">0</font></span> } <br>h1, h2, h3, h4, <br>h5, h6, b, <br>strong { <span class="attrib"><strong><font color="#000080">font-weight</font></strong></span>: <span class="value"><font color="#0000ff">bolder</font></span> } <br>blockquote { <span class="attrib"><strong><font color="#000080">margin-left</font></strong></span>: <span class="number"><font color="#ff0000">40px</font></span>; <span class="attrib"><strong><font color="#000080">margin-right</font></strong></span>: <span class="number"><font color="#ff0000">40px</font></span> } <br>i, cite, em, <br>var, address { <span class="attrib"><strong><font color="#000080">font-style</font></strong></span>: <span class="value"><font color="#0000ff">italic</font></span> } <br><span class="value"><font color="#0000ff">pre</font></span>, tt, <span class="value"><font color="#0000ff">code</font></span>, <br>kbd, samp { <span class="attrib"><strong><font color="#000080">font-family</font></strong></span>: monospace } <br><span class="value"><font color="#0000ff">pre</font></span> { <span class="attrib"><strong><font color="#000080">white-space</font></strong></span>: <span class="value"><font color="#0000ff">pre</font></span> } <br>button, textarea, <br>input, select { <span class="attrib"><strong><font color="#000080">display</font></strong></span>: <span class="value"><font color="#0000ff">inline</font></span>-<span class="value"><font color="#0000ff">block</font></span> } <br>big { <span class="attrib"><strong><font color="#000080">font-size</font></strong></span>: <span class="number"><font color="#ff0000">1.17em</font></span> } <br><span class="value"><font color="#0000ff">small</font></span>, <span class="value"><font color="#0000ff">sub</font></span>, sup { <span class="attrib"><strong><font color="#000080">font-size</font></strong></span>: .<span class="number"><font color="#ff0000">83em</font></span> } <br><span class="value"><font color="#0000ff">sub</font></span> { <span class="attrib"><strong><font color="#000080">vertical-align</font></strong></span>: <span class="value"><font color="#0000ff">sub</font></span> } <br>sup { <span class="attrib"><strong><font color="#000080">vertical-align</font></strong></span>: <span class="value"><font color="#0000ff">super</font></span> } <br>table { <span class="attrib"><strong><font color="#000080">border-spacing</font></strong></span>: <span class="number"><font color="#ff0000">2px</font></span>; } <br>thead, tbody, <br>tfoot { <span class="attrib"><strong><font color="#000080">vertical-align</font></strong></span>: <span class="value"><font color="#0000ff">middle</font></span> } <br>td, th, tr { <span class="attrib"><strong><font color="#000080">vertical-align</font></strong></span>: inherit } <br>s, strike, del { <span class="attrib"><strong><font color="#000080">text-decoration</font></strong></span>: <span class="value"><font color="#0000ff">line-through</font></span> } <br>hr { <span class="attrib"><strong><font color="#000080">border</font></strong></span>: <span class="number"><font color="#ff0000">1px</font></span> <span class="value"><font color="#0000ff">inset</font></span> } <br>ol, ul, dir, <br>menu, dd { <span class="attrib"><strong><font color="#000080">margin-left</font></strong></span>: <span class="number"><font color="#ff0000">40px</font></span> } <br>ol { <span class="attrib"><strong><font color="#000080">list-style-type</font></strong></span>: <span class="value"><font color="#0000ff">decimal</font></span> } <br>ol ul, ul ol, <br>ul ul, ol ol { <span class="attrib"><strong><font color="#000080">margin-top</font></strong></span>: <span class="number"><font color="#ff0000">0</font></span>; <span class="attrib"><strong><font color="#000080">margin-bottom</font></strong></span>: <span class="number"><font color="#ff0000">0</font></span> } <br>u, ins { <span class="attrib"><strong><font color="#000080">text-decoration</font></strong></span>: <span class="value"><font color="#0000ff">underline</font></span> } <br>br:before { <span class="attrib"><strong><font color="#000080">content</font></strong></span>: <span class="string"><font color="#008080">"\A"</font></span>; <span class="attrib"><strong><font color="#000080">white-space</font></strong></span>: <span class="value"><font color="#0000ff">pre</font></span>-line } <br><span class="value"><font color="#0000ff">center</font></span> { <span class="attrib"><strong><font color="#000080">text-align</font></strong></span>: <span class="value"><font color="#0000ff">center</font></span> } <br>:link, :visited { <span class="attrib"><strong><font color="#000080">text-decoration</font></strong></span>: <span class="value"><font color="#0000ff">underline</font></span> } <br>:focus { <span class="attrib"><strong><font color="#000080">outline</font></strong></span>: <span class="value"><font color="#0000ff">thin</font></span> <span class="value"><font color="#0000ff">dotted</font></span> <span class="value"><font color="#0000ff">invert</font></span> } <br> <br><span class="mlcom"><font color="#4040c2">/* Begin bidirectionality settings (do not change) */</font></span> <br>BDO[DIR=<span class="string"><font color="#008080">"ltr"</font></span>] { <span class="attrib"><strong><font color="#000080">direction</font></strong></span>: <span class="value"><font color="#0000ff">ltr</font></span>; <span class="attrib"><strong><font color="#000080">unicode-bidi</font></strong></span>: <span class="value"><font color="#0000ff">bidi-override</font></span> } <br>BDO[DIR=<span class="string"><font color="#008080">"rtl"</font></span>] { <span class="attrib"><strong><font color="#000080">direction</font></strong></span>: <span class="value"><font color="#0000ff">rtl</font></span>; <span class="attrib"><strong><font color="#000080">unicode-bidi</font></strong></span>: <span class="value"><font color="#0000ff">bidi-override</font></span> } <br> <br>*[DIR=<span class="string"><font color="#008080">"ltr"</font></span>] { <span class="attrib"><strong><font color="#000080">direction</font></strong></span>: <span class="value"><font color="#0000ff">ltr</font></span>; <span class="attrib"><strong><font color="#000080">unicode-bidi</font></strong></span>: <span class="value"><font color="#0000ff">embed</font></span> } <br>*[DIR=<span class="string"><font color="#008080">"rtl"</font></span>] { <span class="attrib"><strong><font color="#000080">direction</font></strong></span>: <span class="value"><font color="#0000ff">rtl</font></span>; <span class="attrib"><strong><font color="#000080">unicode-bidi</font></strong></span>: <span class="value"><font color="#0000ff">embed</font></span> } <br> <br>@media <span class="value"><font color="#0000ff">print</font></span> { <br> h1 { <span class="attrib"><strong><font color="#000080">page-break-before</font></strong></span>: <span class="value"><font color="#0000ff">always</font></span> } <br> h1, h2, h3, <br> h4, h5, h6 { <span class="attrib"><strong><font color="#000080">page-break-after</font></strong></span>: <span class="value"><font color="#0000ff">avoid</font></span> } <br> ul, ol, dl { <span class="attrib"><strong><font color="#000080">page-break-before</font></strong></span>: <span class="value"><font color="#0000ff">avoid</font></span> } <br>}</code>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
