웹 개발을 처음 시작할 때 가장 먼저 배우는 것이 바로 HTML입니다. HTML은 웹페이지의 뼈대를 구성하는 언어로, 마치 집의 설계도와도 같습니다. 이번 글에서는 HTML 기초 문법부터 실전 작성법까지 입문자에게 꼭 필요한 내용을 차근차근 정리해 드리겠습니다.
HTML이란?
HTML(HyperText Markup Language)은 웹페이지를 만들기 위한 마크업 언어입니다. 일반적인 프로그래밍 언어와는 달리, 로직보다는 구조와 의미를 표현하는 데 중점을 둡니다.
📌 전문가 TIP: HTML은 단독으로는 아무런 디자인 효과나 동작이 없으며, CSS와 JavaScript와 함께 사용할 때 비로소 완성도 있는 웹페이지를 만들 수 있습니다.
필수 HTML 구조 익히기
모든 HTML 문서는 아래와 같은 기본 구조로 구성됩니다:
“`html
안녕하세요!
이것이 바로 HTML입니다.
“`
각 요소의 역할은 다음과 같습니다:
: HTML5 문서임을 선언: HTML 전체 영역: 웹페이지 설정 영역 (제목, 문자셋 등): 사용자에게 보이는 내용
자주 쓰이는 HTML 태그 모음
| 태그 | 기능 |
|——|——|
|
~
|
| 문단 |
| | 링크 |
|
|
-
| 리스트 항목 ||- 태그는 열고 닫는 구조를 지켜야 합니다. 예:
내용 -
- 속성은 항상 쌍따옴표로 묶기:
링크 - 들여쓰기와 라인 정리는 가독성을 위해 필수
HTML 실습 예제: 나만의 소개 페이지 만들기
간단한 자기소개 페이지를 만들어 보겠습니다:
“`html
안녕하세요, 김지훈입니다!
웹 퍼블리셔로 8년째 일하고 있어요.
“`
🧩 이미지 최적화 팁: 이미지 용량을 200KB 이하로 줄이고,
.webp확장자를 사용하는 것이 페이지 로딩 속도 개선에 도움이 됩니다.
HTML 배우기 좋은 추천 사이트
마무리: HTML, 어렵지 않아요!
HTML은 처음에는 생소할 수 있지만, 조금씩 따라 해보면 금방 익숙해집니다. 오늘 알려드린 기초 구조와 태그를 중심으로 자신만의 실습 파일을 하나씩 만들어 보세요.
웹 개발의 첫걸음을 HTML과 함께 내딛어 보세요!
🔎 다음 포스팅 주제 추천
→ 2번: 하루 10분으로 배우는 CSS 기초 문법
→ 6번: 나만의 포트폴리오 웹사이트 만들기
참고자료
- https://developer.mozilla.org/ko/docs/Web/HTML
- https://www.w3schools.com/html/
- 속성은 항상 쌍따옴표로 묶기: