연습장
2. HTML5 본문
HTML 은 웹페이지를 기술하기 위한 마크업 언어이다.
웹 페이지의 내용(content) 와 구조(structure) 를 담당하는 언어로써 HTML 태그를 통해 정보를 구조화하는 것
HTML5 는 2014년 10월 28일 확정된 차세대 웹 표준으로 기능 추가
1. 멀티미디어 (Multimedia)
- 플래시와 같은 플러그인의 도움 없이 비디오 및 오디오 기능을 자체적으로 지원한다
2. 그래픽
- SVG, 캔버스를 사용한 2차원 그래픽과 CSS3, WebGL 을 사용한 3차원 그래픽을 지원한다
3. 통신
- 지금까지의 HTML 은 단방향 통신만 가능하였으나 HTML5 는 서버와의 소켓 통신을 지원하여 양방향 통신이 가능하다.
4. 디바이스 접근
- 카메라, 동작센서 등의 하드웨어 기능을 직접적으로 제어할 수 있다.
5. 오프라인 및 저장소
- 오프라인 상태에서도 애플리케이션을 동작시킬 수 있다. 이는 HTML5가 플랫폼으로서 사용될 수 있음을 의미 한다.
6. 시맨틱 태그
- HTML 요소의 의미를 명확히 설명하는 시맨틱 태그를 도입하여 브라우저, 검색엔진, 개발자 모두에게 컨텐츠의 의미를 명확히 설명할 수 있다. 이를 통해 HTML 요소의 의미를 명확히 해석하고 그 데이터를 활용할 수 있는 시맨틱 웹을 실현할 수 있다.
7. CSS3
- HTML5 는 CSS3 를 완벽하게 지원한다.
- HTML5 문서는 반드시 <!DOCTYPE html> 으로 시작하여 문서 형식을 HTML5 로 지정한다.
- 실제적인 HTML document 은 2행부터이며 <html> </html> 태그 사이에 기술한다.
- <head> </head> 사이에는 title , 외부파일의 참조, 메타데이터의 설정 등이 위치하며 이 정보는 브라우저에 표시되지 않는다.
- 웹 브라우저에 출력되는 모든 요소는 <body> 와 </body> 사이에 위치한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> hello word </title>
</head>
<body>
<h1> hello world</h1>
<p> 안녕! HTML5 </p>
</body>
</html>
HTML doucment 는 .html 확장자를 갖는 순수한 텍스트 파일이다. 따라서 메모장등으로 편집이 가능하며 일반적으로는 IDE (Integrated Development Environment ) 를 사용하는것이 일반적이다.
vscode , webStrom, Atom, Brackets, Sublime text
HTML 요소 (element) 는 시작 태그와 종료 태그 그리고 태그 사이에 위치한 content 로 구성된다.
<p> Hello </p>
HTML document 는 요소들의 집합으로 이루어진다.
태그는 대소문자를 구별하지 않으나 소문자를 추천한다.
요소의 중첩
요소는 중첩될 수 있다. 요소는 다른 요소를 포함할 수 있다. 이때 부모 자식 관계가 성립한다.
html 요소는 웹페이지를 구성하는 모든 요소들을 포함한다.
중첩 관계를 시각적으로 파악하기 쉽게 들여쓰기(indent) 를 활용한다.
빈 요소
content 를 가질 수 없는 요소를 빈 요소라 한다. Attribute 만 가질 수 있다.
br
hr
img
input
link
meta
어트리뷰트 Attribute
어트리뷰트란 속성, 요소의 성질 특징을 정의하는 명세이다. 요소는 어트리뷰트를 가질 수 있으며 어트리뷰트는 요소에 추가적인 정보를 제공한다. 시작태그에 위치하며 이름과 값의 쌍을 이룬다.
<img src = "html.png" >
글로벌 어트리뷰트
모든 HTML 요소가 공통으로 사용할 수 있는 어트리뷰트이다. 몇몇 요소에는 적용되지 않을 수 있다.
id : 유일한 식별자를 요소에 지정한다. 중복 지정이 불가하다.
class : 스타일 시트에 정의된 class를 요소에 지정한다. 중복 지정이 가능하다.
hidden : css 의 hidden 과는 다르게 의미상으로도 브라우저에 노출되지 않게 된다.
lang : 지정된 요소의 언어를 지정한다. 검색엔진의 크롤링 시 웹페이지의 언어를 인식할 수 있게 한다.
style : 요소에 인라인 스타일을 지정한다.
tabindex : 사용자가 키보드로 페이지를 내비게인션 시 이동 순서를 지정한다.
title : 요소에 관한 제목을 지정한다.
https://www.w3.org/TR/2010/WD-html-markup-20101019/global-attributes.html
주석 comments
주석은 주로 개발자에게 코드를 설명하기 위해 사용되며 브라우저는 주석을 화면에 표시하지 않는다.
<!-- 주석 -->
Q. HTML 이란?
웹 페이지의 내용(content) 와 구조(structure) 를 담당하는 언어로, HTML 태그를 사용
Q. HTML5 의 특징은 ?
1. 멀티미디어 (Multimedia)
- 플래시와 같은 플러그인의 도움 없이 비디오 및 오디오 기능을 자체적으로 지원한다
2. 그래픽
- SVG, 캔버스를 사용한 2차원 그래픽과 CSS3, WebGL 을 사용한 3차원 그래픽을 지원한다
3. 통신
- 지금까지의 HTML 은 단방향 통신만 가능하였으나 HTML5 는 서버와의 소켓 통신을 지원하여 양방향 통신이 가능하다.
4. 디바이스 접근
- 카메라, 동작센서 등의 하드웨어 기능을 직접적으로 제어할 수 있다.
5. 오프라인 및 저장소
- 오프라인 상태에서도 애플리케이션을 동작시킬 수 있다. 이는 HTML5가 플랫폼으로서 사용될 수 있음을 의미 한다.
6. 시맨틱 태그
- HTML 요소의 의미를 명확히 설명하는 태그이며, 그 데이터를 활용할 수 있는 시맨틱 웹을 실현할 수 있다.
7. CSS3
- HTML5 는 CSS3 를 완벽하게 지원한다.
'HTML5' 카테고리의 다른 글
| 6. HTML의 핵심 개념인 Hyperlink (0) | 2024.06.24 |
|---|---|
| 5. 텍스트 관련 태그 (0) | 2024.06.24 |
| 4. 웹 페이지를 구성하는 기본 태그 (0) | 2024.06.24 |
| 3. 시멘틱 웹 (0) | 2024.06.24 |
| 1. 프런트엔드 개발자 학습 방향 (0) | 2024.06.24 |
