HTML 체트시트

웹 개발자 지망생 여러분 환영합니다! 오늘 우리는 HTML의 세계로 접수합니다. HTML은 당신이 방문한 적 있는 모든 웹사이트의 뼈대입니다. 10년 이상 HTML을 가르쳐온 사람으로서, 첫 인상은 무서울 것 같지만 실제로는 그렇지 않다고 말씀드릴 수 있습니다. 사실, 저는 HTML을 인터넷의 레고 블록처럼 생각합니다 - 간단한 조각들이 모여 놀라운 것을 만들 수 있습니다!

HTML - Cheat Sheet

기본 태그

모든 HTML 문서는 몇 가지 필수 태그로 시작합니다. 이를网页의 기초라고 생각해 보세요:

<!DOCTYPE html>
<html>
<head>
<title>제 첫 번째 웹 페이지</title>
</head>
<body>
Hello, World!
</body>
</html>

이를 간단히 설명하자면:

<!DOCTYPE html>는 브라우저에게 이 문서가 HTML5 문서임을 알립니다.
<html>는 페이지의 루트 요소입니다.
<head>는 문서에 대한 메타 정보를 포함합니다.
<title>는 문서의 제목을 지정합니다.
<body>는 문서의 본문을 정의하며, 모든 시각적 콘텐츠가 들어갑니다.

본문 속성

<body> 태그는 콘텐츠가 어떻게 표시되는지 제어할 수 있는 여러 속성을 가질 수 있습니다. 여기 몇 가지 흔한 속성을 소개합니다:

속성	설명
bgcolor	배경 색상 설정
background	배경 이미지 설정
text	텍스트 색상 설정

예시:

<body bgcolor="lightblue" text="navy">
Welcome to my blue world!
</body>

이렇게 하면 연청색 배경과 나비색 텍스트로 페이지가 만들어집니다. 방이를 칠하는 것처럼, 하지만 웹사이트에요!

텍스트 태그

HTML은 텍스트를 포맷팅하는 데 여러 태그를 제공합니다. 여기 가장 흔한 몇 가지를 소개합니다:

태그	설명
`<h1>`에서 `<h6>`	제목 (h1이 가장 크고, h6이 가장 작음)
`<p>`	문단
`<br>`	줄 바꿈
`<strong>`	볼드 텍스트
`<em>`	기울인 텍스트

예시:

<h1>Welcome to My Website</h1>
<p>This is a <strong>bold</strong> statement.</p>
<p>This is an <em>emphasized</em> point.</p>

링크

링크는 웹을 웹으로 만드는 것입니다! 이렇게 만듭니다:

<a href="https://www.example.com">Click me!</a>

href 속성은 링크가 가는 페이지의 URL을 지정합니다. 또한 ID를 사용하여 페이지의 특정 부분으로 링크할 수 있습니다:

<h2 id="section2">Section 2</h2>
<a href="#section2">Go to Section 2</a>

포맷팅

HTML은 볼드와 이탤릭 이 외에도 텍스트를 포맷팅하는 여러 방법을 제공합니다. 다음은 몇 가지 더 있습니다:

태그	설명
`<sup>`	상표 텍스트
`<sub>`	하표 텍스트
`<pre>`	사전 포맷된 텍스트
`<code>`	코드 스니펫

예시:

<p>H<sub>2</sub>O is water.</p>
<p>2<sup>3</sup> equals 8.</p>
<pre>
This text
is preformatted.
</pre>
<p>Here's some <code>inline code</code>.</p>

목록은 정보를 정리하는 데 도움이 됩니다. HTML에는 세 가지 유형의 목록이 있습니다:

비순차 목록 (<ul>)
순차 목록 (<ol>)
정의 목록 (<dl>)

예시:

<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Cherries</li>
</ul>

<ol>
<li>First step</li>
<li>Second step</li>
<li>Third step</li>
</ol>

<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>

그래픽 요소

이미지는 웹사이트를 더욱生动的하게 만듭니다. 이렇게 추가합니다:

<img src="cat.jpg" alt="A cute cat" width="300" height="200">

src 속성은 이미지 파일을 지정하고, alt은 화면 리더나 이미지 로드 실패 시 대체 텍스트를 제공하며, width과 height는 크기를 설정합니다.

폼

폼은 사용자가 데이터를 입력할 수 있게 합니다. 간단한 폼을 보겠습니다:

<form action="/submit-form" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

<input type="submit" value="Submit">
</form>

이렇게 하면 이름과 이메일 필드와 제출 버튼이 있는 폼이 만들어집니다.

테이블

테이블은 행과 열로 데이터를 표시하는 데 사용됩니다:

<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>

테이블 속성

테이블은 여러 속성을 통해 사용자 정의할 수 있습니다:

속성	설명
border	테두리 두께 설정
cellpadding	셀 내용과 테두리 사이의 공간 설정
cellspacing	셀 간의 공간 설정
width	테이블의 너비 설정

HTML5 입력 태그 속성

HTML5는 새로운 입력 유형과 속성을 도입했습니다:

유형/속성	설명
type="email"	이메일 주소용
type="date"	날짜 선택기용
type="number"	수치 입력용
placeholder	입력 필드의 힌트 텍스트
required	필드를 필수로 설정

예시:

<input type="email" placeholder="Enter your email" required>
<input type="date" name="birthday">
<input type="number" min="1" max="100">

HTML 편집기 및 포맷터

텍스트 편집기에서 HTML을 작성할 수도 있지만, 전용 HTML 편집기를 사용하면 더 쉬워집니다. 몇 가지 인기 있는 옵션은 다음과 같습니다:

Visual Studio Code
Sublime Text
Atom

이 편집기들은 문법 강조와 자동 완성 기능을 제공하여 시간과 두통을 절약할 수 있습니다!

결론

이제 여러분은 HTML 체트시트를 통해 웹 페이지를 만드는 데 필요한 기본을 배웠습니다. HTML은 시작에 불과합니다. 진행하면서 CSS를 스타일링하고 JavaScript를 상호작용성을 위해 배우게 될 것입니다.

HTML을 배우는 것은 새로운 언어를 배우는 것과 같습니다 - 연습이 필요합니다. 두려워하지 마세요! 그리고 우리 모두가 배우는 것입니다! 그리고 누구 knows? maybe the next big website will be built by you!

Happy coding, and may your tags always be properly closed!

Credits: Image by storyset