HTML이란
1. 컴퓨터에서 사용하는 파일에는 각각 고유형식이 존재하는데 웹사이트에서 사용할 파일의 형식은 *.html 확장자로 구성된 HTML 문서
2. HTML은 Hyper Text Markup Language의 줄임말로 하이퍼텍스트를 마크업하는 언어
3. 하이퍼텍스트 : 웹 사이트에서 링크를 클릭해서 다른 문서나 사이트로 즉시 이동할 수 있는 기능
4. 마크업: 태그를 사용해 문서의 부분별
우리가 방문하는 모든 사이트 접속 후 우클릭or F12 -> 페이지 소스 보기로 HTML, CSS소스가 확인가능하다.
웹 표준이란
1) 웹 표준
① 월드 와이드의 측면을 서술하고 있는 공식 표준
② 한 웹 페이지가 어느 부라우저를 사용하는 지 여부에 상관 없이 그 웹 페이지가 정상적으로 작동해야 함을 의미
③ 웹 표준 으로 문서 하나를 만들면 어떤 브라우저에서나 볼 수 있기 때문에 웹 개발자나 웹 디자이너의 시간 절약 가능 ④ HTML5로 웹 문서를 만드는 것이 웹 표준을 지키는 기본!!
2) HTML5와 CSS3 학습 이유
1) 최신 웹 표준에 맞는 웹 웹사이트 제작 가능
① PC, 스마트폰, 태블릿 외 IOT 기기에 맞는 웹 표준이 HTML5이며, CSS3로 기기에 따른 다양한 레이아웃 제작 가능
2) 앱 및 웹 화면 디자인의 기초
① C언어, 자바 등과 같은 고급 프로그래밍 언어를 사용하지 않고 쉽게 웹 페이지 구성 가능
② 스마트폰, 태블릿 용 앱 화면을 보여주는 정보들은 HTML5와 CSS3로 구성
3) 인터랙티브한 사이트 제작 가능(인터랙티브한 사이트 : 사용자들 동작에 곧바로 반응하는 사이트)
① 이전 웹 사이트들은 Active X등 플러그인을 사용하여 인터랙티브한 사이트 제작
② HTML5, CSS3 사용 시 플러그인 없이 인터랙티브한 사이트 제작가능
ex) 동영상 플레이 하는 웹 사이트 태그로 간단하게 구현 가능(이전에는 플래시 플러그인 사용)
- HTML 기본 문서 구조
① <!doctype>과 <html>, <head>, <body> 네 가지 태그를 이용하여 문서의 시작과 끝 표시
② <!doctype> : 문서의 유형을 지정
ex) <!doctype html> 문서가 HTML5 언어로 작성된 웹 문서라는 뜻
※ HTML4에서는 문서유형도 다양하고 문서지정 소스도 길었지만 HTML5부터는 한 줄로 문서유형 선언
③ <html>~</html> : 웹 문서 시작과 끝을 알리는 태그
※ <html>에서 lang속성으로 문서에서 사용할 언어 지정
ex) <html lang=“ko”> - 문서에서 사용할 언어로 한국어 지정
④ <head>~</head> : 브라우저에게 정보를 주는 태그
⑤ <title>~</title> : 문서 제목 표시 태그
ex) <title>내가 처음 만드는 HTML 문서</title>
⑥ <meta> : 문자 인코딩 및 문서 기워드, 요약 정보 charset 속성으로 한글, 영문 등 모든 언어를 표시 할 수 있는 utf-8방식 사용 웹 문서에 대한 간단한 설명 추가 가능
ex) <meta charset=“utf-8” name=“description” content=“간단한 설명">
⑦ <body>~</body> : 실제 브라우저에 표시될 내용
특수 문자 및 특수 기호 사용
| 화면표시 | 특수기호 | 화면표시 | 특수기호 |
| & | & | (공백한칸) | |
| < | < | > | > |
| " | " | | | | |
| ( | ( | ) | ) |
| , | , | - | - |
| ' | ´ |