HTML: 두 판 사이의 차이

기술노트
편집 요약 없음
편집 요약 없음
 
9번째 줄: 9번째 줄:
* "Markup Language"는 문서의 구조를 설명하는 태그(명령어) 언어를 뜻합니다.
* "Markup Language"는 문서의 구조를 설명하는 태그(명령어) 언어를 뜻합니다.


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


== HTML의 주요 특징 ==
== HTML의 주요 특징 ==
39번째 줄: 39번째 줄:
! 구역 !! 설명
! 구역 !! 설명
|-
|-
| <!DOCTYPE html> || 이 문서가 HTML5 문서임을 선언
| <code>&lt;!DOCTYPE html&gt;</code> || 이 문서가 HTML5 문서임을 선언
|-
|-
| <html> ~ </html> || HTML 문서 전체를 감싸는 태그
| <code>&lt;html&gt; ~ &lt;/html&gt;</code> || HTML 문서 전체를 감싸는 태그
|-
|-
| <head> ~ </head> || 문서 정보를 담는 부분 (제목, 문자셋 등)
| <code>&lt;head&gt; ~ &lt;/head&gt;</code> || 문서 정보를 담는 부분 (제목, 문자셋 등)
|-
|-
| <body> ~ </body> || 실제 웹 페이지에 보이는 내용 (본문)
| <code>&lt;body&gt; ~ &lt;/body&gt;</code> || 실제 웹 페이지에 보이는 내용 (본문)
|}
|}


51번째 줄: 51번째 줄:


=== 요소(Element) ===
=== 요소(Element) ===
* HTML 요소는 '''<태그>내용</태그>''' 형태를 가집니다.
 
* HTML 요소는 '''&lt;태그&gt;내용&lt;/태그&gt;''' 형태를 가집니다.
* 예시:
* 예시:
<syntaxhighlight lang="html">
<syntaxhighlight lang="html">
58번째 줄: 59번째 줄:


=== 속성(Attribute) ===
=== 속성(Attribute) ===
* HTML 태그 안에 추가 정보를 제공하는 설정입니다.
* HTML 태그 안에 추가 정보를 제공하는 설정입니다.
* 항상 **이름="값"** 형태를 가집니다.
* 항상 '''이름="값"''' 형태를 가집니다.
* 예시:
* 예시:
<syntaxhighlight lang="html">
<syntaxhighlight lang="html">
<a href="https://www.example.com">이동하기</a>
<a href="https://www.example.com">이동하기</a>
</syntaxhighlight>
</syntaxhighlight>
→ 링크를 클릭하면 'https://www.example.com'으로 이동합니다.
→ 링크를 클릭하면 'https://www.example.com'으로 이동합니다.


71번째 줄: 74번째 줄:
! 태그 !! 설명 !! 예시
! 태그 !! 설명 !! 예시
|-
|-
| <h1> ~ <h6> || 제목(Heading) 태그 || <h1>제목</h1>
| <code>&lt;h1&gt; ~ &lt;h6&gt;</code> || 제목(Heading) 태그 || <code>&lt;h1&gt;제목&lt;/h1&gt;</code>
|-
|-
| <p> || 문단(Paragraph) 태그 || <p>문단 내용</p>
| <code>&lt;p&gt;</code> || 문단(Paragraph) 태그 || <code>&lt;p&gt;문단 내용&lt;/p&gt;</code>
|-
|-
| <a> || 하이퍼링크 태그 || <a href="url">링크</a>
| <code>&lt;a&gt;</code> || 하이퍼링크 태그 || <code>&lt;a href="url"&gt;링크&lt;/a&gt;</code>
|-
|-
| <img> || 이미지 삽입 태그 || <img src="이미지주소" alt="설명">
| <code>&lt;img&gt;</code> || 이미지 삽입 태그 || <code>&lt;img src="이미지주소" alt="설명"&gt;</code>
|-
|-
| <ul>, <ol>, <li> || 리스트(목록) 태그 || <ul><li>아이템</li></ul>
| <code>&lt;ul&gt;</code>, <code>&lt;ol&gt;</code>, <code>&lt;li&gt;</code> || 리스트(목록) 태그 || <code>&lt;ul&gt;&lt;li&gt;아이템&lt;/li&gt;&lt;/ul&gt;</code>
|-
|-
| <table> || 표(Table) 생성 태그 || <table><tr><td>내용</td></tr></table>
| <code>&lt;table&gt;</code> || 표(Table) 생성 태그 || <code>&lt;table&gt;&lt;tr&gt;&lt;td&gt;내용&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;</code>
|-
|-
| <div> || 구역(Grouping) 태그 (block) || <div>내용</div>
| <code>&lt;div&gt;</code> || 구역(Grouping) 태그 (block) || <code>&lt;div&gt;내용&lt;/div&gt;</code>
|-
|-
| <span> || 구역 태그 (inline) || <span>짧은 내용</span>
| <code>&lt;span&gt;</code> || 구역 태그 (inline) || <code>&lt;span&gt;짧은 내용&lt;/span&gt;</code>
|}
|}


93번째 줄: 96번째 줄:


* '''의미론적 태그(Semantic tags)'''
* '''의미론적 태그(Semantic tags)'''
   * 예: <header>, <footer>, <article>, <section>   
   * 예: <code>&lt;header&gt;</code>, <code>&lt;footer&gt;</code>, <code>&lt;article&gt;</code>, <code>&lt;section&gt;</code>   
   → 웹 페이지 구조를 명확하게 표현할 수 있도록 도와줍니다.
   → 웹 페이지 구조를 명확하게 표현할 수 있도록 도와줍니다.


* '''멀티미디어 지원'''
* '''멀티미디어 지원'''
   * 예: <audio>, <video>   
   * 예: <code>&lt;audio&gt;</code>, <code>&lt;video&gt;</code>   
   → 플러그인 없이 직접 오디오/비디오 삽입 가능
   → 플러그인 없이 오디오/비디오 재생 가능


* '''향상된 폼 기능'''
* '''향상된 폼 기능'''
   * 입력 유형 추가 (email, date, number 등)
   * 입력 유형 추가 (email, date, number 등)
   * 자동 완성, 필수 입력 지정 등 기능 강화
   * 자동 완성, 필수 입력 지정 기능 강화


* '''캔버스(Canvas)와 SVG 지원'''
* '''캔버스(Canvas)와 SVG 지원'''
   * <canvas> 태그를 통해 그래픽 그리기 가능
   * <code>&lt;canvas&gt;</code>를 통해 그래픽을 직접 그릴 수 있음


* '''로컬 저장소(LocalStorage, SessionStorage)'''
* '''로컬 저장소(LocalStorage, SessionStorage)'''
   * 웹 브라우저 안에 데이터를 저장할 수 있게 함 (쿠키보다 안전하고 빠름)
   * 사용자의 데이터를 브라우저 안에 저장 (쿠키보다 빠르고 안전)


== HTML과 함께 사용하는 기술 ==
== HTML과 함께 사용하는 기술 ==


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


== 요약 ==
== 요약 ==


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


== 학습 자료 ==
== 학습 자료 ==
* [https://developer.mozilla.org/ko/docs/Web/HTML MDN Web Docs - HTML]
* [https://developer.mozilla.org/ko/docs/Web/HTML MDN Web Docs - HTML]
* [https://www.w3schools.com/html/ W3Schools HTML Tutorial]
* [https://www.w3schools.com/html/ W3Schools HTML Tutorial]
130번째 줄: 134번째 줄:


== 다음 학습 단계 ==
== 다음 학습 단계 ==
* [[CSS 기초|CSS 기초]]: 웹 페이지에 스타일 입히기
 
* [[JavaScript 기초|JavaScript 기초]]: 웹 페이지에 동적 기능 추가하기
* [[CSS 기초|CSS 기초]]: 웹 페이지에 스타일 적용 배우기
* [[JavaScript 기초|JavaScript 기초]]: 웹 페이지에 기능 추가 배우기
* [[HTML 고급|HTML 고급]]: 폼, 멀티미디어, API 활용 배우기
* [[HTML 고급|HTML 고급]]: 폼, 멀티미디어, API 활용 배우기


2025년 4월 26일 (토) 13:13 기준 최신판

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 태그

태그 설명 예시
<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://technote.wiki/index.php?title=HTML&oldid=622"