2025. 2. 28. 15:38ㆍHtml
웹사이트를 만들려면 가장 먼저 배워야 할 것이 HTML입니다.
HTML은 웹 페이지의 뼈대를 만드는 언어이며, 모든 웹사이트는 HTML을 기반으로 구축됩니다.
오늘은 HTML의 개념과 기본 구조, 그리고 웹 개발에서 HTML이 왜 중요한지 알아보겠습니다.
1. HTML이란?
💡 HTML(HyperText Markup Language) 은 웹 문서를 만들기 위한 표준 마크업 언어입니다.
HTML은 웹 페이지의 구조를 정의하는 역할을 하며, 브라우저가 HTML을 해석하여 화면에 표시합니다.
✅ HyperText (하이퍼텍스트) → 문서 간의 링크(연결)를 의미
✅ Markup (마크업) → 문서의 구조를 정의하는 태그 사용
✅ Language (언어) → 컴퓨터가 해석할 수 있는 코드
💡 즉, HTML은 웹 페이지의 구조를 만들고, 링크를 연결하는 역할을 합니다!
2. HTML의 기본 구조
HTML 문서는 <html> 태그로 시작하며, 웹 브라우저는 이를 해석하여 웹 페이지를 렌더링합니다.
📌 HTML 기본 구조 예제
📌 각 태그의 역할
✔ <!DOCTYPE html> → HTML5 문서임을 선언
✔ <html> → 문서의 시작과 끝
✔ <head> → 문서의 메타 정보 (제목, 스타일, 스크립트 포함)
✔ <title> → 웹 페이지 제목 (브라우저 탭에 표시됨)
✔ <body> → 실제 웹 페이지에 보이는 내용
💡 HTML 문서는 반드시 위와 같은 구조를 가져야 합니다.
3. HTML의 주요 태그 & 역할
HTML에서는 다양한 태그가 사용되며, 각 태그는 특정 역할을 합니다.
✅ (1) 텍스트 관련 태그
✔ <h1> ~ <h6> → 제목(Heading) 태그
✔ <p> → 단락(Paragraph) 태그
✔ <b> / <strong> → 글자를 굵게 표시
✔ <i> / <em> → 글자를 기울여 표시
✔ <u> → 밑줄 표시
📌 예제:
💡 제목은 <h1>이 가장 크고, <h6>이 가장 작습니다.
✅ (2) 링크 & 이미지 태그
✔ <a href="URL"> → 다른 웹 페이지로 이동하는 링크
✔ <img src="이미지경로" alt="설명"> → 이미지 삽입
📌 예제:
💡 링크는 반드시 href 속성이 필요하며, 이미지는 src 속성으로 파일 경로를 지정해야 합니다.
✅ (3) 리스트 태그 (목록 만들기)
✔ <ul> → 순서 없는 목록 (● 표시)
✔ <ol> → 순서 있는 목록 (1, 2, 3…)
✔ <li> → 목록 항목
📌 예제:
💡 목록을 만들 때는 <ul> 또는 <ol>을 사용하고, <li>로 항목을 추가합니다.
✅ (4) 표 (Table) 태그
✔ <table> → 표를 생성
✔ <tr> → 표의 행(Row)
✔ <td> → 표의 데이터(Cell)
✔ <th> → 표의 제목(헤더)
📌 예제:
💡 표에서 border="1"을 추가하면 테두리가 보입니다.
✅ (5) 폼 (입력 양식) 태그
✔ <form> → 사용자 입력을 받을 때 사용
✔ <input> → 텍스트 입력
✔ <textarea> → 여러 줄 입력
✔ <button> → 버튼 생성
📌 예제:
💡 label을 사용하면 접근성이 좋아지고, 입력 필드와 연결할 수 있습니다.
4. HTML과 함께 사용되는 기술
HTML은 웹 개발에서 단독으로 사용되지 않고, 다른 기술과 함께 조합됩니다.
✅ CSS (Cascading Style Sheets) → HTML 디자인 & 레이아웃 스타일링
✅ JavaScript → 동적 기능 & 사용자 인터랙션 추가
✅ Bootstrap & Tailwind CSS → 반응형 디자인을 위한 CSS 프레임워크
📌 예제 (HTML + CSS + JavaScript):
💡 HTML은 기본 구조를 만들고, CSS와 JavaScript를 활용하여 더 완성도 높은 웹 페이지를 제작할 수 있습니다.
🚀 마무리: HTML 핵심 정리
✅ HTML은 웹 페이지의 기본 구조를 정의하는 마크업 언어
✅ 태그(tag)를 사용하여 텍스트, 이미지, 링크, 목록, 표 등을 구성
✅ CSS & JavaScript와 함께 사용하면 더 강력한 웹 개발 가능
'Html' 카테고리의 다른 글
| [Html]홈페이지 만들기 (0) | 2021.01.16 |
|---|