HTML이란? 웹의 기본 구조를 만드는 언어
프론트엔드를 공부하려면 가장 먼저 HTML(HyperText Markup Language)을 이해해야 합니다. HTML은 웹사이트의 뼈대를 만드는 언어로, 모든 웹페이지는 HTML을 기반으로 구성됩니다.
이 글에서는 HTML의 개념, 기본 문법, 주요 태그, 실전 예제까지 HTML 기초에 대한 모든 정보를 담았습니다. 프론트엔드 개발을 시작하는 분들에게 도움이 되길 바랍니다! 🚀
✅ HTML의 정의
HTML(HyperText Markup Language)은 웹페이지의 구조(Structure)를 정의하는 언어입니다.
✔ 웹 문서를 만들 때 사용하는 마크업 언어
✔ 브라우저가 HTML을 해석하여 화면에 표시
✔ CSS(디자인) & JavaScript(기능)와 함께 웹 개발의 필수 요소
💡 HTML + CSS + JavaScript 관계
- HTML → 웹페이지의 뼈대 (제목, 본문, 이미지, 버튼 등)
- CSS → HTML을 꾸미는 스타일 (색상, 폰트, 레이아웃 등)
- JavaScript → HTML에 기능 추가 (버튼 클릭 이벤트, 애니메이션 등)
2. HTML 기본 구조 (기본 문서 작성법)
모든 HTML 문서는 기본적인 구조를 가지고 있습니다.
✅ HTML 기본 문서 구조
✅ HTML 문서 구성 요소 설명
태그설명
| <!DOCTYPE html> | 문서 유형 선언 (HTML5 문서임을 명시) |
| <html> | HTML 문서의 시작과 끝 |
| <head> | 페이지의 설정 (메타 정보, 제목, 스타일, 스크립트 포함) |
| <meta charset="UTF-8"> | 문자 인코딩 설정 (한글 사용 가능) |
| <title> | 브라우저 탭에 표시될 제목 |
| <body> | 웹페이지의 실제 내용이 들어가는 영역 |
3. HTML의 주요 태그 & 역할 정리
HTML에는 다양한 **태그(Tag)**가 있으며, 각 태그는 특정 역할을 수행합니다.
✅ 1) 제목 태그 (Heading)
웹페이지의 제목을 설정하는 태그로, <h1>부터 <h6>까지 있습니다.
💡 Tip: <h1> 태그는 한 페이지에 한 번만 사용하는 것이 SEO에 좋음!
✅ 2) 문단 태그 (Paragraph & Text Formatting)
💡 Tip: <strong>은 검색엔진에서 중요한 키워드로 인식됨!
✅ 3) 링크 태그 (Hyperlink, <a>)
웹페이지에서 다른 페이지로 이동하는 **링크(Anchor)**를 생성하는 태그입니다.
💡 Tip: target="_blank" 속성을 추가하면 새 탭에서 링크가 열립니다!
✅ 4) 이미지 태그 (<img>)
웹페이지에 이미지를 삽입하는 태그입니다.
💡 Tip: alt 속성은 이미지가 로드되지 않을 때 대체 텍스트를 표시하고, SEO에도 도움됨!
✅ 5) 리스트 태그 (목록 만들기)
- 순서가 없는 리스트 (<ul>)
- 순서가 있는 리스트 (<ol>)
✅ 6) 테이블 태그 (<table>)
HTML에서 표를 만들 때 사용하는 태그입니다.
💡 Tip: border="1"을 설정하면 테두리가 보입니다.
4. HTML 실전 예제 – 간단한 웹페이지 만들기
🔥 결론: HTML은 웹 개발의 첫걸음!
✔ HTML은 웹의 뼈대를 만드는 언어
✔ 기본 구조와 태그를 익히면, CSS & JavaScript와 결합하여 더 강력한 웹사이트 제작 가능
✔ 실습을 통해 직접 코드를 작성하며 익히는 것이 가장 중요!
💡 프론트엔드 개발을 배우고 싶다면?
👉 HTML을 익힌 후 CSS와 JavaScript도 함께 학습해보세요! 🚀
👉 이제 HTML을 활용해서 나만의 웹페이지를 만들어보세요! 🎨💻
'Front_End' 카테고리의 다른 글
| 프론트엔드 CSS 기초 완벽 정리 – 웹 디자인의 시작 (0) | 2025.03.19 |
|---|---|
| 프론트엔드는 무엇인가? – 웹 개발의 시작점 (0) | 2025.02.25 |
| 프론트엔드의 위대한 첫 걸음 (2) | 2025.02.15 |