HTML이란? 웹페이지의 뼈대를 만드는 가장 기본적인 언어

HTML이 웹페이지의 구조를 만드는 방식과 태그의 역할을 이해하고, 간단한 HTML 화면을 AI에게 요청할 수 있습니다.

UI & WEB 첫 강의 · 완전 초보자용

웹서비스를 만들다 보면 가장 먼저 HTML이라는 단어를 만나게 됩니다. “HTML을 알아야 홈페이지를 만들 수 있다”는 말을 들어본 적은 있어도, 실제로 HTML이 무엇을 하는지는 막연할 수 있습니다.

HTML은 웹페이지에서 제목이 무엇인지, 문단이 어디에 있는지, 버튼과 이미지가 어디에 놓이는지 같은 기본 구조를 표시하는 언어입니다. 처음에는 문법을 외우기보다 “웹페이지의 뼈대를 적는 방식”이라고 이해하면 충분합니다.

오늘의 목표

사람의 몸을 생각해보면 뼈대가 있고 그 위에 피부와 옷이 있습니다. 웹페이지도 비슷합니다. HTML이 먼저 제목, 문장, 이미지, 버튼 같은 구조를 만들고, CSS가 그 위에 색과 크기, 위치 같은 디자인을 입힙니다.

그래서 HTML만 있는 페이지는 다소 밋밋해 보일 수 있지만, 어떤 내용이 제목이고 어떤 내용이 본문인지 브라우저가 이해할 수 있습니다.

HTML에서는 꺾쇠 괄호 안에 이름을 적은 “태그”를 사용합니다. 예를 들어 <h1>은 큰 제목, <p>는 문단, <a>는 링크를 나타냅니다. 초보자는 태그를 “이 내용이 어떤 역할인지 붙여주는 이름표”라고 생각하면 쉽습니다.

지금 단계에서는 수십 개 태그를 외울 필요가 없습니다. 제목, 문단, 링크, 이미지, 버튼처럼 자주 보는 몇 가지만 알고 나머지는 필요할 때 AI에게 물어보면 됩니다.

HTML의 장점은 아주 간단한 예제라면 별도의 복잡한 개발 도구 없이도 확인할 수 있다는 점입니다. 메모장 같은 편집기에 HTML 코드를 저장하고 파일 확장자를 .html로 만든 뒤 브라우저에서 열면 화면을 볼 수 있습니다.

이 과정은 초보자가 웹개발의 첫 성공 경험을 만들기에 좋습니다. “코드 한 줄을 바꾸면 화면이 바뀐다”는 것을 바로 확인할 수 있기 때문입니다.

예를 들어 “코딩을 처음 배우는 사람입니다. 제목, 짧은 소개 문장, 버튼 하나가 있는 아주 간단한 HTML 파일을 만들어주고, 각 줄이 무슨 역할인지 설명해줘”라고 요청할 수 있습니다.

여기서 중요한 것은 완성된 코드를 받는 것보다 각 줄의 역할을 같이 설명해 달라고 하는 것입니다. 그래야 나중에 문구나 버튼 이름을 직접 수정할 수 있습니다.

MathGenix의 화면에도 학년 선택, 문제 생성 버튼, 결과 영역처럼 서로 다른 역할의 요소가 있습니다. 디자인이 아무리 달라져도 먼저 “어떤 정보와 기능을 어디에 둘 것인가”라는 구조가 필요합니다. HTML은 바로 그 구조를 표현하는 출발점입니다.

HTML만으로도 페이지는 만들 수 있지만, 글자 크기와 색상, 카드 모양, 간격, 모바일 화면 같은 디자인을 세밀하게 만들기에는 부족합니다. 다음 강의에서 배우는 CSS가 이 역할을 합니다.

HTML은 웹페이지를 예쁘게 만드는 도구가 아니라, 무엇이 어디에 있는지 정해주는 뼈대입니다.

STEP 009 — CSS란? 글자와 버튼, 화면에 디자인을 입히는 방법