반응형
HTML이란?
- 웹 페이지를 생성하기 위한 표준 마크업 언어
- HTML은 Hyper Text Markup Language의 약자입니다.
- HTML은 웹 페이지를 생성하기 위한 표준 마크업 언어입니다.
- HTML은 웹 페이지의 구조를 설명합니다.
- HTML은 일련의 요소로 구성됩니다.
- HTML 요소는 브라우저에 콘텐츠를 표시하는 방법을 알려줍니다.
- HTML 요소는 "이것은 제목입니다", "이것은 단락입니다", "이것은 링크입니다" 등과 같은 콘텐츠 조각에 레이블을 지정합니다.
HTML5 특징
- 대소문자를 구분하지 않는다. 하지만 W3C는 소문자를 권장한다.
- 새로운 시맨틱 태그:
- HTML5는 의미를 명확히 하기 위해 새로운 시맨틱 태그를 도입했습니다. 예를 들어, <header>, <footer>, <article>, <section>, <nav>, <aside> 등이 있습니다. 이 태그들은 문서의 구조를 더 잘 정의하고, 검색 엔진 최적화(SEO)와 접근성 향상에 도움이 됩니다.
- 비디오 및 오디오 지원:
- HTML5는 <video> 및 <audio> 태그를 도입하여 플래시 플레이어나 외부 플러그인 없이도 멀티미디어 콘텐츠를 직접 웹 페이지에 삽입할 수 있습니다. 이는 크로스 플랫폼 호환성을 높이고, 모바일 장치에서도 원활한 멀티미디어 재생을 가능하게 합니다.
- 그래픽 및 비주얼 요소:
- HTML5는 <canvas> 요소를 통해 스크립트를 사용하여 동적 그래픽을 그릴 수 있습니다. 또한, SVG(Scalable Vector Graphics)를 기본적으로 지원하여 벡터 그래픽을 직접 포함할 수 있습니다.
- 폼 컨트롤의 향상:
- HTML5는 새로운 폼 입력 타입을 추가하여 사용자 입력을 보다 쉽게 검증하고 처리할 수 있게 합니다. 예를 들어, <input type="email">, <input type="url">, <input type="date">, <input type="range"> 등이 있습니다.
- 로컬 데이터 저장소:
- HTML5는 localStorage와 sessionStorage를 통해 클라이언트 측에서 데이터를 저장할 수 있게 합니다. 이는 쿠키보다 많은 데이터를 저장할 수 있으며, 더 안전하고 사용하기 쉽습니다. 또한, IndexedDB를 통해 복잡한 데이터베이스를 클라이언트 측에 저장하고 관리할 수 있습니다.
- 웹 애플리케이션 지원:
- HTML5는 웹 애플리케이션을 지원하기 위한 다양한 API를 제공합니다. 예를 들어, 오프라인 애플리케이션 지원을 위한 Application Cache, 멀티스레딩을 위한 Web Workers, 서버와 클라이언트 간의 실시간 통신을 위한 WebSockets 등이 있습니다.
- 접근성 향상:
- HTML5는 WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) 표준을 지원하여 웹 콘텐츠를 더 쉽게 접근할 수 있도록 합니다. 이는 장애가 있는 사용자들이 웹을 더 잘 이용할 수 있게 합니다.
- 크로스 플랫폼 호환성:
- HTML5는 다양한 디바이스와 브라우저에서 일관된 사용자 경험을 제공하도록 설계되었습니다. 이는 특히 모바일 디바이스와 같은 다양한 환경에서 웹 애플리케이션이 원활하게 동작할 수 있게 합니다.
HTML5 기본 구조
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>문서 제목</title>
<!-- 필요한 CSS 및 메타 정보 -->
</head>
<body>
<!-- 문서의 콘텐츠 -->
</body>
</html>
- <!DOCTYPE html>:
- 문서의 타입을 선언하며, HTML5 문서임을 명시합니다. 이 선언은 브라우저가 문서를 올바르게 렌더링하도록 돕습니다.
- <html lang="ko">:
- 문서의 루트 요소입니다. lang 속성은 문서의 언어를 지정하며, 이 예제에서는 한국어(ko)로 설정되었습니다.
- <head>:
- 문서의 메타데이터를 포함합니다. 이 섹션에는 문서의 제목, 문자 인코딩, 뷰포트 설정, 외부 CSS 파일 링크 등이 포함됩니다.
- <meta charset="UTF-8">:
- 문서의 문자 인코딩을 UTF-8로 설정합니다. UTF-8은 거의 모든 언어의 문자를 지원하므로 일반적으로 사용됩니다.
- <meta name="viewport" content="width=device-width, initial-scale=1.0">:
- 반응형 웹 디자인을 지원하기 위해 뷰포트 설정을 정의합니다. 이 설정은 모바일 장치에서 페이지가 제대로 표시되도록 돕습니다.
- <title>문서 제목</title>:
- 브라우저 탭에 표시되는 문서의 제목을 정의합니다.
- <body>:
- 문서의 실제 콘텐츠를 포함하는 섹션입니다. 웹 페이지의 텍스트, 이미지, 비디오, 링크, 폼 등 모든 콘텐츠가 여기에 포함됩니다.
반응형
'Programming > Html, css' 카테고리의 다른 글
| [Html] HTML 텍스트 형식, 인용문 종류 (Formatting, Quotations) (0) | 2024.06.16 |
|---|---|
| [Html] HTML 속성, HTML 줄바꿈 태그 종류 (0) | 2024.06.16 |
반응형
HTML이란?
- 웹 페이지를 생성하기 위한 표준 마크업 언어
- HTML은 Hyper Text Markup Language의 약자입니다.
- HTML은 웹 페이지를 생성하기 위한 표준 마크업 언어입니다.
- HTML은 웹 페이지의 구조를 설명합니다.
- HTML은 일련의 요소로 구성됩니다.
- HTML 요소는 브라우저에 콘텐츠를 표시하는 방법을 알려줍니다.
- HTML 요소는 "이것은 제목입니다", "이것은 단락입니다", "이것은 링크입니다" 등과 같은 콘텐츠 조각에 레이블을 지정합니다.
HTML5 특징
- 대소문자를 구분하지 않는다. 하지만 W3C는 소문자를 권장한다.
- 새로운 시맨틱 태그:
- HTML5는 의미를 명확히 하기 위해 새로운 시맨틱 태그를 도입했습니다. 예를 들어, <header>, <footer>, <article>, <section>, <nav>, <aside> 등이 있습니다. 이 태그들은 문서의 구조를 더 잘 정의하고, 검색 엔진 최적화(SEO)와 접근성 향상에 도움이 됩니다.
- 비디오 및 오디오 지원:
- HTML5는 <video> 및 <audio> 태그를 도입하여 플래시 플레이어나 외부 플러그인 없이도 멀티미디어 콘텐츠를 직접 웹 페이지에 삽입할 수 있습니다. 이는 크로스 플랫폼 호환성을 높이고, 모바일 장치에서도 원활한 멀티미디어 재생을 가능하게 합니다.
- 그래픽 및 비주얼 요소:
- HTML5는 <canvas> 요소를 통해 스크립트를 사용하여 동적 그래픽을 그릴 수 있습니다. 또한, SVG(Scalable Vector Graphics)를 기본적으로 지원하여 벡터 그래픽을 직접 포함할 수 있습니다.
- 폼 컨트롤의 향상:
- HTML5는 새로운 폼 입력 타입을 추가하여 사용자 입력을 보다 쉽게 검증하고 처리할 수 있게 합니다. 예를 들어, <input type="email">, <input type="url">, <input type="date">, <input type="range"> 등이 있습니다.
- 로컬 데이터 저장소:
- HTML5는 localStorage와 sessionStorage를 통해 클라이언트 측에서 데이터를 저장할 수 있게 합니다. 이는 쿠키보다 많은 데이터를 저장할 수 있으며, 더 안전하고 사용하기 쉽습니다. 또한, IndexedDB를 통해 복잡한 데이터베이스를 클라이언트 측에 저장하고 관리할 수 있습니다.
- 웹 애플리케이션 지원:
- HTML5는 웹 애플리케이션을 지원하기 위한 다양한 API를 제공합니다. 예를 들어, 오프라인 애플리케이션 지원을 위한 Application Cache, 멀티스레딩을 위한 Web Workers, 서버와 클라이언트 간의 실시간 통신을 위한 WebSockets 등이 있습니다.
- 접근성 향상:
- HTML5는 WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) 표준을 지원하여 웹 콘텐츠를 더 쉽게 접근할 수 있도록 합니다. 이는 장애가 있는 사용자들이 웹을 더 잘 이용할 수 있게 합니다.
- 크로스 플랫폼 호환성:
- HTML5는 다양한 디바이스와 브라우저에서 일관된 사용자 경험을 제공하도록 설계되었습니다. 이는 특히 모바일 디바이스와 같은 다양한 환경에서 웹 애플리케이션이 원활하게 동작할 수 있게 합니다.
HTML5 기본 구조
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>문서 제목</title>
<!-- 필요한 CSS 및 메타 정보 -->
</head>
<body>
<!-- 문서의 콘텐츠 -->
</body>
</html>
- <!DOCTYPE html>:
- 문서의 타입을 선언하며, HTML5 문서임을 명시합니다. 이 선언은 브라우저가 문서를 올바르게 렌더링하도록 돕습니다.
- <html lang="ko">:
- 문서의 루트 요소입니다. lang 속성은 문서의 언어를 지정하며, 이 예제에서는 한국어(ko)로 설정되었습니다.
- <head>:
- 문서의 메타데이터를 포함합니다. 이 섹션에는 문서의 제목, 문자 인코딩, 뷰포트 설정, 외부 CSS 파일 링크 등이 포함됩니다.
- <meta charset="UTF-8">:
- 문서의 문자 인코딩을 UTF-8로 설정합니다. UTF-8은 거의 모든 언어의 문자를 지원하므로 일반적으로 사용됩니다.
- <meta name="viewport" content="width=device-width, initial-scale=1.0">:
- 반응형 웹 디자인을 지원하기 위해 뷰포트 설정을 정의합니다. 이 설정은 모바일 장치에서 페이지가 제대로 표시되도록 돕습니다.
- <title>문서 제목</title>:
- 브라우저 탭에 표시되는 문서의 제목을 정의합니다.
- <body>:
- 문서의 실제 콘텐츠를 포함하는 섹션입니다. 웹 페이지의 텍스트, 이미지, 비디오, 링크, 폼 등 모든 콘텐츠가 여기에 포함됩니다.
반응형
'Programming > Html, css' 카테고리의 다른 글
| [Html] HTML 텍스트 형식, 인용문 종류 (Formatting, Quotations) (0) | 2024.06.16 |
|---|---|
| [Html] HTML 속성, HTML 줄바꿈 태그 종류 (0) | 2024.06.16 |
