안녕하세요 HTML이란 무엇인가 간략하게 알아보려고 한다.
이 글은 w3school 사이트에서 HTML Tutorial을 기반으로 기본문법과 실습을 위주로 글을 작성해 보고자 한다.
HTML이 무엇일까요?
HTML은 Hyper Text Markup Language이다.
HTML은 웹 페이지를 생성하기 위한 표준 마크업 언어이다.
HTML은 웹 페이지의 구조를 설명한다.
HTML은 마크업 요소들로 구성한다.
HTML은 컨텐트를 화면에 어떻게 표시할지를 브라우저에 알려준다.
HTML 요소는 "이것은 제목입니다.", "이것은 단락입니다.", "이것은 링크입니다" 등과 같은 컨텐츠에 레이블을 지정한다.
단순한 HTML 문서
| Example |
| <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> |
<!DOCTYPE html> 선언은 이 문서가 HTML5 문서임을 정의한다.
<html> 요소는 HTML 페이지의 루트 요소이다.
<head> 요소는 HTML 페이지와 관련한 메타 정보를 포함한다.
<title> 요소는 HTML 페이지에 대한 제목을 정의한다.
<body> 요소는 문서의 본문을 정의하며, 제목, 단락, 이미지, 하이퍼링크, 표, 목록 등과 같이 보이는 모든 내용에 대한 컨테이너이다.
<h1> 요소는 큰 제목을 정의한다.
<p> 요소는 단락을 정의한다.
HTML 요소란 무엇인가?
HTML 요소는 시작 태그, 일부 내용 및 끝 태그로 정의된다:
<tagname> Content goes here... </tagname>
HTML 요소는 시작태그에서 끝태그까지의 모든 요소이다:
| 시작태그 | 요소 내용 | 끝태그 |
| <h1> | My First Heading | </h1> |
| <p> | My first paragraph. | </p> |
| <br> | none | none |
웹 브라우저
웹 브라우저(chrome, Edge, Firefox, Safari, Whale)의 목적은 HTML 문서를 읽고 정확하게 화면에 표시한다.
브라우저는 HTML 태그를 표시하지 않지만 문서를 어떻게 표시할지를 결정하는데 사용한다.
vscode
vscode에서 상기 html예제를 작성해보았다. 아래 그림은 html 문서에 대한 그림이다.
HTML 페이지 구조
HTML 역사
HTML 실행
vscode에서 아래와 같은 코드를 입력한다.
vscode에서 실행하기 'F5' 단축키를 누르거나, 실행->디버깅시작을 클릭한다.
실행결과화면은 상기 그림을 참고바란다.
마무리
지금까지 간략하게 HTML에 대해 알아보았다.
HTML이 무엇인지, 간단한 HTML문서를 살펴보았고, HTML 요소가 무엇인지, 대표적인 HTML 태그와 요소를 활용하여 HTML 문서를 하나 만들었고 vscode로 실행해보았다.
꼭 상기 문서를 직접 입력하고 실행해보자. 포기하지 말고 하나씩 실행해가며 HTML 기본 문법을 익혀보자..
모두 화이팅!!!
감사합니다.
출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.
'HTML > HTML 기본문법' 카테고리의 다른 글
| HTML 스타일(Styles) (0) | 2023.04.16 |
|---|---|
| HTML 단락(Paragraphs) (0) | 2023.04.15 |
| HTML 제목(Headings) (0) | 2023.04.14 |
| HTML 속성(Attributes) (0) | 2023.04.13 |
| HTML 요소(HTML Elements) (0) | 2023.04.12 |
댓글