① HTML5 란?
HTML(HyperText Markup Language)는 웹 페이지를 위한 지배적인 마크업 언어이다.
더 자세히 말하자면 웹페이지의 내용(content)과 구조(structure)를 담당하는 언어로써 HTML 태그를 통해 정보를 구조화하는 것이다.
마크업 언어?
태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지.
② HTML 기초 작성법
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<h1>Hello World</h1>
<p>안녕하세요! HTML5</p>
</body>
</html>- HTML5 문서는 반드시
<!DOCTYPE html>으로 시작하여 문서 형식을 HTML5로 지정한다. - 실제적인 HTML document는 2행부터 시작되는데
<html>과</html>사이에 기술한다. <head>와</head>사이에는 document title, 외부 파일의 참조, 메타데이터의 설정 등이 위치하며 이 정보들은 브라우저에 표시되지 않는다.- 웹브라우저에 출력되는 모든 요소는
<body>와</body>사이에 위치한다.
③ HTML 기본 문법
<!doctype html>
<html>
<head>
<title>Hello HTML</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>1. 요소
HTML 요소의 가장 보편적인 형태는 세 가지 구성 요소를 갖는다.
시작 태그(Start Tag)와 종료 태그(End Tag), 콘텐츠(Contents)이다.
<h1>→ 제목을 정의<p>→ HTML 문서의 단락을 정의
1-1. 요소의 중첩
요소는 중첩될 수 있다.
위의 코드에서는 html 요소는 body 요소를 포함하고, body 요소는 p 요소를 포함한다.
이러한 중첩 관계로 웹페이지의 구조(structure)를 표현한다.
1-2. 빈 요소 (Empty Element)
내용(contents)가 없는 HTML 요소를 빈 요소라고 한다.
<meta charset="utf-8">와 같은 빈 요소는 내용이 없으며, 속성만을 가질 수 있다.
대표적인 빈 요소는 아래와 같다.
- br (줄바꿈)
- hr
- img
- input
- link
- meta
2. 속성 (Attribute)
속성이란, 요소의 성질과 특징을 정의하는 명세이다.
<img src="html.jpg" width="104" height="142">
요소는 속성을 가질 수 있고, 요소에 추가적 정보(이미지 파일의 경로, 크기 등)를 제공한다.
속성 이름과 속성값(value)으로 표현된다. → 이름과 값이 쌍을 이룬다. (e.g. name = "value")
3. 주석 (Comments)
주석(comment)는 주로 개발자에게 코드를 설명하기 위해 사용되며 브라우저는 주석을 화면에 표시하지 않는다.
<body>
<! 인사하자~~~~~~ > // 이 부분이 주석으로 처리된다.
</body>🎁 참조 및 출처
무엇이든 할 수 있고, 무엇이든 될 수 있는