HTML 웹 페이지 만들기 방법이 궁금하신가요? 초보자 분들을 위해 기초를 짧게 안내하고 아주 간단하지만 완벽하게 작동할 수 있는 웹 페이지를 만드는 5가지 방법을 정리해 보겠습니다. 이미 웹 제작에 능숙한 분들 보다는 이제 막 시작하는 분들에게 도움이 될 수 있으니 끝까지 내용을 확인해 보시기 바라겠습니다.

HTML이란 무엇인가요?

HTML은 Hyper Text Markup Language의 약자로 페이지를 구성하는 중요한 뼈대 역할을 합니다. 그리고 <태그>를 사용해 웹 페이지의 콘텐츠를 구성 하는데 여기서 ‘태그’는 브라우저 상에 텍스트, 이미지, 링크 등의 요소를 표시하는 것을 의미합니다.

HTML 웹페이지 만들기 5단계 방법

아래에서는 초보자 분들이 1단계부터 5단계까지 총 5단계 과정을 통해 간단한 HTML 웹 페이지 만들기 코드와 과정을 설명해 보겠습니다. 요즘 프로그래밍을 할 때 AI가 많은 부분에 도움을 준다고 하지만 애초에 기본 지식이 없으면 더 고도화된 작업물을 만들 수 없기 때문에 이 첫 과정을 이해하는 것이 중요합니다.

1단계 – HTML 작업 설정 및 생성

코딩을 시작하기 전에 코드를 짤 수 있는 공간이 필요합니다. 무료로 사용할 수 있는 VS Code나 Notepad++ 프로그램을 사용하면 됩니다. 비주얼 코드를 예시로, 코드를 작성한 뒤 웹 브라우저(chrome, firefox 같은 포털)에서 미리 자신이 만든 페이지를 확인해 볼 수 있습니다.

코드 편집기 : 비주얼코드(VS Code) or 노트패드(Notepad++) 등
웹 브라우저 : 크롬(chrome), 파이어폭스(firefox), 웨일(whale) 등

2단계 – 기초 HTML 구조 생성하기

환경 세팅이 완료 되었다면 html의 기본 구조를 생성해야 하는데요. 텍스트 편집기를 연 뒤 아래의 코드를 입력해 봅니다. 혹시라도 비주얼 코드를 이용한다면 ‘html’을 작성하면 글씨 하단에 연관 템플릿이 뜨기 때문에 템플릿을 클릭해도 됩니다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>내 첫번째 페이지</title>
</head>

<body>
    <h1>내 페이지에 온 것을 환영합니다!</h1>
    <p>이것은 간단한 HTML 페이지 예시입니다.</p>
</body>

</html>

여기서 <title>은 사이트 제목, <h1>은 글 중에서 가장 큰 제목, <p>는 본문글을 의미합니다. 앞으로 <head>와 <body>라는 영역 및 태그를 계속해서 기억해 두시는 것을 권장드립니다.

3단계 – 파일 저장 및 테스트 하기

기본 뼈대를 만들어 두었으니 파일을 미리 저장해 두어야 하는데요. 일반적으로 ‘index.html’ 확장자 이름으로 저장해 둡니다. 1단계 코드만 작성한 뒤 html을 웹 브라우저에서 열어보면 아래와 같이 보이게 됩니다.

내 첫번째 페이지

내 페이지에 온 것을 환영합니다!

이것은 간단한 HTML 페이지 예시입니다.

아직은 텍스트 밖에 없지만 벌써 인터넷에 새로운 가상 공간을 만들어 낸 것입니다.

4단계 – 태그 요소를 추가하기

더 다양한 html 태그 요소들을 추가해서 페이지를 채워가겠습니다.

1. 제목

위에서 <h1>을 썼던 것처럼 하위 <h6>까지 제목의 크기를 지정할 수 있습니다. 아래의 코드처럼 쭉 작성해 본 뒤 켜두었던 웹 브라우저를 새로고침하여 제목의 크기가 어떻게 변화 했는지 확인해 봅니다.

<h2>About HTML</h2>
<p>HTML is the standard language for creating webpages. It is easy to learn and highly versatile.</p>

<h3> 테스트3 </h3>
<h4> 테스트4 </h4>
<h5> 테스트5 </h5>
<h6> 테스트6 </h6>

2. 링크 태그

링크를 포함하고 싶을 때는 <a> 태그를 사용해서 만들어 볼 수 있습니다.

<p>Learn more about HTML at <a href="https://developer.mozilla.org/en-US/docs/Web/HTML">MDN Web Docs</a>.</p>

3. 이미지 태그

이미지를 페이지에 첨부하고 싶을 때는 <img> 태그를 사용해서 추가할 수 있습니다. 이때 옆에 있는 ‘alt’는 이미지의 속성 값으로 혹시라도 로딩이 오래 걸려 이미지가 늦게 뜨거나 오류 났을 때 알트(alt) 속성에 적어둔 단어로 해당 영역을 확인할 수 있습니다.

<img src="https://images.unsplash.com/photo-1721332154373-17e78d19b4a4?q=80&w=2235&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Game Image">

4. 목록 만들기

제목 아래에 목록<ul> or <ol> 태그를 추가해서 콘텐츠의 내용을 좀 더 깔끔하게 정리할 수 있습니다.

<h3>HTML Basics Include</h3><ul>
    <li>Tags and Elements</li>
    <li>Attributes</li>
    <li>Document Structure</li></ul>

5. 인라인 및 블록

html에는 2개의 유형 요소가 있는데 ‘인라인’, ‘블록’으로 한 줄에 넣는 것이 인라인 요소이며, 전체 너비를 차지하는 블록 요소로 구분되어 있습니다.

인라인 : <a> or <span>
블록 : <div> or <p>

<p>This is a <span style="color:blue;">blue</span> word in a paragraph.</p>

6. 메타태그 넣어주기

모든 페이지의 코드를 다 작성하고 온라인 세상에 오픈하게 될 때 SEO에 맞아야 사이트가 노출이 될 수 있습니다. 그럴 때 반드시 넣어줘야 하는 것이 ‘메타 태그’입니다. 내 사이트를 설명하는 이름표와 같다고 생각하면 됩니다.

<meta name="description" content="A beginner-friendly guide to creating a simple web page using HTML."><meta name="keywords" content="HTML, beginner HTML, web development, first web page">

5단계 – 웹페이지 점검하기

이렇게 다양한 요소와 태그를 넣은 뒤 페이지를 점검해 보면 됩니다. 지금까지 넣었던 코드를 모두 종합하면 아래와 같습니다. 자율적으로 더 추가하거나 내용을 수정하여 자신의 페이지를 만들어 나가면 됩니다.

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>내 첫번째 페이지</title>
    <meta name="description" content="A beginner-friendly guide to creating a simple web page using HTML."></head><body>
    <h1>내 페이지에 온 것을 환영합니다!</h1>
    <p>이것은 간단한 HTML 페이지 예시입니다.</p>
    <h2>About HTML</h2>
    <p>HTML is the standard language for creating webpages. It is easy to learn and highly versatile.</p>
    <p>Learn more about HTML at <a href="https://developer.mozilla.org/en-US/docs/Web/HTML">MDN Web Docs</a>.</p>
    <img src="https://images.unsplash.com/photo-1721332154373-17e78d19b4a4?q=80&w=2235&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Game Image">
    <h3>HTML Basics Include:</h3>
    <ul>
        <li>Tags and Elements</li>
        <li>Attributes</li>
        <li>Document Structure</li>
    </ul></body></html>

초보자를 위한 마무리 팁

처음 HTML 웹 페이지 만들기 코딩 하시는 분들은 코드 내용이 거의 외계어처럼 보이기 때문에 댓글(or 주석) 처리를 해서 개발자 본인이 알아 볼 수 있도록 메모하는 습관을 들이는 것이 좋습니다. 브라우저 자체에는 표시되지 않지만 코드를 만든 사람에게는 보이기 때문에 아주 유용하게 사용할 수 있습니다.

<!-- 이렇게 표시 하거나 -->
// 이렇게 해주면 됩니다

지금까지 설명한 HTML 웹 페이지 만들기 5단계 가이드를 참고하여 필요한 요소와 내용들, 더 나아가 css나 java script 등을 추가해 더욱 풍부하고 완성도 높은 페이지를 만드는 연습을 해보시기 바라겠습니다.

HTML 웹 페이지 제작 FAQ

HTML 웹페이지를 만들기 위해서는 어떤 소프트웨어가 필요한가요?

HTML 웹페이지를 만들려면 텍스트 편집기, 웹 브라우저 2가지만 우선적으로 준비되면 됩니다. 텍스트 편집기는 코드를 짤 수 있는 프로그램이며 웹 브라우저는 작성한 코드를 미리 볼 수 있는 사파리, 크롬 같은 사이트를 의미합니다.

HTML 페이지를 모바일 친화적으로 하려면 어떻게 하나요?

Pc나 모바일 모든 기기에서 보이게 하려면 메타태그 name=”viewport”를 추가해 줍니다.

html 코드가 복잡할 때 어떻게 정리 하나요?

탭(tap)을 활용해 코드들이 맞는 칸에 정리되어 있는지 확인하고 주석을 추가해 어떤 부분인지 메모해 두면 비교적 깔끔하게 관리할 수 있습니다.

초보자를 위한 HTML 웹 페이지 만들기 5단계 가이드