HTML: 두 판 사이의 차이

기술노트
(새 문서: HTML(Hypertext Markup Language)은 웹 페이지 및 웹 애플리케이션을 만드는 데 사용되는 표준 마크업 언어입니다. 문서의 레이아웃과 콘텐츠를 정의하는 요소와 속성 시스템을 사용하여 World Wide Web의 콘텐츠에 대한 구조를 제공합니다. HTML 요소는 브라우저가 웹 페이지의 시각적 및 청각적 요소를 렌더링하기 위해 해석하는 태그로 표시됩니다. 언어는 HTML5가 현재 표준이...)
 
편집 요약 없음
1번째 줄: 1번째 줄:
HTML(Hypertext Markup Language)은 웹 페이지 및 웹 애플리케이션을 만드는 데 사용되는 표준 마크업 언어입니다. 문서의 레이아웃과 콘텐츠를 정의하는 요소와 속성 시스템을 사용하여 World Wide Web의 콘텐츠에 대한 구조를 제공합니다. HTML 요소는 브라우저가 웹 페이지의 시각적 및 청각적 요소를 렌더링하기 위해 해석하는 태그로 표시됩니다. 언어는 HTML5가 현재 표준이 되어 의미론적 요소, 향상된 멀티미디어 지원 및 향상된 양식 제어를 도입하는 등 여러 버전을 통해 발전해 왔습니다. HTML은 스타일 지정을 위한 CSS와 상호 작용을 위한 JavaScript와 함께 작동하여 현대 웹 개발의 기초를 형성합니다.
= HTML 기초 =
 
'''HTML(HyperText Markup Language)'''은 웹 페이지의 '''구조'''를 만드는 언어입니다. 우리가 인터넷에서 보는 모든 웹사이트는 기본적으로 HTML을 기반으로 만들어졌습니다.
 
== HTML이란 무엇인가? ==
 
* HTML은 "HyperText Markup Language"의 약자입니다.
* "HyperText"는 링크를 통해 문서 간 연결이 가능하다는 의미입니다.
* "Markup Language"는 문서의 구조를 설명하는 태그(명령어) 언어를 뜻합니다.
 
즉, HTML은 **"웹 페이지의 구조를 정의하는 언어"** 입니다.
 
== HTML의 주요 특징 ==
 
* 웹 페이지의 텍스트, 이미지, 버튼, 링크 등 모든 요소를 정의합니다.
* 웹 브라우저(Chrome, Safari, Edge 등)는 HTML 문서를 읽어 화면에 보여줍니다.
* HTML은 단독으로 동작할 수 있지만, CSS, JavaScript와 함께 사용하여 디자인과 기능을 추가합니다.
* 최신 버전은 '''HTML5'''입니다.
 
== HTML의 기본 구조 ==
 
HTML 문서는 다음과 같은 기본 틀을 가집니다.
 
<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>나의 첫 번째 웹 페이지</title>
</head>
<body>
  <h1>안녕하세요!</h1>
  <p>웹 페이지를 처음 만들어 봅니다.</p>
</body>
</html>
</syntaxhighlight>
 
{| class="wikitable"
! 구역 !! 설명
|-
| <!DOCTYPE html> || 이 문서가 HTML5 문서임을 선언
|-
| <html> ~ </html> || HTML 문서 전체를 감싸는 태그
|-
| <head> ~ </head> || 문서 정보를 담는 부분 (제목, 문자셋 등)
|-
| <body> ~ </body> || 실제 웹 페이지에 보이는 내용 (본문)
|}
 
== HTML 요소(Element)와 속성(Attribute) ==
 
=== 요소(Element) ===
* HTML 요소는 '''<태그>내용</태그>''' 형태를 가집니다.
* 예시:
<syntaxhighlight lang="html">
<p>여기는 단락입니다.</p>
</syntaxhighlight>
 
=== 속성(Attribute) ===
* HTML 태그 안에 추가 정보를 제공하는 설정입니다.
* 항상 **이름="값"** 형태를 가집니다.
* 예시:
<syntaxhighlight lang="html">
<a href="https://www.example.com">이동하기</a>
</syntaxhighlight>
→ 링크를 클릭하면 'https://www.example.com'으로 이동합니다.
 
== 주요 HTML 태그 ==
 
{| class="wikitable"
! 태그 !! 설명 !! 예시
|-
| <h1> ~ <h6> || 제목(Heading) 태그 || <h1>제목</h1>
|-
| <p> || 문단(Paragraph) 태그 || <p>문단 내용</p>
|-
| <a> || 하이퍼링크 태그 || <a href="url">링크</a>
|-
| <img> || 이미지 삽입 태그 || <img src="이미지주소" alt="설명">
|-
| <ul>, <ol>, <li> || 리스트(목록) 태그 || <ul><li>아이템</li></ul>
|-
| <table> || 표(Table) 생성 태그 || <table><tr><td>내용</td></tr></table>
|-
| <div> || 구역(Grouping) 태그 (block) || <div>내용</div>
|-
| <span> || 구역 태그 (inline) || <span>짧은 내용</span>
|}
 
== HTML5의 주요 추가 기능 ==
 
HTML5는 기존 HTML보다 더 많은 기능을 제공합니다:
 
* '''의미론적 태그(Semantic tags)'''
  * 예: <header>, <footer>, <article>, <section> 
  → 웹 페이지 구조를 명확하게 표현할 수 있도록 도와줍니다.
 
* '''멀티미디어 지원'''
  * 예: <audio>, <video> 
  → 플러그인 없이 직접 오디오/비디오 삽입 가능
 
* '''향상된 폼 기능'''
  * 입력 유형 추가 (email, date, number 등)
  * 자동 완성, 필수 입력 지정 등 기능 강화
 
* '''캔버스(Canvas)와 SVG 지원'''
  * <canvas> 태그를 통해 그래픽 그리기 가능
 
* '''로컬 저장소(LocalStorage, SessionStorage)'''
  * 웹 브라우저 안에 데이터를 저장할 수 있게 함 (쿠키보다 안전하고 빠름)
 
== HTML과 함께 사용하는 기술 ==
 
* '''CSS''' (Cascading Style Sheets)
  * HTML 요소의 디자인(색, 크기, 배경 등)을 담당합니다.
* '''JavaScript'''
  * 웹 페이지에 동적인 기능(버튼 클릭, 알림창, 애니메이션 등)을 추가합니다.
 
== 요약 ==
 
* HTML은 웹 페이지의 '''뼈대'''를 만든다.
* HTML은 '''태그'''로 구성되며, 각 태그는 브라우저에게 '''무엇을 표시해야 하는지''' 알려준다.
* HTML5는 최신 표준이며, 다양한 기능과 성능 향상을 제공한다.
* CSS와 JavaScript를 함께 사용하면 더욱 멋지고, 동적인 웹사이트를 만들 수 있다.
 
== 학습 자료 ==
* [https://developer.mozilla.org/ko/docs/Web/HTML MDN Web Docs - HTML]
* [https://www.w3schools.com/html/ W3Schools HTML Tutorial]
* [https://htmlreference.io/ HTML Reference]
 
== 다음 학습 단계 ==
* [[CSS 기초|CSS 기초]]: 웹 페이지에 스타일 입히기
* [[JavaScript 기초|JavaScript 기초]]: 웹 페이지에 동적 기능 추가하기
* [[HTML 고급|HTML 고급]]: 폼, 멀티미디어, API 활용 배우기
 
[[분류:웹 개발]]
[[분류:프론트엔드]]
[[분류:HTML]]

2025년 4월 26일 (토) 13:09 판

HTML 기초

HTML(HyperText Markup Language)은 웹 페이지의 구조를 만드는 언어입니다. 우리가 인터넷에서 보는 모든 웹사이트는 기본적으로 HTML을 기반으로 만들어졌습니다.

HTML이란 무엇인가?

  • HTML은 "HyperText Markup Language"의 약자입니다.
  • "HyperText"는 링크를 통해 문서 간 연결이 가능하다는 의미입니다.
  • "Markup Language"는 문서의 구조를 설명하는 태그(명령어) 언어를 뜻합니다.

즉, HTML은 **"웹 페이지의 구조를 정의하는 언어"** 입니다.

HTML의 주요 특징

  • 웹 페이지의 텍스트, 이미지, 버튼, 링크 등 모든 요소를 정의합니다.
  • 웹 브라우저(Chrome, Safari, Edge 등)는 HTML 문서를 읽어 화면에 보여줍니다.
  • HTML은 단독으로 동작할 수 있지만, CSS, JavaScript와 함께 사용하여 디자인과 기능을 추가합니다.
  • 최신 버전은 HTML5입니다.

HTML의 기본 구조

HTML 문서는 다음과 같은 기본 틀을 가집니다. 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>나의 첫 번째 웹 페이지</title>
</head>
<body>
  <h1>안녕하세요!</h1>
  <p>웹 페이지를 처음 만들어 봅니다.</p>
</body>
</html>
구역 설명
<!DOCTYPE html> 이 문서가 HTML5 문서임을 선언
<html> ~ </html> HTML 문서 전체를 감싸는 태그
<head> ~ </head> 문서 정보를 담는 부분 (제목, 문자셋 등)
<body> ~ </body> 실제 웹 페이지에 보이는 내용 (본문)

HTML 요소(Element)와 속성(Attribute)

요소(Element)

  • HTML 요소는 <태그>내용</태그> 형태를 가집니다.
  • 예시:
<p>여기는 단락입니다.</p>

속성(Attribute)

  • HTML 태그 안에 추가 정보를 제공하는 설정입니다.
  • 항상 **이름="값"** 형태를 가집니다.
  • 예시:
<a href="https://www.example.com">이동하기</a>

→ 링크를 클릭하면 'https://www.example.com'으로 이동합니다.

주요 HTML 태그

태그 설명 예시

~

제목(Heading) 태그

제목

 문단(Paragraph) 태그

문단 내용

<a> 하이퍼링크 태그 <a href="url">링크</a>
<img> 이미지 삽입 태그 <img src="이미지주소" alt="설명">
    ,
      ,
리스트(목록) 태그
  • 아이템
표(Table) 생성 태그
내용
 구역(Grouping) 태그 (block)
내용
구역 태그 (inline) 짧은 내용

HTML5의 주요 추가 기능

HTML5는 기존 HTML보다 더 많은 기능을 제공합니다:

  • 의미론적 태그(Semantic tags)
 * 예: <header>, <footer>, <article>, <section>  
 → 웹 페이지 구조를 명확하게 표현할 수 있도록 도와줍니다.
  • 멀티미디어 지원
 * 예: <audio>, <video>  
 → 플러그인 없이 직접 오디오/비디오 삽입 가능
  • 향상된 폼 기능
 * 입력 유형 추가 (email, date, number 등)
 * 자동 완성, 필수 입력 지정 등 기능 강화
  • 캔버스(Canvas)와 SVG 지원
 * <canvas> 태그를 통해 그래픽 그리기 가능
  • 로컬 저장소(LocalStorage, SessionStorage)
 * 웹 브라우저 안에 데이터를 저장할 수 있게 함 (쿠키보다 안전하고 빠름)

HTML과 함께 사용하는 기술

  • CSS (Cascading Style Sheets)
 * HTML 요소의 디자인(색, 크기, 배경 등)을 담당합니다.
  • JavaScript
 * 웹 페이지에 동적인 기능(버튼 클릭, 알림창, 애니메이션 등)을 추가합니다.

요약

  • HTML은 웹 페이지의 뼈대를 만든다.
  • HTML은 태그로 구성되며, 각 태그는 브라우저에게 무엇을 표시해야 하는지 알려준다.
  • HTML5는 최신 표준이며, 다양한 기능과 성능 향상을 제공한다.
  • CSS와 JavaScript를 함께 사용하면 더욱 멋지고, 동적인 웹사이트를 만들 수 있다.

학습 자료

다음 학습 단계

원본 주소 "https://technote.wiki/index.php?title=HTML&oldid=621"