Name: 웹 개발 - 온라인
Availability: InStock

HTML 소개

웹 개발의 세계에 오신 것을 환영합니다! 이 단원에서는 인터넷의 근간을 이루는 HTML을 소개합니다. HTML은 HyperText Markup Language의 약자로, 웹 페이지를 만드는 표준 언어입니다. 웹사이트의 뼈대라고 생각하면 됩니다. 구조와 내용을 제공합니다.

HTML이 없으면 웹 브라우저는 텍스트, 이미지 또는 링크를 표시하는 방법을 알 수 없습니다. 간단한 개인 페이지부터 복잡한 웹 애플리케이션에 이르기까지 웹사이트 구축에 관심 있는 모든 사람에게 필수적입니다. 기본부터 시작하여 간단한 웹 페이지 레이아웃을 만드는 방법을 알아보겠습니다.

HTML 구조: 기본 템플릿

모든 HTML 문서는 기본 구조를 따릅니다. 이 구조는 브라우저에 HTML 파일을 읽고 있음을 알려주고 페이지에 필요한 필수 요소를 제공합니다. 다음은 최소한의 HTML 템플릿입니다.

            
<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <!-- Page content goes here -->
</body>
</html>

각 부분을 살펴보겠습니다.

<!DOCTYPE html>: 이 선언은 브라우저에 이 문서가 HTML5 문서임을 알려줍니다. 항상 HTML 파일의 맨 처음에 와야 합니다.
<html>: 페이지의 루트 요소입니다. 다른 모든 것은 이 태그 안에 들어갑니다.
<head>: 이 섹션에는 제목, 문자 집합, 스타일시트 링크 등 HTML 문서에 대한 메타 정보가 포함됩니다.
<title>: HTML 페이지의 제목을 지정합니다(브라우저 제목 표시줄 또는 탭에 표시됨).
<body>: 이 부분에 웹 페이지의 모든 콘텐츠(텍스트, 이미지, 링크 및 사용자가 보는 모든 것)가 들어갑니다.

HTML 태그: 요소 및 속성

HTML은 태그를 사용하여 요소를 정의합니다. 대부분의 태그는 여는 태그와 닫는 태그의 쌍으로 구성됩니다. 예를 들어, <p>는 단락의 여는 태그이고, </p>는 닫는 태그입니다.

일부 태그는 자체 닫힘 태그이며, 별도의 닫는 태그가 필요 없습니다. 예를 들어, 줄 바꿈을 만드는 <br> 태그가 있습니다. 태그에는 요소에 대한 추가 정보를 제공하는 속성이 있을 수도 있습니다. 예를 들어, <img> 태그(이미지용)는 src 속성을 사용하여 이미지 소스를 지정합니다.

제목: <h1>부터 <h6>까지

제목은 콘텐츠를 구조화하고 읽기 쉽게 만드는 데 사용됩니다. HTML은 <h1>(가장 중요)부터 <h6>(가장 덜 중요)까지 여섯 가지 수준의 제목을 제공합니다. 일반적으로 <h1>은 페이지의 주요 제목으로 사용됩니다.

다음은 예시입니다.

            
<h1>This is a Level 1 Heading</h1>
<h2>This is a Level 2 Heading</h2>
<h3>This is a Level 3 Heading</h3>

단락: <p>

단락은 텍스트 블록을 표시하는 데 사용됩니다. <p> 태그는 단락을 정의합니다.

예시:

            
<p>This is a paragraph of text.  It can contain multiple sentences and words.</p>
<p>This is another paragraph. Paragraphs are automatically separated by a blank line.</p>

목록: <ul> 및 <ol>

HTML은 두 가지 유형의 목록을 제공합니다: 순서 없는 목록(<ul>)과 순서 있는 목록(<ol>). 순서 없는 목록은 특정 순서가 없는 항목에 사용되며, 순서 있는 목록은 특정 순서로 있어야 하는 항목에 사용됩니다. 목록 항목은 <li> 태그를 사용하여 정의됩니다.

다음은 두 가지 예시입니다.

            
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

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

링크: <a>

링크는 사용자가 다른 웹 페이지나 같은 페이지 내의 섹션 간에 이동할 수 있도록 합니다. <a> 태그는 하이퍼링크를 정의합니다. 가장 중요한 속성은 링크의 URL을 지정하는 href입니다.

예시:

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

target 속성을 사용하여 연결된 문서를 열 위치를 지정할 수 있습니다. target="_blank"는 새 탭 또는 창에서 링크를 엽니다.

이미지: <img>

<img> 태그는 웹 페이지에 이미지를 삽입하는 데 사용됩니다. src 속성은 이미지 파일의 경로를 지정합니다. alt 속성은 이미지에 대한 대체 텍스트를 제공하며, 이미지를 로드할 수 없을 때 표시되고 접근성에 중요합니다.

예시:

            
<img src="image.jpg" alt="Description of the image">

간단한 웹 페이지 레이아웃 구축

이제 배운 모든 것을 결합하여 기본적인 웹 페이지 레이아웃을 만들어 봅시다. 제목, 단락, 목록, 링크 및 이미지를 포함할 것입니다.

다음은 전체 HTML 코드입니다.

            
<!DOCTYPE html>
<html>
<head>
    <title>My First Webpage</title>
</head>
<body>
    <h1>Welcome to My Webpage!</h1>
    <p>This is a simple webpage created using HTML fundamentals.</p>
    <ul>
        <li>Learn HTML</li>
        <li>Practice coding</li>
        <li>Build awesome websites</li>
    </ul>
    <a href="https://www.google.com" target="_blank">Visit Google</a>
    <img src="placeholder.jpg" alt="A placeholder image">
</body>
</html>

"placeholder.jpg"를 실제 이미지 파일 경로로 바꾸는 것을 잊지 마세요. 이 코드를 HTML 파일(예: "index.html")로 저장하고 웹 브라우저에서 열어 결과를 확인하세요. 이제 완벽하게 작동하는 HTML 페이지를 갖게 되었습니다!

레슨