*웹 표준 기술
- HTML5 : CSS3와 자바스크립트를 모두 포함하는 웹 표준 기술을 총칭
- CSS : HTML 페이지에 스타일을 지정하는 스타일시트를 작성할 때 사용하는 언어
- 자바스크립트 : HTML 페이지에서 사용자 반응 등을 처리하는 스크립트를 작성하는 언어
1. HTML5 기본 용어
HTML (Hyper Text Markup Language)
1) 태그와 요소
* 요소 (Element)
HTML 페이지를 구성하는 각 부품
ex) 제목, 본문, 이미지 등
- 빈 요소 (Empty)
- 내용이 없는 요소 (가질 수 없거나, 필요X)
- 속성만 소유, 속성을 통해 전달
- 사람이 읽는 정보가 아님
<!-- 내용有 요소 -->
<h1>Hello HTML5</h1>
<p>즐거운 웹 프로그래밍 입문</p>
<audio></audio>
<!-- 내용無 요소 (빈 요소) -->
<img>
<br>
<hr>* 태그
요소를 만들 때 사용하는 작성 방법
2) 속성
* 속성 (Attribute)
요소의 성질, 특징 정의
- 태그(요소)에 추가 정보를 부여할 때 사용 (ex. 이미지 파일 경로, 크기 등)
<태그 속성="값"> 내용 </태그>
3) 주석
프로그램 실행에 영향을 미치지 않고 설명용으로 사용하는 코드
<!-- 주석 -->
<body>
<!-- h1 태그 -->
<h1>Hello HTML5</h1>
</body>
2. HTML5 페이지 구조 / 작성법
1) 기본 구조
!
: html 구조 자동 완성
<!DOCTYPE html>
<html lang="en">
<!-- 브라우저에게 주는 정보 -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<!-- 실제 보이는 부분 -->
<body>
</body>
</html>- <head>
<body>의 내용을 읽기 위한 정보 표기- 하나의 웹 페이지에 하나만 존재
- 메타 데이터를 포함하기 위한 태그
2) Emmet
- 자동 완성 기능
- 의미 없는 텍스트(Lorem) 또는 중복되는 태그를 편리하게 작성
- > : 자식 요소 만들기
- + : 형제 요소 만들기
- ^ : 상위 요소로 올라가기
- * : 반복하기
- . : 클래스
- # : 아이디
- [attr] : 속성
- $ : 넘버링
- {text} : 텍스트
ul>li*3
<ul>
<li></li>
<li></li>
<li></li>
</ul>ul>li.class#id$*10>a[href="#"]{text}
<ul>
<li class="class" id="id1"><a href="#">text</a></li>
<li class="class" id="id2"><a href="#">text</a></li>
<li class="class" id="id3"><a href="#">text</a></li>
<li class="class" id="id4"><a href="#">text</a></li>
<li class="class" id="id5"><a href="#">text</a></li>
<li class="class" id="id6"><a href="#">text</a></li>
<li class="class" id="id7"><a href="#">text</a></li>
<li class="class" id="id8"><a href="#">text</a></li>
<li class="class" id="id9"><a href="#">text</a></li>
<li class="class" id="id10"><a href="#">text</a></li>
</ul>
