혹시 인터넷에서 보는 모든 웹사이트가 어떻게 만들어지는지 궁금했던 적 있나요?
네이버, 구글, 유튜브, 그리고 여러분의 카페 페이지까지 —
이 모든 사이트의 시작은 바로 HTML이라는 언어입니다.
HTML은 HyperText Markup Language의 약자로,
쉽게 말해 ‘웹페이지의 뼈대를 만드는 언어’예요.
사람이 말을 할 때 문장 구조가 있듯이,
웹페이지도 HTML이라는 문법을 이용해 구조를 만들어요.
그래서 HTML은 ‘코딩의 첫걸음’이라고 불립니다.
우리가 미국에 가면 영어를 배우듯이 컴퓨터와 대화를 하기 위해서는 무슨 언어를 배워야 할까요?
코딩이란? HTML 이란 무엇인가?
컴퓨터가 이해할 수 있는 프로그래밍 언어를 이용해서 컴퓨터에게 특정 작업을 지시하고 명령을 내리는 행위로,이를 통해 웹사이트, 애플리케이션, 게임 등 다양한 소프트웨어를 만드는 과정입
ilsandaddy.tistory.com
비주얼 스튜디오 코드 다운로드 받기
1. HTML은 왜 필요할까?
컴퓨터는 우리가 보는 예쁜 웹디자인이나 버튼 모양을 그대로 이해하지 못합니다.
그래서 우리는 HTML 태그(tag)라는 약속된 언어로
“이건 제목이야”, “이건 문단이야”, “이건 이미지야” 라고 알려줘야 합니다.
예를 들어, 다음 문장을 웹페이지에 보여주고 싶다고 해볼게요.
안녕 하세요!
제 첫 번째 웹페이지입니다.
이걸 단순히 메모장에 적어서 저장하면,
브라우저는 그냥 ‘텍스트 파일’로만 인식합니다.
하지만 아래처럼 HTML 문법을 써주면,
브라우저는 ‘아! 이건 웹페이지로 보여줘야 하는구나!’ 하고 이해하죠.
2. 태그(Tag)란 무엇일까?
HTML의 기본 단위는 *태그(tag)*입니다.
태그는 < > 기호로 감싸서 사용하고,
대부분의 태그는 열림 태그와 닫힘 태그로 이루어져 있어요.
예를 들어:
- <p> : 문단이 시작됨을 의미
- </p> : 문단이 끝남을 의미
이렇게 시작과 끝을 명확히 표시하는 게 HTML의 기본이에요.
만약 닫힘 태그를 빼먹으면, 화면이 엉뚱하게 보이거나
전체 구조가 깨질 수도 있습니다.
</h1> 태그를 빼먹어서 전체가
3. HTML은 눈에 보이지 않는 구조물
우리가 보는 웹사이트는 세 가지 언어가 함께 작동합니다:
| HTML | 구조(Structure) – 뼈대 만들기 |
| CSS | 디자인(Style) – 색상, 폰트, 레이아웃 |
| JavaScript | 동작(Action) – 버튼 클릭, 애니메이션 등 |
즉, HTML은 집의 기둥과 벽을 세우는 역할이에요.
CSS는 그 벽에 페인트를 칠하고 꾸미는 역할,
JavaScript는 전등을 켜고 문을 여는 역할 즉 동적인 표현 이라고 생각하면 됩니다.
4. 내 첫 HTML 페이지 만들기
이제 직접 만들어볼 차례입니다.
아래 단계를 따라가면 단 2분 만에 나만의 웹페이지를 볼 수 있어요!
메모장 또는 Visual Studio Code를 실행합니다.
아래 코드를 복사해 붙여 넣으세요.
파일을 index.html 이름으로 저장하세요.
저장된 파일을 더블클릭하면 브라우저에서 바로 열립니다!
화면에 “안녕하세요!”라는 글자가 크게 나오고,
그 아래에 문장이 나타난다면 성공이에요.
5. HTML을 배울 때 기억해야 할 3가지
- 닫는 태그를 절대 잊지 말기
→ <p>를 열었다면 반드시 </p>로 닫기! - 들여쓰기(Indentation) 습관 들이기
→ 보기 좋고, 실수를 줄여줍니다. - 브라우저 새로고침으로 결과 확인하기
→ 코드를 수정하면 꼭 저장 후 Ctrl + S!
6. 정리하며 — 당신도 웹 개발의 첫걸음을 떼었습니다
오늘 여러분은 단순히 텍스트를 쓰는 게 아니라,
**브라우저가 이해할 수 있는 언어로 “웹페이지를 만들었다”**는 사실을 배웠어요.
이게 바로 프로그래밍의 시작이자, 웹 세상의 문을 여는 열쇠입니다.
다음 시간에는 HTML의 핵심 개념인 ‘태그(Tag)’를 더 깊이 알아볼 거예요.
제목, 문단, 줄바꿈, 강조 표시 등
실제 블로그나 카페 글을 꾸밀 때도 바로 쓸 수 있는 코드들을 배워볼게요.
'CODING' 카테고리의 다른 글
| [HTML 시리즈 5] 링크(<a>)와 이미지(<img>) 삽입하기 (0) | 2025.10.18 |
|---|---|
| [HTML 시리즈 4] <h1>부터 <p>까지 — 텍스트를 구성하는 방법 (0) | 2025.10.18 |
| [HTML 시리즈 3] 태그(Tag)의 개념과 구조 이해하기 (0) | 2025.10.18 |
| [HTML 시리즈 2] VS Code 설치부터 첫 웹페이지 만들기 (0) | 2025.10.18 |
| 코딩이란? HTML 이란 무엇인가? (1) | 2025.10.12 |
