① HTML(Hyper Text Markup Language)은 웹 페이지를 만들기 위한 대표적인 마크업 언어로 브라우저로 하여금 웹페이지의 구조를 알 수 있게 해준다.
㉠ 마크업 언어는 태그를 이용하여 문서나 데이터의 구조를 구성하는 언어이다.
ⓐ 태그는 원래 텍스트와는 별도로 원고의 교정부호와 주석을 표현하기 위한 것이었다.
ⓑ 현재는 용도가 점차 확장되어 문서의 구조를 표현하는 역할을 하게 되었다.
㉡ 브라우저는 웹페이지를 이용하기 위해 사용하는 프로그램으로 Internet Explore, Chrome, Opera, Safari 등이 있다.
② HTML은 요소(Element)들의 나열들로 이루어진다.
㉠ 요소는 아래와 같은 형태를 띈다.
㉡ 요소의 앞 부분은 여는 태그(Start Tag)로 이루어지고 뒷 부분은 닫는 태그(End Tag)가 끝에 붙여 닫힌다.
ⓐ 여는 태그와 닫는 태그와의 명시적인 차이는 /(슬래시) 기호의 유무이다.
④ 아래 코드는 기본 요소들로 이루어진 이루어진 예제이다.
<!doctype html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>First Headeing</h1>
<p>First paragraph</p>
</body>
</html>㉠ <!doctype>는 웹 브라우저에게 이제부터 사용할 문서는 어떤 종류의 문서이며, 그 종류에 맞는 방법으로 해석하라고 브라우저에게 알려주는 것이다.
ⓐ <!doctype html>는 이 문서가 HTML5로 작성된 문서라는 뜻이다.
㉡ <html> 요소는 웹 문서의 시작과 끝을 나타내는 태그이다. 웹 브라우저가 <html> 태그를 만나면 </html>까지의 소스를 읽어 HTML 문법에 맞추어 브라우저에 표시한다.
ⓐ lang이라는 속성을 이용해 문서에서 사용할 언어를 지정할 수 있다.
㉢ <head>요소는 웹 브라우저가 웹 문서를 해석하기 위해 필요한 정보들을 입력하는 부분이다. 여기에 있는 정보는 메타 정보(Meta data)라고 하며, 실제 문서 내용이 아니기 때문에 문서 제목만 브라우저 창에 표시되고 나머지는 웹 브라우저 화면에 표시되지 않는다. 스타일 및 스크립트 등이 포함되기도 한다.
㉣ <title>요소는 HTML 페이지의 제목을 명시한다.(이는 브라우저의 제목표시줄이나 페이지의 탭에 표시된다.)
㉤ <body>요소는 실제로 웹 브라우저 화면에 나타날 내용으로 앞으로 공부할 HTML 태그들은 대부분 <body> 태그 안에 들어간다.
㉥ <hn>요소는 웹 콘텐츠 영역에서 제목을 표시할 때 사용하는 태그이다.
ⓐ h1>h2>h3>h4>h5>h6 으로 갈 수록 글자의 크기가 줄어든다.
㉦ <p>요소는 텍스트 단락(Paragraph)을 정의한다.
ⓐ 입력한 내용 앞뒤로 빈 줄이 생기면서 텍스트 단락이 만들어진다.
④ HTML 문서를 읽고, 문서를 화면에 띄우기 위해 웹 브라우저(크롬, 마이크로소프트 엣지, 파이어폭스, 사파리)를 사용한다.
㉠ 브라우저는 HTML 태그를 표시하진 않지만, 태그를 사용해 문서를 어떤 방식으로 표시할 지 결정한다.
<!doctype html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2>Second Heading</h2>
<p>First paragraph</p>
</body>
</html>⑤ HTML은 자바스크립트나 CSS 를 포함하거나 불러올 수 있다.
⑥ 크롬처럼 가벼운 브라우저를 원하는 사람들을 위해서 부가 기능은 플러그인의 형태로 제공하는 경우가 대세이다.
'All about WEB > All about HTML' 카테고리의 다른 글
| 20. HTML div와 span 요소 (0) | 2021.07.18 |
|---|---|
| 19. HTML ID (0) | 2021.07.18 |
| 18. HTML 클래스(Class) (0) | 2021.07.18 |
| 17. HTML 테이블(Tables) (0) | 2021.07.18 |
| 17. HTML 리스트(Lists) (0) | 2021.07.18 |
