HTML 문서 작성(VSC)

메모장이나 한글오피스로도 가능하다.
하지만 비주얼 스튜디오 코드(VSC)를 쓰면 더 편리하게 HTML 문서를 작성 할 수 있다.

https://code.visualstudio.com/

다음 사이트에 들어가서 VSC를 다운받자

VSC를 키면 위와 같은 화면을 볼 수 있다.

파일 - 새 파일을 눌러서 HTML문서를 실행해준다.

스페이스바 그리고 ctrl를 같이 누르면 자동완성 기능이 된다.

예시로 아래와 같은 코드를 입력해보자

<!-- ######## This is a comment, visible only in the source editor  ######## -->
<h1 style="color: #4485b8;">You can edit <span style="background-color: #4485b8; color: #ffffff; padding: 0 5px;">this demo</span> text!</h1>
<p><strong style="color: #000;">Basic usage:</strong> Paste your documents in the visual editor on the left or your HTML code in the source editor in the right. <br />Edit any of the two areas and see the other changing in real time.&nbsp;</p>
<h4>Use the table below to test most of the features</h4>
<table class="editorDemoTable" style="vertical-align: top;">
<thead>
<tr>
<td>Title</td>
<td>Description 1</td>
<td>Description 2</td>
</tr>
</thead>
<tbody>
<tr>
<td style="min-width: 140px;"><strong>Inline styles</strong></td>
<td>Using <span style="font-weight: bold; color: #000; text-decoration: underline;">inline styles</span> in your HTML document is a bad practice because <strong style="font-weight: normal; font-size: 1.1em; color: #00a; font-family: monospace; letter-spacing: -2px;">they break the default styles of the website</strong>!</td>
<td>Use classes and IDs instead!
<div style="height: 20px; width: 100%; border: 3px dotted #888; background-color: rgba(0,0,0,0.2);">&nbsp;</div>
</td>
</tr>
<tr>
<td><strong>Setting margins</strong></td>
<td style="background-color: rgba(0,0,0,0.1);">
<p>&nbsp;&nbsp;&nbsp;Do not use &nbsp; &nbsp; &nbsp; &nbsp;spaces &nbsp; &nbsp; &nbsp;or &nbsp; &nbsp; &nbsp; empty paragraphs</p>
<p>&nbsp;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp;to set vertical and horizontal &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; gaps.</p>
</td>
<td><span style="line-height: 35px;">&larr;| &nbsp;Use <span style="margin: 5px;">margin, &nbsp;&nbsp;</span> <span style="padding: 5px;">padding, &nbsp; &rarr;|</span> <br />and line-height instead <strong style="font-size: 20px;">↕</strong> </span></td>
</tr>
<tr>
<td><strong>Links and images</strong></td>
<td><a style="font-weight: bold; color: #000; cursor: pointer; text-decoration: underline;" title="Demo link" href="https://html-online.com" target="_blank" rel="noopener">This is a text link</a> and this is an image: <img style="border: 2px solid #4485b8; border-radius: 15px;" src="/images/smiley.png" alt="laughing" width="20" height="20" /></td>
<td>And this is a link image: <a style="cursor: pointer;" title="Image link" href="https://html-cleaner.com" target="_blank" rel="noopener"><img src="/images/smiley.png" alt="smiley" /></a></td>
</tr>
<tr>
<td><strong>Tables and lists</strong></td>
<td>
<table style="margin: auto; box-shadow: 3px 3px 10px #000;" border="1">
<tbody>
<tr style="border-top: 2px solid #555;">
<td style="border: 2px dashed #555;">First cell</td>
<td>Second column</td>
<td>Upper corner</td>
</tr>
<tr style="background-color: rgba(0,0,0,0.1);">
<td>Bottom row</td>
<td>Middle bottom</td>
<td>Right corner</td>
</tr>
</tbody>
</table>
</td>
<td>
<ol>
<li>Demonstrating an ordered list</li>
<li>These are&nbsp;special characters: <span style="color: red; font-size: 17px;">&hearts;</span> <strong style="font-size: 20px;">☺ ★</strong> &gt;&lt;</li>
<li>item 2</li>
</ol>
</td>
</tr>
<tr>
<td valign="top"><strong>Floating an image</strong></td>
<td>
<h4>Floating with inline style</h4>
<p><img style="margin: 0 0 5px 20px; float: right;" src="https://htmlg.com/images/demo-image.jpg" alt="Castle" width="155" height="156" />Lorem&nbsp;ipsum dolor sit amet, nonumes voluptatum mel ea, cu case ceteros cum. Novum commodo malorum vix ut. Dolores consequuntur in ius, sale electram dissentiunt quo te. Cu duo omnes invidunt, eos eu mucius fabellas. Stet facilis ius te, quando voluptatibus eos in. Ad vix mundi alterum, integre urbanitas intellegam vix in.</p>
</td>
<td>
<h4>Floating with classes</h4>
<p><img class="imageRight" src="https://htmlg.com/images/demo-image.jpg" alt="Dover" width="155" height="156" />Lorem&nbsp;ipsum dolor sit amet, nonumes voluptatum mel ea, cu case ceteros cum. Novum commodo malorum vix ut. Dolores consequuntur in ius, sale electram dissentiunt quo te. Cu duo omnes invidunt, eos eu mucius fabellas. Stet facilis ius te, quando voluptatibus eos in. Ad vix mundi alterum, integre urbanitas intellegam vix in.</p>
</td>
</tr>
</tbody>
</table>
<hr />
<p>Set up the cleaning options and click the <span style="background-color: #4485b8; color: #fff; display: inline-block; padding: 2px 8px; font-weight: bold; border-radius: 5px;">Clean</span> button, try the <strong>Tag manager</strong>, or experiment with the <strong>Find and replace tool</strong>.</p>
<p><em>You can always access this demonstration text clicking the <strong>DEMO</strong> menu item.</em></p>
<hr />
<p><em>&copy; htmlg.com</em></p>

성공했다면 아래와 같은 문서를 띄울 수 있다.

출처 : https://htmlg.com/html-editor/