웹 개발을 시작하려는 여러분이라면 반드시 알아야 할 첫 번째 언어, 바로 HTML입니다. HTML은 우리가 매일 접하는 웹사이트의 뼈대를 구성하는 필수 언어죠. "html 뜻이 뭐지?", "html파일열기 어떻게 하지?"와 같은 질문을 해본 적 있다면, 이 글이 딱 맞습니다. MDN과 W3school을 참고하며 기초부터 실습까지 차근차근 알려드릴게요. 지금부터 웹 개발의 기초를 탄탄히 다져보겠습니다.
HTML이란 무엇인가요?
HTML의 기본 개념
HTML(HyperText Markup Language)은 웹 페이지를 구성하는 마크업 언어입니다. 여기서 '마크업'은 문서의 구조를 설명해주는 역할을 하죠. 즉, 콘텐츠를 꾸미는 것이 아닌 ‘구조화’하는 언어입니다. 브라우저는 HTML 태그를 해석하여 사용자에게 시각적인 웹페이지를 보여줍니다.
HTML은 <h1>, <p>, <a> 같은 태그들로 구성되어 있으며, 이러한 태그를 조합해 웹문서의 골격을 만듭니다. 예를 들어 제목은 <h1>, 문단은 <p>, 링크는 <a>를 사용하죠. 이처럼 태그 하나하나가 중요한 역할을 합니다.
HTML은 CSS와 함께 쓰이면 더욱 아름답고 기능적인 웹사이트를 만들 수 있습니다. 오늘은 그 시작점인 HTML 자체에 집중해볼게요.
| 구분 | 설명 |
| HTML | 웹문서의 구조를 정의하는 마크업 언어 |
| 태그 | <태그이름> 형태로 사용되며 문서 구조를 표현 |
| 마크업 | 텍스트에 의미를 부여하는 표기법 |
HTML 문서의 구조 이해하기
<head>와 <body>의 역할
HTML 문서는 크게 두 부분으로 나뉩니다. 바로 <head>와 <body>입니다. <head>는 문서의 정보(메타데이터)를 담는 부분이고, <body>는 사용자에게 보이는 실제 콘텐츠입니다. <title>, <meta>는 head 안에 위치하며, <h1>, <p>, <img> 등은 body에 들어갑니다.
이 구조를 이해하면 HTML 문서를 구성할 때 어디에 어떤 내용을 넣어야 할지 쉽게 판단할 수 있습니다. 실전에서는 검색 최적화(SEO)나 접근성 측면에서도 중요한 부분이죠.
| 태그 | 설명 |
| <html> | 문서의 시작과 끝 |
| <head> | 문서의 정보 정의 |
| <body> | 사용자에게 보이는 콘텐츠 |
HTML 태그의 종류와 역할
주요 태그 알아보기
HTML에는 다양한 태그들이 존재하며, 각각의 태그는 특정 역할을 합니다. 예를 들어 <ul>과 <li>는 목록을, <a>는 링크를, <img>는 이미지를 표현합니다. 이를 이용해 웹 페이지를 구조화하고 의미를 부여할 수 있습니다.
태그는 여는 태그와 닫는 태그로 이루어져 있으며, 여는 태그는 <태그>, 닫는 태그는 </태그> 형태입니다. 단일 태그(<br>, <img> 등)도 있지만 대부분은 쌍으로 사용됩니다.
태그를 부모-자식 관계로 보기
HTML은 중첩 구조를 가집니다. 즉, 한 태그 안에 다른 태그를 넣는 것이 가능하죠. 이때 바깥 태그는 '부모', 안쪽 태그는 '자식'이라고 부릅니다. <ul> 안에 여러 개의 <li>가 있는 구조는 아주 대표적인 예입니다.
| 태그 | 역할 |
| <h1> ~ <h6> | 제목 태그 |
| <p> | 문단 |
| <a href=""> | 하이퍼링크 |
| <ul>, <li> | 순서 없는 목록 |
실습: 나만의 HTML 문서 만들기
VSCode로 HTML 파일 만들기
웹개발을 할 때 많이 사용하는 툴 중 하나가 VSCode입니다. 이 에디터를 활용하면 쉽게 html파일을 열고 코딩을 시작할 수 있어요. 예제로 Beginner-track 폴더에 beginner.html 파일을 하나 만들어볼게요.
실습하면서 얻는 학습 효과
직접 타이핑하고 실행해보면 문법도 익히고, 결과도 바로 확인할 수 있어서 학습 효과가 극대화됩니다. 단순히 읽는 것보다 훨씬 빠르게 익숙해지게 되죠.
| 작업 | 설명 |
| VSCode | 코드 작성 도구 |
| beginner.html | 연습용 HTML 파일 |
| <h1>, <a>, <ul>, <li> | 실습에서 사용하는 주요 태그 |
HTML 태그와 웹개발 기초 사이트
MDN과 W3school 활용법
HTML을 배우다 보면 "이 태그 뭐였더라?"라는 순간이 오기 마련입니다. 그럴 때 최고의 도우미가 바로 MDN과 W3school입니다.
MDN은 다소 전문적이지만 매우 신뢰할 수 있고, W3school은 실습 예제가 많아 초보자에게 좋습니다. 즐겨찾기 필수!
검색으로 배우는 습관
HTML 태그를 모두 외우는 건 불가능에 가깝습니다. 검색해서 정확한 정보를 찾아보는 것이 더 효율적이죠. 자주 쓰다 보면 자연스럽게 머리에 남게 됩니다.
| 사이트 | 특징 |
| MDN | 공식 문서 중심, 깊이 있는 설명 |
| W3school | 예제 중심, 인터랙티브 실습 가능 |
HTML + CSS = 웹 개발의 기초
CSS란 무엇인가요?
HTML이 구조를 담당한다면, CSS는 디자인을 담당합니다. 색상, 여백, 정렬 등 시각적인 부분을 꾸며주는 것이죠. HTML만으로는 단순한 텍스트 위주의 페이지가 만들어지지만, CSS를 더하면 매력적인 디자인이 완성됩니다.
CSS는 <style> 태그나 별도의 .css 파일로 적용하며, 선택자와 속성으로 구성됩니다. 예를 들어 h1 { color: red; }는 h1 태그를 빨간색으로 꾸며줍니다.
HTML 태그 + CSS = 완성형 웹페이지
HTML이 없으면 아무것도 없고, CSS가 없으면 볼품없습니다. 두 언어는 서로 보완관계에 있으며, 웹개발 기초를 다지려면 함께 학습하는 것이 좋습니다.
| 언어 | 역할 |
| HTML | 구조와 내용 |
| CSS | 시각적 표현 |
| JS (추후학습) | 동적 기능 구현 |
VSCode에서 실시간으로 HTML 확인하기
HTML을 작성할 때, 의도한 대로 화면이 표시되는지 확인하기 위해 자주 브라우저를 열어보는 일이 많습니다. 많은 코드를 수정한 뒤 확인할 때는 괜찮지만, 한두 줄만 고치고 확인하려고 브라우저와 에디터를 반복해서 오가는 건 꽤 번거롭습니다.
이런 문제를 VSCode 내에서 깔끔하게 해결할 수 있는 방법이 있습니다. 바로 Live Preview 확장 기능을 활용하는 것입니다.
🔍 Live Preview란?
Live Preview는 VSCode에서 HTML 파일을 실시간으로 미리 볼 수 있게 해주는 확장 프로그램입니다. 별도의 브라우저를 열지 않아도 VSCode 내부에서 바로 결과를 확인할 수 있어 매우 편리합니다.
🛠️ 설치 방법
- VSCode 실행
- 왼쪽 사이드바에서 확장(Extensions) 아이콘 (네모 4개 아이콘)을 클릭합니다.
- 상단 검색창에 "Live Preview" 를 입력합니다.
- 검색 결과에서 파란색 아이콘이 있는 Live Preview (by Microsoft) 확장을 찾아 [Install] 버튼을 클릭하여 설치합니다.
▶️ 사용 방법
- .html 파일을 엽니다.
- 오른쪽 상단의 사각형 + 돋보기 모양 아이콘 (Live Preview 버튼)을 클릭합니다.
- 화면이 좌우로 나뉘며, 오른쪽 화면에서 실시간으로 HTML 렌더링 결과를 확인할 수 있습니다.
자주하는 질문
Q1. HTML 태그를 꼭 외워야 하나요?
A1. 아니요, 처음부터 외울 필요는 없습니다. 자주 쓰는 태그는 사용하다 보면 자연스럽게 익혀지고, 나머지는 필요할 때 검색하면 됩니다. MDN과 W3school이 큰 도움이 됩니다.
Q2. HTML 파일을 어떻게 열 수 있나요?
A2. 작성한 .html 파일을 웹 브라우저에 드래그하거나, VSCode에서 Live Server 확장 기능을 설치하면 바로 볼 수 있습니다.
Q3. HTML만으로 웹사이트를 만들 수 있나요?
A3. 가능합니다. 하지만 시각적인 요소나 인터랙션이 제한적입니다. CSS와 JavaScript를 함께 사용하면 훨씬 더 완성도 높은 웹사이트를 만들 수 있습니다.
Q4. VSCode 말고 다른 HTML 에디터는 없나요?
A4. 있습니다. Sublime Text, Atom, Brackets 등 다양한 코드 에디터가 있습니다. 그러나 VSCode는 현재 가장 인기 있고 확장 기능이 뛰어나 많이 사용됩니다.
Q5. HTML은 앞으로도 계속 사용될까요?
A5. 네. HTML은 웹의 핵심 언어이며, 계속해서 발전하고 있습니다. 최신 HTML5 표준도 활발히 사용되고 있어, 앞으로도 웹 개발의 중심에 있을 것입니다.
이제 여러분도 HTML의 기초를 충분히 이해하셨을 거예요. 오늘의 실습을 꼭 따라해보고, MDN과 W3school로 HTML 태그들을 차근차근 익혀보세요! 웹 개발의 길이 한층 더 친숙해질 겁니다.
'창업' 카테고리의 다른 글
| CSS란 무엇인가? 웹 문서를 디자인하는 기초부터 실습까지 (2) | 2025.08.01 |
|---|---|
| Git과 GitHub 설치 및 사용법: 협업 개발 도구 툴의 초록빛 잔디 심기 (3) | 2025.07.30 |
| 네트워크 개발자를 위한 CLI 터미널 명령어 기초 정리 (1) | 2025.07.09 |
| 내일배움카드 HRD 활용한 풀스택 개발자 과정 : VSCode 설치 (0) | 2025.07.08 |
| SNS 셀러를 위한 수수료 0% 판매 플랫폼 마케팅 전략 (0) | 2025.07.07 |
