코딩이 즐겁다

HTML이란? 본문

HTML

HTML이란?

코즐 2025. 3. 2. 11:09
반응형

 

 

HTML은 웹페이지를 만들 때 반드시 필요한 언어입니다.

  • HTML → 웹페이지의 구조
  • CSS → 디자인과 스타일
  • JavaScript → 동적인 기능

 

 

HTML이란?

HTML(HyperText Markup Language)은 웹페이지를 만드는 기본적인 마크업 언어입니다. 웹사이트의 구조를 정의하고, 브라우저가 텍스트, 이미지, 링크, 동영상 등을 어떻게 표시할지 알려줍니다. 예를 들어, 우리가 웹사이트에서 보는 제목, 문단, 버튼, 이미지 같은 것들은 HTML 코드로 만들어져 있습니다.

 

 

HTML의 핵심 개념

하이퍼텍스트 (HyperText)

  • "HyperText"란 문서 간의 연결(링크)을 의미합니다.
  • 즉, HTML을 사용하면 한 페이지에서 다른 페이지로 이동할 수 있습니다.
  • 예를 들어, <a> 태그를 사용하면 링크를 만들 수 있습니다.

 

마크업 언어 (Markup Language)

  • "마크업 언어"는 문서의 구조를 정의하는 언어입니다.
  • HTML에서는 태그(Tag)를 사용해서 문서의 구조를 나타냅니다.

 

 

HTML의 기본 구조

HTML 문서는 기본적으로 다음과 같은 구조를 가지고 있습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>내 첫 번째 웹페이지</title>
</head>
<body>
    <h1>안녕하세요!</h1>
    <p>이것은 HTML 문서입니다.</p>
    <a href="https://www.example.com">여기를 클릭하세요</a>
</body>
</html>

✔️ 설명:

  • <!DOCTYPE html> → HTML5 문서임을 선언
  • <html> → HTML 문서의 시작
  • <head> → 문서의 정보(메타데이터, 제목, 스타일 등)
  • <title> → 웹페이지 제목 (브라우저 탭에 표시됨)
  • <body> → 실제 화면에 보이는 내용

 

 

HTML의 주요 태그

문서 구조 태그

태그 설명
<html> HTML 문서의 시작과 끝을 나타냄
<head> 문서의 메타정보 (제목, 스타일, 스크립트 등)
<body> 실제 화면에 표시되는 부분

 

텍스트 관련 태그

태그 설명
<h1> ~ <h6> 제목을 나타냄 (h1이 가장 크고 h6이 가장 작음)
<p> 문단(Paragraph)을 정의
<strong> 강조 (굵은 글씨)
<em> 이탤릭(기울임)
<br> 줄 바꿈 (개행)
<hr> 가로선 (구분선)

 

링크 & 이미지 태그

태그 설명
<a href="URL"> 링크(Anchor) 태그
<img src="이미지주소" alt="설명"> 이미지 표시

 

목록 태그

태그 설명
<ul> 순서 없는 리스트 (●, ○, ■)
<ol> 순서 있는 리스트 (1, 2, 3)
<li> 리스트 항목

 

표 (Table) 태그

태그 설명
<table> 표를 정의
<tr> 행(Row)을 정의
<td> 열(Column)을 정의
<th> 제목 셀 (굵게 표시됨)

입력 폼 태그

태그 설명
<form> 사용자 입력을 받는 폼을 정의
<input> 입력 필드 (텍스트, 비밀번호, 체크박스 등)
<button> 버튼 생성
<textarea> 여러 줄 입력 가능

 

HTML 특징

  • 웹의 뼈대 역할 → 디자인(CSS)이나 동작(JS) 없이도 기본적인 웹페이지를 만들 수 있음.
  • 태그 기반의 마크업 언어 → <태그>를 사용하여 구조를 정의.
  • 모든 웹사이트에서 사용됨 → HTML이 없는 웹사이트는 존재할 수 없음!
  • CSS, JavaScript와 함께 사용 → HTML(구조) + CSS(디자인) + JavaScript(동적 기능)

 

반응형
저작자표시 비영리 변경금지

'HTML' 카테고리의 다른 글

HTML <a> 태그 링크 사용법 갓벽 가이드  (16) 2025.03.10
HTML <img> 태그 사용법 갓벽 가이드  (9) 2025.03.06
'HTML' Related Articles more