코딩스쿨

▶ HTML References

HTML Bootcamp

1. HTML 기초

1.1 HTML이란?

HTML(HyperText Markup Language)은 웹 페이지를 구조화하고, 텍스트, 이미지, 링크, 비디오 등의 콘텐츠를 표시하기 위해 사용되는 마크업 언어입니다. 모든 웹 페이지는 HTML을 기반으로 작성되며, 이를 통해 브라우저는 웹 페이지의 내용을 사용자에게 표시할 수 있습니다.

1.2 HTML 문서 구조

HTML 문서는 여러 가지 태그로 구성됩니다. 기본적인 HTML 문서 구조는 다음과 같습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First HTML Page</title>
</head>
<body>
    <h1>Welcome to HTML Bootcamp</h1>
    <p>This is your first HTML lesson!</p>
</body>
</html>

<!DOCTYPE html>: HTML5 문서임을 선언합니다.
<html>: 문서의 루트 요소입니다.
<head>: 문서의 메타데이터를 포함하며, 여기에는 제목, 인코딩, 스타일시트 등의 정보가 포함됩니다.
<body>: 사용자에게 실제로 표시되는 콘텐츠를 포함하는 부분입니다.

2. HTML 기본 태그

2.1 제목 태그

HTML에서는 제목을 나타내기 위해 <h1>에서 <h6>까지의 태그를 사용합니다. <h1>은 가장 중요한 제목을, <h6>은 가장 덜 중요한 제목을 나타냅니다.

<h1>HTML Bootcamp</h1>
<h2>Lesson 1: Basic Tags</h2>

2.2 단락 태그

단락을 표시하기 위해 <p> 태그를 사용합니다. 이 태그는 텍스트를 한 단락으로 묶습니다.

<p>This is a paragraph in HTML.</p>

2.3 링크 태그

링크를 생성하려면 <a> 태그를 사용합니다. href 속성은 링크할 URL을 지정합니다.

<a href="<https://www.example.com>">Visit Example</a>

2.4 이미지 태그

이미지를 삽입하려면 <img> 태그를 사용합니다. src 속성은 이미지 파일의 경로를 지정하며, alt 속성은 이미지가 로드되지 않을 경우 대체 텍스트를 제공합니다.

<img src="image.jpg" alt="Sample Image">

3. HTML 리스트

HTML에서는 순서 있는 목록과 순서 없는 목록을 사용할 수 있습니다.

3.1 순서 없는 목록

순서 없는 목록을 만들기 위해 <ul> 태그와 함께 <li> 태그를 사용합니다.

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

3.2 순서 있는 목록

순서 있는 목록을 만들 때는 <ol> 태그와 <li> 태그를 사용합니다.

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

4. HTML 폼

HTML 폼은 사용자가 데이터를 입력하고 서버로 전송할 수 있게 해줍니다.

<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>

    <button type="submit">Submit</button>
</form>

<form>: 폼을 정의하며, action 속성은 폼 데이터가 제출될 URL을, method는 전송 방식을 정의합니다.
<input>: 사용자 입력 필드를 생성합니다. type 속성으로 필드의 유형을 설정할 수 있습니다.
<button>: 폼 데이터를 제출할 버튼을 정의합니다.

5. HTML 미디어

HTML은 비디오와 오디오를 웹 페이지에 삽입할 수 있는 태그를 제공합니다.

5.1 비디오

HTML에서 비디오를 삽입하려면 <video> 태그를 사용합니다.

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

5.2 오디오

오디오 파일을 삽입할 때는 <audio> 태그를 사용합니다.

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>

6. HTML 테이블

HTML에서 데이터를 표 형식으로 나타내려면 <table> 태그를 사용합니다.

<table border="1">
    <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>John</td>
        <td>Doe</td>
        <td>25</td>
    </tr>
    <tr>
        <td>Jane</td>
        <td>Smith</td>
        <td>30</td>
    </tr>
</table>

<table>: 표를 생성합니다.
<tr>: 표의 행을 정의합니다.
<th>: 표의 헤더 셀을 정의합니다.
<td>: 표의 데이터를 정의하는 셀입니다.

7. HTML 시맨틱 요소

HTML5는 콘텐츠의 의미를 더욱 명확하게 하기 위해 시맨틱(semantic) 요소를 도입했습니다.

태그	설명
`<header>`	문서나 섹션의 헤더를 정의합니다.
`<nav>`	내비게이션 링크를 포함하는 섹션을 정의합니다.
`<article>`	독립적인 콘텐츠 블록을 정의합니다.
`<section>`	문서의 구획을 정의합니다.
`<footer>`	문서나 섹션의 바닥글을 정의합니다.
`<aside>`	주요 콘텐츠와 별도의 사이드바 콘텐츠를 정의합니다.

시맨틱 태그 사용 예시:

<article>
    <header>
        <h2>HTML Bootcamp</h2>
        <p>Published on January 1, 2024</p>
    </header>
    <p>This is an introductory article about HTML Bootcamp.</p>
    <footer>
        <p>Author: John Doe</p>
    </footer>
</article>

8. HTML5 새로운 기능

HTML5는 다양한 새로운 기능을 제공합니다. 그 중 일부는 다음과 같습니다.

미디어 태그: <audio>, <video>를 통해 멀티미디어 콘텐츠를 직접 삽입할 수 있습니다.
폼 속성: placeholder, required 같은 새 속성을 지원하여 사용자 입력을 더 효과적으로 처리할 수 있습니다.
시맨틱 태그: 문서 구조를 보다 명확하게 표현할 수 있습니다.

9. HTML과 CSS 연결

HTML은 주로 CSS와 함께 사용됩니다. HTML 문서에 CSS 스타일을 적용하여 디자인과 레이아웃을 개선할 수 있습니다.

CSS 연결 예시:

<head>
    <link rel="stylesheet" href="styles.css">
</head>


/* styles.css */
body {
    font-family: Arial, sans-serif;
}

h1 {
    color: blue;
}

p {
    font-size: 16px;
}

코딩 스쿨 HTML