웹 개발 초보자를 위한 HTML 기초 강의 🌐

작성: 2024년 05월 19일읽기: 약 3분

웹 개발의 세계에 오신 것을 환영합니다! 오늘은 웹 개발의 첫걸음인 HTML에 대해 배워보겠습니다. HTML은 웹 페이지를 만드는 데 사용되는 언어로, 웹의 기본 구조를 만드는 데 필요합니다. 복잡해 보일 수 있지만, 기본적인 개념을 이해하면 누구나 쉽게 웹 페이지를 만들 수 있습니다.

HTML이란 무엇인가요?

HTML은 HyperText Markup Language의 약자로, 웹 페이지를 구성하는 데 사용되는 마크업 언어입니다. 웹 페이지의 구조를 정의하고, 텍스트, 이미지, 링크 등을 웹 페이지에 표시하는 방법을 브라우저에 알려줍니다.

기본 HTML 구조

HTML 문서는 기본적으로 다음과 같은 구조를 가지고 있습니다:

<!DOCTYPE html>
<html>
<head>
    <title>페이지 제목</title>
</head>
<body>
    여기에 내용이 들어갑니다.
</body>
</html>

<!DOCTYPE html>: 문서가 HTML5 문서임을 선언합니다.
<html>: HTML 문서의 시작과 끝을 나타냅니다.
<head>: 문서의 메타데이터(예: 제목, 문자 집합, 스타일 시트 링크 등)를 포함합니다.
<title>: 웹 브라우저 탭에 표시되는 페이지의 제목을 정의합니다.
<body>: 실제 페이지의 내용을 포함합니다.

HTML 태그

HTML은 다양한 태그를 사용하여 웹 페이지의 내용을 구성합니다. 여기 몇 가지 기본적인 태그를 소개합니다:

<h1> ~ <h6>: 제목을 나타내는 태그입니다. <h1>이 가장 큰 제목이며, <h6>으로 갈수록 작아집니다.
<p>: 문단을 나타냅니다.
<a href="URL">링크 텍스트</a>: 다른 페이지나 사이트로 연결하는 하이퍼링크를 만듭니다.
<img src="이미지 URL" alt="대체 텍스트">: 이미지를 웹 페이지에 삽입합니다.

첫 번째 웹 페이지 만들기

이제 간단한 웹 페이지를 만들어 보겠습니다. 아래의 코드를 사용해 보세요:

<!DOCTYPE html>
<html>
<head>
    <title>나의 첫 웹 페이지</title>
</head>
<body>
    <h1>환영합니다!</h1>
    <p>이것은 내가 만든 첫 번째 웹 페이지입니다.</p>
    <a href="https://www.example.com">더 배우기</a>
</body>
</html>

이 코드를 텍스트 에디터에 붙여넣고 .html 확장자로 저장한 다음, 웹 브라우저에서 파일을 열어보세요. 나만의 웹 페이지가 어떻게 보이는지 확인할 수 있습니다!

HTML은 웹 개발의 기초이며, 이를 통해 더 복잡한 기술로 나아갈 수 있는 기반을 마련할 수 있습니다. 오늘 배운 내용을 토대로 계속 연습하고, 다양한 태그와 속성을 실험해 보세요. 웹 개발 여정의 첫걸음을 내딛은 여러분을 진심으로 축하합니다!